- 博客(62)
- 收藏
- 关注
RSS订阅原创 开发中遇到需要对组件库组件结构调整的两种落地方案实践
方案维护成本上手速度规范性适用周期私有组件库包中-高中高长期离线包低高低短期建议原则长期看一定要收敛到「私有组件库」方案离线包只作为“止血方案”，不作为最终形态如果你的团队也经常遇到组件库与设计稿不一致的问题，希望这两种方案能帮你在效率与规范之间找到平衡。
2026-01-15 23:12:39
550
原创 Babel 深度解析（二）：插件开发
/ Babel 核心模块// 代码解析为 AST// 遍历并修改 AST// AST 生成代码// 构造或判断 AST 节点parser：将源码字符串解析成 AST。traverse：遍历 AST 树，找到特定类型的节点。types：创建、判断或替换节点。generator：把修改后的 AST 重新生成源码。core：整体的编译管控中心，可注册插件等。解析源码→ 生成 AST遍历 AST→ 找到要修改的节点修改节点→ 使用types工具生成或替换生成新代码→ 输出改造后的源码。
2025-10-12 23:54:15
310
原创 Babel 深度解析(一)：从编译器原理到代码转换
在现代前端开发中，Babel已经成为了不可或缺的工具。它的存在，让我们可以放心使用 ES6、ES7、甚至 JSX 这样的新语法，而不必担心浏览器兼容问题。很多人知道 Babel 是一个JavaScript 编译器，但可能没有深入理解它是如何工作的。今天，我们就通过编译器的基本原理，来拆解 Babel 的工作流程。简单来说，编译器就是把一种语言翻译成另一种语言的程序。它会分析你的源代码，生成目标代码，甚至做优化处理。input → tokenizer → tokens // 词法分析。
2025-10-08 22:14:10
768
原创 使用 vue-virtual-scroller 实现高性能传输列表功能总结
借助优先选用合适虚拟滚动组件（RecycleScroller）保持数据对象引用稳定，避免整体替换谨慎使用key控制渲染范围避免高频执行的computed函数写法异步请求重用 Promise 减少网络压力。
2025-09-13 22:55:33
1191
原创 使用 Gulp + Webpack 打造一个完整的 TypeScript 库构建流程
用Gulp控制任务流，适用于多产物输出（ESM / CJS / d.ts）；用Webpack打包成一个独立的UMD 文件，方便 CDN 与浏览器使用；两者结合，覆盖所有使用场景，构建过程既灵活又全面。
2025-09-02 22:53:06
453
原创 使用 Vuepress + GitHub Pages 搭建项目文档（2）- 使用 GitHub Actions 工作流自动部署
根据触发条件（push、PR、定时等）执行任务在云端虚拟机上自动构建、测试、部署免去本地手动操作，降低出错率检测到代码更新在云端安装依赖并构建 VuePress将静态文件部署到gh-pages分支自动更新 GitHub Pages 网站监听分支变化云端构建 VuePress自动部署到 GitHub Pages整个过程无需手动切分支、build、推送，大幅提高了效率。
2025-08-09 19:41:56
1054
原创 使用 Vuepress + GitHub Pages 搭建项目文档
VuePress 是一个基于 Vue.js 的静态网站生成器，常用于创建文档站点或个人博客。下面将介绍如何在已有的项目中进行搭建。
2025-08-03 23:19:53
580
原创 使用 Vue Tour 封装一个统一的页面引导组件
传入steps；引用组件；调用start()。对于提升用户上手效率、降低学习成本、增强产品友好性来说，这样的小工具非常值得一试。如果你也有类似的需求，欢迎试试这个方案～vue-tour。
2025-05-17 23:42:37
1496
原创 微信 Webview H5 调用小程序预览（uni-app）
实现方式是否推荐适用场景❌ 不推荐少数仅需在返回时同步信息的场景navigateTo+ 参数传递✅ 推荐主流跳转预览、参数传递等需求🎯建议优先使用navigateTo跳转方式，搭配参数传递可以覆盖大部分 Web 调用小程序的业务场景。
2025-05-14 23:44:27
958
原创 使用 intersectionObserver 实现图片懒加载
这样我们就实现了图片懒加载的功能，也证明了 intersectionObserver 的强大，是时候抛弃掉传统的 监听 scroll 事件来实现懒加载功能了~intersectionObserver确实是个很实用的 api ，我们可以基于它很方便的实现图片懒加载功能，如果没了解过的童鞋可以看看阮一峰大佬的文章。实现其实很简单，主要就是要通过单例模式来减少多次实例化，优化性能。PS：如果需要考虑兼容性问题的话可以使用官方的 polyfill。接下来废话不多说，直接上代码。
2024-12-08 22:43:44
441
原创 解决文件名超出时中间显示省略号，中文名与英文名长度显示不一致问题
通过判断当原本的文本 dom 高于右侧高度时，说明发生了换行，这时候不需要显示原本文本，所以进行隐藏，反之则显示。实现原理可以参考这里~
2024-12-08 21:20:08
403
原创 electron-builder 首次执行报错问题解决
假日想研究一下 react + electron 的使用，结果发现首次打包疯狂报错，研究了一下之后才发现是第一次的话 electron-builder 会从外面下载依赖包到我们系统中，由于某种力量导致压缩包无法下载或者是下载过慢导致失败，要解决其实也简单，给我们的 npm 加上。使用的端口，这样子就能正常下载了，不行的话可能就得自己去下载对应的压缩包放在对应的位置了（不展开细说，网上有很多）最后，关于初始项目的搭建，我推荐从这里直接拿一个，可以减少手动搭建的步骤，确实还是有点麻烦的hh。
2024-10-04 18:38:19
997
原创 leetcode算法题之 K 个一组翻转链表
pre变量保存上一个节点，初始值为null，cur变量保存当前节点，初始值为我们传进去的节点，每次遍历时用next变量保存下一个节点，然后把当前节点的next值指向上一个节点即可，直到cur变量为null，我们返回pre，即是最后一个节点。end为结束节点，当遍历到时，停止遍历返回即可，如果刚好是链表最后一个，那end为null，就和我们上面的代码一致。有了这个方法接下来的事情就简单了，我们只需要遍历链表，当节点到k时，传进去反转即可。你不能只是单纯的改变节点内部的值，而是需要实际进行节点交换。
2024-08-31 16:35:43
572
原创 LogicFlow实现使用vue组件进行自定义节点
LogicFlow是一款很好用的流程图编辑框架，也支持根据html来自定义节点，但是当我们的节点比较复杂时，我们可能更倾向于用vue组件来实现这个功能，现在LogicFlow官方使用vue3的Teleport组件实现了类似的效果，有兴趣的可以先去看看。PS: 这个方法是早期基于官方只有html节点的实现方法，随着官方的迭代更新，后面还是推荐用官方的哈。这样我们就可以愉快的在NewComponent组件中进行各种操作啦。vue2没有Teleport组件，需要额外的插件来实现类似的功能。
2024-08-31 13:14:20
1931
原创 使用html-docx-js + fileSaver实现前端导出word
PS：如果遇到样式问题的话，比如图片宽高（需要使用img标签的width和height属性），字体大小（需要使用pt）不生效的话，可以先把对应的docx模板转成html查看样式后再对应进行修改。因为html-docx-js是16年的老库了，它代码里面用到的with语法现在严格模式不允许，用npm直接引入会报错，所以我们需要用其它方式引入。代码里面几个with的用法需要改一下，因为现在都是默认严格模式了。接下来到项目的html文件中，使用script标签引入。，然后把涉及到的都改成类似如下的即可。
2024-08-18 21:24:48
1369
原创 leetcode算法题之N皇后
接下来的问题就是我们要怎么判断当前位置可不可以放置皇后，有的童鞋可能想着所有方向都遍历一下，其实不用这么麻烦，因为我们是由上往下放置，所以只需要判断左上，上，右上的方向就可以啦。既然说到回溯，那肯定涉及到剪枝问题了，其实也不用做啥，当我们发现某一行无法放置任何皇后时，我们什么都不做，直接回溯到上一行即可。，不然不会有满足题目的解，所以可以把每一列当作一层，把皇后放置后再到下一层继续放置，基本代码如下。按照国际象棋的规则，皇后可以攻击与之处在同一行或同一列或同一斜线上的棋子。的棋子放置方案，该方案中。
2024-08-17 17:14:31
521
原创 leetcode算法题之接雨水
而x轴上每一块区域能承载多少雨水取决于它左边和右边的最大高度值以及它的自身高度，所以我们可以先维护两个数组leftMaxArr和rightMaxArr。知道了x轴上每一块区域的左右高度最大值后那这个子问题就很简单了，我们先定义一个子问题的结果数组result，那么公式可以这么写。最后将这个result数组的值加起来，就是本道题的结果了，当然，我们不需要使用到result数组，用一个变量维护即可，代码如下。的柱子的高度图，计算按此排列的柱子，下雨之后能接多少雨水。个非负整数表示每个宽度为。
2024-07-23 20:54:55
668
原创 源码解析之p-limit（限制异步任务并发数量）
p-limit是一个用于限制异步任务并发数量的javascript库，可以有效地管理资源并避免系统负载过高。源码实现其实也不复杂，主要使用了队列 + 变量来控制。
2024-05-28 22:17:01
633
原创 vue3 + vite 实现一个动态路由加载功能
它能通过我们提供的路径动态引入相关的组件，如果我们传入了../views/**/**.vue，它返回的相关格式是这样子，这样的话就可以用过路径获取相关异步导入组件的函数了。PS: 如果退出登录需要清除动态路由的话，因为现在vue-router没有提供可以直接清空的方法，所以可以考虑返回登录页后刷新一下界面来解决~最后在main.js里调用一下setupPermission方法就行~在vite里主要使用到的方法是。假设后端返回的格式是这样子。
2024-03-20 01:51:01
1176
原创 el-table出现cannot read property ‘key‘ of undefined
起因：线上项目突然反馈说有列表卡死的情况，紧急排查了一下，发现是返回了重复的列表id了，而且我们使用了rowKey属性，所以卡死了。这是后端迁移的数据，是正常的，所以得我们解决…解决方案：获取数据时我们手动给列表设置一个不重复的id// 假如table数据是data，页数是page，数量是limitdata.forEach(item => { item._id = `${item.id + (page * limit)}`})这样子就能保证每个id不重复并且翻页时id都能对得上了~
2022-01-23 22:00:55
2021
原创 2021-10-07 算法题学习01
1.给定一个整数数组，判断是否存在重复元素。如果存在一值在数组中出现至少两次，函数返回 true 。如果数组中每个元素都不相同，则返回 false 。解法1.ES6var containsDuplicate = function(nums) { return new Set(nums).size !== nums.length};2.哈希表（空间换时间）var containsDuplicate = function(nums) { const set = new Set()
2021-10-08 00:43:32
91
原创 2021-10-04 前端性能优化方法
文章目录前言1、GZIP1.1、使用步骤2、CDN2.1、使用步骤2.读入数据总结前言随着代码数量越来越多，如何加快项目浏览器中的运行速度，减少用户的等待时间便成为了很重要的一个方面，以下是我经过实践后的几个方法1、GZIPGZIP可以对文件进行压缩，压缩比例到3到10左右，是很实用的压缩方法1.1、使用步骤因为我们目前的项目比较老，使用的是vue-cli2.x的版本，所以只需要在vue-cli2的config.js文件中进行如下配置并安装compression-webpack-plugi.
2021-10-04 03:24:55
138
原创 vue+element+vue-cropper实现上传裁剪功能
在用户上传前在before-upload钩子获取files文件，然后中断上传操作beforeAvatarUpload (files) { this.filename = files.name this.openCropper(files) return false}然后在openCropper方法中用FileReader对读取文件并打开自己的cropper组件openCropper (file) { var _this = this var reader = new FileR
2021-03-10 10:11:54
717
2
原创 文本节点超过父元素 解决办法
当我们的文本节点内容是英文或者数字时，它默认是不会换行的，如下图有两种解决办法1.省略号三件套text-overflow: ellipsis;overflow: hidden;white-space: nowrap；2.css设置word-wrap： break-word这样就会在达到父元素的宽度后进行换行了！注:在网上看到有个break-all属性，但是chrome浏览器试过后并没有...
2020-09-24 14:57:58
599
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人