- 博客(22)
- 资源 (2)
- 收藏
- 关注
RSS订阅
原创 js函数练习解析（含if，循环，递归等语句）
js- - -常见函数练习题 1.编写函数，判断一个字符串的内容是不是纯数字 function judge(str){ var a=isNaN(str);//判断字符串是不是一个非数字 if(a){ console.log(str+"不是纯数字"); }else{ console.log(str+"是纯数字"); } } judge("152a") 2.编写一
2020-07-10 21:25:16
1502
3
原创 React中调用 setState 之后发生了什么
React的setState触发状态更新流程：首先将新状态加入更新队列，启动Fiber算法的调和过程异步构建新元素树。通过diff算法对比新旧树差异，为节点打上更新标记。调度器按优先级执行doWork处理更新，最后在commit阶段批量更新DOM。整个过程实现了高效的按需渲染，而非全量重绘。
2025-12-23 10:08:11
320
原创 package.json 文件中的 devDependencies 和 dependencies对象有什么区别
前端项目的package.json 文件中，devDependencies和dependencies对象都用于指定项目所依赖的软件包，但它们在项目的开发和生产环境中的使用有所不同。
2025-12-23 09:41:15
187
原创 简述Vite 和 Webpack的区别
Vite和Webpack是两种主流前端打包工具，主要区别在于：Vite开发环境下采用原生ES模块加载，构建速度更快且配置简单，适合快速开发；Webpack配置复杂但功能全面，生态系统成熟，更适合生产环境的复杂应用打包。Vite目前生态仍在发展，而Webpack拥有丰富的插件支持。项目选择需根据具体需求，Vite侧重开发效率，Webpack强调功能完备性。
2025-12-19 16:55:33
306
原创 Mobx数据状态管理在react中最基础的使用教程
MobX是一个轻量级状态管理库，采用函数式响应编程(TFRP)实现数据与UI的自动同步。其核心基于可观察状态(Observable)自动追踪依赖，相比Redux代码量更少，适合中小型项目。使用步骤：1)创建Store类并用@observable/@action装饰；2)用Provider注入store；3)通过@inject和@observer装饰组件实现状态绑定。MobX通过自动依赖管理简化了状态更新流程，开发者无需手动处理UI更新。
2025-12-19 16:32:28
94
原创 axios请求拦截基础如何封装
本文介绍了Axios拦截器的常见用途及实现方法。拦截器主要用于认证处理、数据格式转换、错误处理和日志记录。代码示例展示了一个完整的Axios实例封装，包含请求拦截器（自动添加token）和响应拦截器（统一处理各种响应状态码）。特别处理了成功、失败、警告、未登录和权限不足等情况，通过状态码枚举和消息提示实现统一错误处理。该封装方案可用于前端项目中统一管理API请求，提高代码复用性和可维护性。
2025-12-18 16:08:56
160
原创 React中如何使用百度地图最简单
这是一个基于React封装的百度地图组件库，支持自动加载百度地图SDK，提供常用地图组件满足基础需求，同时允许通过原生API实现复杂功能。特性包括自动加载SDK、TypeScript支持、React Hooks兼容性和零第三方依赖。示例代码展示了地图初始化、坐标定位、拖拽标记等功能，支持IP定位和地址解析。通过Map、Marker等组件可快速集成百度地图到React项目中，适合需要地图功能的业务场景。 （字数：150）
2025-12-18 15:35:49
678
原创 基于面包屑组件二次封装文件管理导航组件
本文介绍了一种实现多级路由导航的通用方案，适用于文件管理系统等需要层级访问的业务场景。该方案通过数组操作实现导航功能，支持任意层级跳转和返回上一级操作。核心组件采用React+Ant Design实现，包含面包屑导航组件和父组件调用逻辑。导航数据以数组形式存储，每个节点包含文件名、ID和类型等信息。点击文件时动态更新导航数组，点击面包屑时截取数组实现层级跳转。该方案适配PC和移动端，通过类型区分文件与文件夹操作，具有较好的通用性和扩展性。
2025-12-17 17:05:40
335
原创 文本超出可视区，启动跑马灯（外加阴影实现轮动效果）
本文介绍了一种基于Vue3实现文本无缝滚动的优化方案，通过CSS text-shadow属性模拟循环效果而非DOM操作。核心思路是动态计算阴影偏移量实现平滑滚动，配合CSS动画控制过渡效果。代码示例展示了响应式设计实现：监听文本宽度变化，当超出容器时自动触发动画，使用transform位移实现循环滚动效果。该方案避免了直接操作DOM的性能损耗，可根据实际需求调整滚动速度、方向和间隙参数，适用于不同屏幕尺寸的展示场景。
2025-09-05 16:34:21
242
原创 前端js如何实现截屏功能，插件推荐js-web-screen-shot
读取dom结构转换成canvas，最后转成图片形式展示：没有编辑功能。大佬模仿qq截图实现的，也可以搭配webrtc实现web端远程桌面共享
2023-07-21 16:53:12
3895
2
原创 什么时候使用border图片比用background背景图要好（border-image，background-image的使用）
这次需求中ui给的几个png图，要给按钮和可视化框科技风图片，第一想到的是background，当时使用时发现内容文字的宽度不确定，拉伸会变形，这时让我发现了很少使用的css3中的border-image。
2023-07-19 17:23:12
344
原创 npm安装插件区分生产依赖和开发依赖
npm i plugin_name -g //全局安装npm i plugin_name -S => npm i plugin_name --save //生产依赖 ~~ 写入dependencies对象npm i plugin_name -D => npm i plugin_name --save-dev //开发依赖 ~~ 写入devDependencies对象使用npm安装插件时,--save、--save-dev两种命令分别把他们写入到 package.json文件depe
2022-05-05 17:36:37
1065
原创 基础篇（一）：初识webpack的配置（手动搭脚手架、html-webpack-plugin、webpack-dev-server等）
目录一.开发前准备二.自定义webpack配置1.html-webpack-plugin自动引入资源2.清理dist3.mode环境4.source map5.watch mode6.webpack-dev-server一.开发前准备1.新建一个webpack-app文件夹，生成package.json文件npm init -y2.安装webpack注意：建议安装webpack到当前项目，不要在全局，避免和小伙伴webpack版本不一致npm install webpack webpack-c
2022-04-29 18:43:58
513
原创 浅谈React组件性能优化的方式
React组件性能优化合理使用state避免不必要的重新渲染同页面state是否改变父子组件props是否改变函数式组件优化useCallback、React.memoReact组件复用Key的使用合理使用state减轻state：只存储跟组件渲染相关的数据（比如：count/给后端的入参/后端返回数据data/切换状态visible、loading等）注意：不用做渲染的数据不要放在state中（比如：定时器timer/用作js处理数据定义的变量）对于需要在多个方法中用到的数据，应该放在
2021-07-20 17:56:55
700
原创 注册登录js、php、ajax前后端数据交互使用
注册登录js、php、ajax前后端数据交互使用引用 js文件：ajax.js（这里用postsend函数）function getSend(url,cb){ var xhr=new XMLHttpRequest(); xhr.open('get',url); xhr.onload=function(){ cb(xhr.responseText) }; xhr.send(null);}function postSend(url,cb,da
2020-08-29 15:24:35
377
原创 js实现放大镜效果代码
js实现放大镜效果代码html代码： <div id="box" > <div id="small"><!-- 小图片所在的盒子 --> <img src="001.jpg" alt="" /><!-- 小图片:350*350 --> <div id="mask"></div><!-- 遮罩层:175*175 --> </div> <div id="big
2020-07-28 17:12:51
2305
2
原创 js实现轮播图特效
js实现轮播图特效html代码：<div class="slider" id="slider"> <div class="slider-img"> <ul> <li><a href="#"><img src="images/1.jpg" alt=""/></a></li> <li><a href="#"><i
2020-07-28 11:38:41
345
原创 js用正则表达式实现页面注册和密码强度验证
js用正则表达式实现页面注册和密码强度验证<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style>
2020-07-23 19:21:47
541
原创 JavaScript通过循环执行顺序，做5×5的二维数组，赋1到25的数，然后输出该数组的左下半三角。
通过循环按执行顺序，做一个5×5的二维数组，赋1到25的自然数，然后输出该数组的左下半三角。方法一： //先遍历一个25个数的数组 var arr=new Array(25); for(var i=0;i<arr.length;i++){ arr[i]=i+1; } //每5个截取一组u，循环5次 for(var i=0;i<5;i++){ var newArr=arr.splice(0,5); //
2020-07-17 09:28:21
2193
原创 js逻辑运算符&& || ！的详细使用
js逻辑运算符&& || ！的详细使用&& 符号：运算方法： 只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值; 只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值; 总结：一假全假，假前真后|| 符号：运算方法： 只要“||”前面为true,不管“||”后面是tr
2020-07-11 15:06:18
611
JavaScript常用函数练习
2020-07-11
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人