博客

我的写法，亲测靠谱 Vite 用了一年多，从最早搭内部工具、到上线三个中型业务项目（含 SSR 和微前端），踩的坑够写半本《前端运维事故录》了。不吹不黑，Vite 真快，但快得有点“脆”——配置一错，...

先看效果，再看代码 上周上线一个新功能，前端调用后端接口，本地跑得好好的，一上测试环境就 404 —— 不是接口不存在，而是 OPTIONS 请求直接被 Nginx 拦了，连后端的门都没摸到。抓包一看...

又踩坑了，touchmove滚动失效 今天上线前测手指滑动，发现列表在 iOS 上死活不滚动——touchstart 触发了，touchmove 也进了，但 scrollTop 死活不更新，手一松直接...

谁更灵活？谁更省事？Playwright 移动端测试方案实测对比 我最近在给一个 PWA 应用写 E2E 测试，目标很明确：覆盖 iOS 和 Android 的 WebView、Safari、Chro...

项目初期的技术选型 去年下半年接了个内部知识库系统，需求挺典型：支持富文本编辑、版本对比、协作评论、导出 PDF。一开始团队讨论用 Quill，毕竟文档多、插件熟；但第三天我就把 demo 删了——因...

先看效果，再看代码 上周上线一个移动端活动页，iOS用户反馈“按钮点不动”“滑动卡顿”，我连着两晚抓包、录屏、切设备调试，最后发现：不是 JS 逻辑错了，是 CSS 像素单位写错了——width: 1...

我的写法，亲测靠谱 TouchMove 这玩意儿，我用过不下十个项目，从轮播图、拖拽排序、滑动删除，到自研的简易手势库，基本都绕不开它。但每次写，我都会重新翻一遍 MDN，再对着 Chrome Dev...

先看效果，再看代码 我上周在重构一个内部项目的需求看板时，发现 Backlog 待办列表的交互体验太拉胯：拖拽排序不灵敏、状态切换没反馈、跨列移动后数据错位……折腾了两天，最后不是靠什么高大上的框架，...

谁更灵活？谁更省事？Scale缩放的三种实战方案对比 做可视化编辑器、图片标注工具、PDF预览页，甚至一个带缩放的地图组件——只要用户要“捏合放大”“滚轮缩放”，你就绕不开 Scale。我去年重构了两...

优化前：卡得不行 上周上线一个新功能，加了一堆调试日志——console.log、performance.mark、甚至自己封装了个简易 logger 上报错误上下文。结果用户一反馈：点开页面要等 5...

谁更灵活？谁更省事？ 最近给一个后台数据导出功能加并发控制，本来以为就几行 throttle/debounce 事情，结果翻车了三次——第一次用 setTimeout 手搓队列，导出中途点了五次按钮，...

API Key 被扫出来了，我连夜改了三遍配置 今天早上运维同学甩过来一条 Slack 消息：“你那个前端项目里，jztheme.com 的 API Key 在 Chrome DevTools 里明文...

先看效果，再看代码 上周上线一个新项目，上线第二天就发现 CSP 报告里一堆 script-src 违规记录——但页面明明没报错，用户也完全没感知。我打开 report-uri 后台一看，全是 eva...

我的写法，亲测靠谱 先说结论：我项目里现在基本不用全局 class 名了。不是因为 BEM 多高级，而是真被 .btn 和 .title 给坑麻了。 以前我写个按钮，随手就是： .btn { padd...

先看效果，再看代码 上周给团队搭内部文档站，选了 VuePress 2.x（不是 VuePress 1，别问，问就是 Vue 3 生态必须跟上）。我直接用 pnpm create vuepress@l...

我的写法，亲测靠谱 先说结论：我一般不用 keydown 做输入校验，也不在它里面直接改 input 的 value。这俩操作看起来顺手，但上线后必出问题——不是光标乱跳，就是中文输入法崩掉，或者回车...

语义化版本校验这玩意儿，真不是 npm version 一下就完事了 上周上线前打包 CI 报了个错：version not match semantic versioning spec。我第一反应是...

项目初期的技术选型 去年下半年接了个 SSO 改造项目，客户原有系统是三个子站：admin.jztheme.com、shop.jztheme.com、api.jztheme.com，全靠一套后端 Se...

优化前：卡得不行 上周上线一个内部管理后台的自动部署流程，CI/CD跑完后，前端资源要推到 CDN，再触发一次全量缓存刷新。结果每次部署完，运营同学点开页面第一反应是：「又崩了？」——其实没崩，就是白...

项目初期的技术选型 去年年底接手一个老项目重构，是给某市政务大厅做的自助终端系统——对，就是那种立在服务台旁边、带10.1寸触摸屏、跑Chrome kiosk模式的设备。需求看着挺简单：查办事指南、预...