- 博客(22)
- 收藏
- 关注
RSS订阅原创 react生命周期及hooks等效实现
定义：自定义 Hooks 是一个函数，其名称以 use 开头，内部可以调用其他 Hooks。核心价值：复用有状态的逻辑（如订阅、动画、表单验证），同时不污染组件结构。与组件的区别：组件返回 UI，而自定义 Hooks 返回数据或副作用。// 使用 localStorage 持久化状态// 1. 内部使用 useState 管理状态try {});// 2. 使用 useEffect 添加副作用// 3. 指定依赖项，控制副作用触发时机。
2025-06-24 22:15:25
996
原创 从loader和plugin开始了解webpack
极简的loader// source: 输入的文件内容（字符串或Buffer）// 获取loader配置参数，this.getOptions 是 Webpack 提供的标准化参数获取方式// 处理逻辑...// 返回处理后的内容极简的plugin// 接收配置参数apply(compiler) { // compiler见下// 注册钩子监听编译过程。
2025-06-16 22:29:23
676
原创 前端错误捕获
/ 使用try {throw new NetworkError('请求失败', res.status);showToast(`网络错误${} } // 使用 try {throw new NetworkError('请求失败' , res . status);showToast(` 网络错误 ${ error . statusCode } `);} }} } // 使用 try {throw new NetworkError('请求失败' , res . status);
2025-06-15 16:41:58
1083
原创 http的缓存问题
场景：列表数据、详情页数据axios-interceptors拦截请求，判断是否读取缓存根据用户操作调整策略：下拉刷新 --> 强制更新，手动刷新按钮。
2025-06-14 19:20:56
1159
原创 ajax的post请求，request payload为[object Object]解决
ajax的post请求，request payload为[object Object]解决。
2024-10-17 10:41:21
283
原创 JS 转base64中文乱码问题
1.判断是否是base64const isBase64 = (str) => { if(!str) return false; var base64Str = /^([A-Za-z0-9\s+/]{4})*([A-Za-z0-9\s+/]{4}|[A-Za-z0-9\s+/]{3}=|[A-Za-z0-9\s+/]{2}==)$/; return base64Str.test(str);}2.UTF8转换const utf8to16 = (str) => { var
2022-02-22 10:44:21
2077
原创 JS 使用DES加密解密
1.安装插件npm install crypto-js2.使用import CryptoJS from 'crypto-js';const key = 'abcdefg';const keyHex = CryptoJS.enc.Utf8.parse(key);// 加密const encryptDES = (message) => { if (message) { var encrypt = CryptoJS.DES.encrypt(message, keyHex, {
2022-02-22 10:39:24
4332
原创 react代码编辑器 react-ace
首先说一下网上其他的编辑器：轻量级：1.codeMirror ：文档和代码对不上，没有diff功能github地址：https://github.com/codemirror/CodeMirror示例代码：https://uiwjs.github.io/react-codemirror/2.react-code-diff 最近一次维护2018年，直接报错无法使用重量级：1.monaco ：微软出品，值得信赖github地址：https://github.com/microsoft/mona
2021-12-27 19:05:43
5831
5
原创 关于img标签缩小后模糊的解决方案
网上尝试方案：1.image-rendering: pixelated; // 像素化，出现锯齿状，pass2.image-rendering: crisp-edges; // 无效3.只设置width // 无效，还是会模糊最终解决方案：width: 100px;height: 200px;object-fit: cover;关于很多人分不清object-fit各个参数的效果，其实根据单词含义能推测出来：原图：1.fill：充满拉伸图片达到设置的宽高（在contain的基础下，哪
2021-08-25 16:24:36
6191
1
原创 关于html毛玻璃效果
1.backdrop-filter使用方法：当前页面使用，适用于当前元素背后的所有元素backdrop-filter: blur(5px);缺点：安卓兼容性不佳2.filter使用方法：背后页面使用，适用于当前元素filter: blur(5px);缺点：会有一圈白边，因为模糊图片边缘会使body的背景色透出来，而body一般是白底的。解决方法如下对于小图：给包含它的父元素添加一个 overflow: hidden对于背景图：a.如果不需要考虑细节，把图片比例调大一点：f
2021-06-21 12:11:37
798
原创 Flutter 实现切角渐变矩形
实现效果实现思路：Stack绝对定位，一个靠左一个靠右，右边的按钮切角后压在左边按钮上边代码：// 自定义梯形切角class TrapezoidPath extends CustomClipper<Path> { @override Path getClip(Size size) { var path = Path(); path.moveTo(0, 77.w);//x,y坐标 path.lineTo(25.w, 0); path.lineTo
2020-11-27 12:43:19
1561
3
原创 flutter 软键盘弹出dialog不上移问题
问题：dialog中有输入框，点击输入框，输入框上移，dialog不上移导致dialog白屏解决方法：外层包一层Scaffold代码如下：showDialog( context: ctx, builder: (ctx) { //修复键盘弹出弹窗不上移问题 return GestureDetector( onTap: () => Navigator.pop(), behavior: HitTestBehavior.opaque
2020-09-27 14:06:29
1596
原创 Flutter 模仿银行卡号等长号码输入分段显示
效果展示初始想法：本来想直接四个输入框，然后监听输入满四个字符，自动next焦点，但是粘贴显示的交互不太友好，加上四个textController + 四个FocusNode总感觉太冗余最终想法：模拟一个输入框和光标，真正的输入框用Stack绝对定位到假输入框正上方，用户点击假的输入框其实是点击了上面的输入框，同时唤起键盘，监听到用户输入后，再使用setState改变文本显示。全部代码：/* * * 输入框 * 允许十六位字母+数字格式 * 分开显示 每组四个字符 * */class L
2020-09-03 20:26:39
772
原创 Flutter 组件切换动画
两个组件切换动画代码：Stack( overflow: Overflow.visible, children: <Widget>[ AnimatedCrossFade( firstChild: _getOpenPackageItem(i), secondChild: _getClosePackageItem(i), crossFadeState: !state.isClose[i] ? CrossFadeState.showFirst : CrossFad
2020-08-26 18:16:48
862
原创 showModalBottomSheet高度自适应
关于showModalBottomSheet高度自适应需求：1.showModalBottomSheet根据内容大小高度自适应2.超出最大高度（例如屏幕的三分之二）可以滑动3.键盘弹出时自适应 static showBottomPop(BuildContext context) { return showModalBottomSheet( context: context, isScrollControlled: true, //可滚动 解除showMod
2020-08-11 14:49:49
4680
原创 html中img图片截取显示中间部分
由于需求要求图片居中显示，同时要有图片加载错误的处理，所以排除了css的background-position方法html代码：<img src="' + cover + '" onerror="this.src=assets/pro-ping.png;" onload=imgOnload(this) />js代码：function imgOnload(e) { conso...
2020-04-24 10:44:39
10323
2
原创 记录一下iframe的坑
关于为什么要用iframe，主要是因为几个页面有一个共同的导航栏，为了防止代码重复所以使用了iframe。1.iframe父子页面DOM访问从父页面直接访问子页面的DOM和从子页面直接访问父页面的DOM都是找不到的，由于我比较习惯用IQ所以以下代码都是JQ语句1.1 如何在父页控制子页面的DOM父页面js：$("iframe").contents().find(".子页面DOM节...
2020-04-04 00:21:21
528
原创 记录一下CocoaPods的一些问题
Ruby的版本$ gem update --system # 这里请翻墙一下$ gem -v2.6.3 # 建议 2.6.x 以上替换源$ gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/$ gem sources -lhttps://gems.ruby-china.com ...
2019-12-03 14:42:32
122
原创 Flutter踩坑小总结01----FutureBuilder
Flutter踩坑小总结01关于组件FutureBuilderFutureBuilder的使用方法功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchar...
2019-11-13 10:46:00
1458
3
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人