实用工具-命令式显示弹框
背景项目中经常会遇到这种情况，调用A接口之后需要有一个确认弹框。用户点击确认之后再调用B接口。确认弹框如果使用 visible 来控制的话，那么势必会将一个同步的流程变成异步的处理。我们可能需要保存当前的执行环境。所以命令式的弹框很有必要可以让整个流程如流水线般的一条线下来，不用再通过 visible 来响应式的控制弹框 用法jsx12345678910111213141516const ModalView: FC<{ visible}> = () => { return ( <Modal visible={visible}> <div>这是弹框的内容</div> </Modal> ) }// 命令式调用，这样就能快速唤起 ModalView 弹框const modalView = new ModalViewUtils(ModalView)modalView.show({ visible:...
不定高虚拟列表
虚拟列表虚拟列表(Virtual List)是一种优化长列表性能的技术，它通过只渲染可视区域内的元素来大幅减少DOM节点数量，从而提高页面性能。基本原理如下 计算可视区域：确定容器高度和滚动位置 计算可见项：根据滚动位置确定哪些列表项应该显示 动态渲染：只渲染可见项，移除不可见项的DOM 占位元素：使用占位元素保持滚动条的正确性 DOM 结构1234567891011121314151617181920212223242526272829<div {/* 可视区域-滚动容器 */} className={'scroll-container'} ref={scrollContainerRef} onScroll={handleScroll}> {/* scroll-runway 撑开内容的高度，保证出现滚动条 */} <div className={'scroll-runway'}...
前端封装读取excel任意行数据工具
使用 SheetJS/XLSX 封装获取 excel 任意行数据1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465class ExcelParser { constructor({ file }) { this.file = file; } getWorksheet() { return new Promise((resolve) => { const fileReader = new FileReader(); fileReader.onload = (e) => { const arrayBuffer = e.target.result; const workBook =...
正则表达式
1. 限制数量说明当某个字符集合前后各有字符时，则该字符集合就被限制了数量为1，如需要不被数量限制可在字符集后面加上量词。 范例匹配<123456789>"<>"内的数字的个数不等。写一个正则匹配。 错误示例12 const reg = /<[\\d]>/g"<123456789>".match(reg) // null 结果为null 解释：这样写貌似看着没有问题。但是实际上由于[\d]前后有字符"<"和">"所以说限制了[\d]只能匹配到一个，所以下面这个示例才是可以的 正确示例12const reg = /<[\\d]+>/g"<123456789>".match(reg) // [\"<123456789>\"] 解释：给[\d]加上了量词 * 即可以匹配[\d] 0到多次。且匹配的次数越多优先级越高。 2....
浏览器一个渲染帧执行卡顿问题详解
渲染帧我们通常看的视频其实都是一张张图片播放的，图片播放的频率越快(帧数越高)就会看起来越流畅。浏览器的渲染其实也是一样的。现代浏览器通常以 60HZ刷新率（即每秒60帧，每帧约16.67ms）为目标进行渲染。也就是每隔 16.67ms 渲染一张图片，那如果浏览器发生卡顿（主线程被 long task 长时间占据）就会导致浏览器没法每隔 16.67ms 渲染一张图片。就会导致视觉上看起来是卡卡的。如下所示从上面能看出刚开始还是比较流程，后面点击了 longtask 之后，开始卡顿。整个的代码如下 12345678910111213141516171819202122232425const box = document.getElementById('box');let translateX = 0let direction = 1;// 模拟一个长时间运行的任务function longTask() { const start = Date.now(); while (Date.now() - start < 200) { ...
记一次Webpack迁移到Vite的过程
背景项目之前是自己搭建的 Webpack 脚手架，随着项目的迭代工程量也越来越大，写了一个脚本跑了一下，项目 src 目录下有 1540 个文件，这个数量还在不断增加再加上大量的 node_modules。Webpack 首次启动编译一遍需要 2+ Minutes 的时间，以至于开发期间换个 proxy，restart 的时候真是个痛苦的事情。且热更新的响应速度也不是很理想。所以通过不懈的努力(一通乱搞)将项目迁移到了 Vite，下面记录一下遇到的几点问题。 迁移神器 wp2vite1npm i wp2vite -g wp2vite会自动分析Webpack的配置然后移植到在根目录创建的 vite.config.js 文件中。但是移植到 vite.config.js 只是基础的配置，很多还需要自己手动更改 开发代理(proxy)vite 与 webpack 在代理方面重写路径的写法是不一样的，vite 用的是 rewrite 函数，而 webpack 是 pathWrite 对象。 Sass之前 Webpack 中使用的是 node-sass 和 sass-loader...
算法-二叉树与数组之间转化
原始数组1const originArr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]; 将数组转为二叉树如上图的二叉树所示，是一个按照层序遍历生成的二叉树。最终的数据格式应该是这样的 123456789101112131415161718192021222324252627282930313233343536373839404142434445const BTree = { nodeName: 1, left: { nodeName: 2, left: { nodeName: 4, left: { nodeName: 8, }, right: { nodeName: 9, } }, right: { nodeName: 5, left: { nodeName: 10, }, ...
算法-通过子节点找父节点
先看一段数据结构 123456789101112131415161718192021222324252627282930313233343536373839404142const list = [ { id: 1, name: 'Node1', children: [ { id: 3, name: 'Node1_1', children: [ { id: 8, name: 'Node1_1_1' }, { id: 9, name: 'Node1_1_2' }, { id: 10, name: 'Node1_1_3' }] ...
webpack中的各种publicPath
output中的publicPath先看一个webpack中output的配置 12345output: { filename: 'bundle.js', path: path.resolve(__dirname, '../dist'), publicPath: '/' } publicPath解释最多的是说访问静态资源时的路径，当我们把资源放到CDN上的时候，把 publicPath设为CDN的值就行了，这种使用方法适用于生产环境。publicPath在开发环境下指的是通过html-webpack-plugin生成的index.html文件中引入的output.filename的时候要不要加上刚才配置的publicPath。即${output.publicPath}/${output.filename}。如刚才配置的publicPath是“/”，那么最后的打包后的结果是。 我们把publicPath换成/assets/,...
