- 博客(25)
- 收藏
- 关注
RSS订阅
原创 ⚡ 一个Vue自定义指令搞定丝滑拖拽列表，告别复杂组件封装
告别臃肿的第三方库！只需几百行简洁代码，就能让你的列表拥有丝滑流畅的拖拽体验，像被施了“魔法手指”一样灵动。无需担心体积臃肿或依赖过多，轻松实现自定义，开发体验和用户体验都能大大提升！
2025-06-17 14:15:00
6400
5
原创 断网、弱网、关页都不怕：前端日志上报怎么做到不丢包
在前三篇文章中，我们搞定了性能、行为和错误的采集。但很多掘友在评论区灵魂发问：**“数据是抓到了，发不出去有啥用？进电梯断网了咋办？页面关太快请求被掐了咋办？....
2026-01-19 18:35:11
715
原创 产品催： 1 天优化 Vue 官网 SEO？我用这个插件半天搞定（不重构 Nuxt）
上周四早上刚坐下，还没来得及摸鱼，产品就紧急拉了个会，说为了搞流量，咱们官网得做 SEO 优化。然后直接甩了一份市场部出的 SEO 规范文档到群里......
2026-01-16 19:18:55
890
原创 老王请假、客户开喷、我救火：一场递归树的性能突围战
上周，负责核心业务组件的同事老王突然请假（据说去相亲了），留下一堆代码和风中凌乱的我。结果前脚刚走，后脚核心客户就炸锅了：“你们这个系统怎么回事？我每次要给员工赋个权，浏览器就直接卡死！打开弹窗挺快，一点开部门就未响应，关掉弹窗还要卡半天！看着客户发来的十几秒卡顿录屏，和老板投来的“和善”目光，我只能硬着头皮接下了这个“锅”。本文记录了我是如何从吐槽同事代码，到深度排查，最终通过深度优化解决这个递归组件性能灾难的全过程。省流版现象：展开树卡 10s+，关闭弹窗再卡 5s根因。
2025-12-31 15:38:45
1021
原创 【用户行为监控】别只做工具人了！手把手带你写一个前端埋点统计SDK
别瞎猜用户操作了！今天手把手带你造个“用户行为SDK”。搞定 SPA 路由劫持、页面关闭数据上报这些硬骨头。不仅教核心代码，连 Rollup 打包和 NPM 发布都包教会...
2025-12-18 15:10:23
945
原创 【错误监控】别只做工具人了！手把手带你写一个前端错误监控 SDK
你是否一直对前端错误监控系统的底层原理充满好奇？别做工具人了，从原理到落地，手把手带你实现一个轻量级前端错误监控SDK...
2025-12-08 14:16:55
1202
原创 WebTab等插件出事后：不到100行代码，带你做一个干净透明的新标签页
插件别乱装，权限太猛容易“偷家”。不如自己做新标签页：只开必要权限、不走外网、数据都在本地；不到百行代码，一眼能审、好改好控。本质就是“一个网页+一份清单”，干净透明省心，把隐私钥匙握在自己手里。
2025-12-08 14:10:23
627
原创 不仅免费，还开源？这个 AI Mock 神器我必须曝光它
零侵入AI Mock 插件：侧边栏常驻，刷新不丢规则；AI 一键生成结构化数据，延时与状态码随点随测。前端不等后端，随时造数把页面跑起来，联调与演示更高效、更稳。
2025-12-03 15:04:27
1123
原创 女朋友又给我出难题了：解锁网页禁用复制 + 一键提取图片文字
女朋友做广告策划，每天要从海量网站和素材中摘抄文案。微信或飞书截图都有 OCR，但她总要“切微信/飞书 → 识别 → 复制 → 切回浏览器”，来回折腾好麻烦，经常被打断思路....
2025-11-25 13:45:26
774
原创 大部分人都错了！这才是chrome插件多脚本通信的正确姿势
昨天一个实习生同事来找我：“哥们，我的Chrome插件遇到个奇怪问题，为什么我插入到页面的内容脚本content.js，重写页面脚本的方法没有生效？”其实类似的问题我也经常碰到，比如：“为什么popup页面调用不了content.js的函数？”、“插入到页面的内容脚本为啥访问不到Vue实例？”、“background脚本为啥不能访问页面的dom节点”?………这些问题在插件开发里真的挺常见的，大家都容易踩坑。
2025-11-21 10:25:55
757
原创 【前端效率工具】：告别右键另存，不到 50 行代码一键批量下载网页图片
前端还原页面你肯定干过吧？像仿 xxx 首页那种。收素材时最烦的就是一张张存图，慢不说还老漏，跟我用 10 分钟做个小工具，点一下，整页图片全下到本地
2025-10-11 14:57:42
413
原创 别再无脑装插件了！你的浏览器扩展可能正在“偷家”
过去很长一段时间，我几乎什么浏览器插件都敢装：调试、翻译、抓包、下载、效率提升……直到我拆了一款热门“资源整理”类扩展的代码，才真正意识到：很多扩展拥有的权限，几乎等同于在你的浏览器里放了一个“贴.....
2025-09-25 16:19:18
1060
原创 老板催：官网打不开！我用这套流程 6 分钟搞
老板突然在群里说：官网怎么打不开了，连发 5 个问号 ？？？？？以前的我：刷新、清缓存、靠感觉瞎猜“是不是服务器挂了”。现在的我：按“三步七查法”逐步排查，6分钟精准锁定：问题出在本地DNS。
2025-09-21 18:29:14
1631
原创 Vue3 后台分页写腻了？我用 1 个 Hook 删掉 90% 重复代码（附源码）
开发效率高，减少90%的重复代码，新增列表页从 30 分钟缩短到 5 分钟状态管理完善，自动处理加载、错误、数据状态缓存机制，避免重复请求错误处理统一，用户体验一致易于扩展，支持自定义配置和回调。
2025-09-14 10:47:42
468
原创 同事以为要重写，我用 8 行代码让 Vue3 跑起已打包的 Vue2 组件
最近遇到一个非常典型的前端兼容问题：产品要求将官网底部 footer 组件统一成公司平台的公共组件。查阅对接文档后发现，这个公共组件库是基于 **Vue 2** 开发的，而我们的项目已经升级到 **Vue 3**。
2025-09-11 15:22:15
921
原创 还在手动打包Chrome插件？这个Vue CLI让你10秒搞定
3秒建项目，10秒出包，配置什么的统统不用管。chrome插件开发的噩梦，你经历过几个?...
2025-09-01 11:41:39
641
原创 “前端单元测试的救星：Vitest 输入和 Mock 技术详解
单元测试总是“翻车”？别慌！Vitest 来帮你稳住局面。本文用最接地气的方式，带你搞懂输入和 Mock 的那些门道，让测试不再脆弱，代码不再“诈尸”。前端小伙伴，快来解锁让测试稳如老狗的秘诀吧！
2025-06-24 13:43:02
919
原创 前端测试神器：Vitest 框架核心用法与实用技巧全解
Vitest 就像前端测试界的“闪电侠”，写法像 Jest，跑得比谁都快。API 简单，功能强大，测试代码结构清晰，团队用起来不打架。配合 Vite，效率翻倍，写测试像吃瓜一样轻松。学会它，测试再也不是“拦路虎”，而是你的得力小助手！
2025-06-23 17:12:21
855
原创 Vitest 异步测试实战：驯服 Promise 和 setTimeout 这两只野兽
Promise 测试三字经：- async 标记不能忘- await 等待要用上- flushPromises 清空忙Promise这只狡猾的狐狸，喜欢躲在微任务队列里偷偷执行setTimeout这只懒惰的熊，总是要睡一觉才干活掌握了 Vitest 的这些技巧，你就是异步测试界的驯兽师！测试不是为了证明代码没有 bug而是为了在 bug 搞砸生产环境之前抓住它们！🐛好的测试就像保险，你希望永远用不到，但没有它你会睡不着觉😴愿你的测试永远绿色，愿你的异步代码永远可控！💚P.S.
2025-06-22 17:30:11
742
原创 前端图片组件崩溃、乱序、加载失败？一套队列机制+多级兜底全搞定
你是否遇到过头像组件加载慢、频繁切换联系人时头像显示错乱的尴尬？本篇带你拆解一个“稳如老狗”的头像组件，核心亮点就在于——用队列串行机制，优雅消灭异步竞态问题，让多级兜底始终有序、永不穿越！
2025-06-20 18:56:50
493
原创 别再乱用will-change了！前端翻车的“性能优化“陷阱
你是不是也觉得 will-change 是性能优化的“神器”？小心被它反噬哦！本文带你揭秘 will-change 这把“双刃剑”，看看它是怎么让无数前端“翻车”的。别再迷信万能优化
2025-06-19 10:35:45
891
原创 其实vue3中的nextTick原理很简单
在vue中，当我们需要操作dom时，那就需要在dom挂载之后才能去操作，通常我们只要使用nextTick，在nextTick的回调中必定可以拿到挂载后的dom，vue内部是如何做的呢？ 要了解这个原理
2025-06-18 16:48:40
910
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人