博客

一个移动端项目的UI框架选择 最近接手了一个移动端H5项目，需要做一套完整的用户端界面。本来想用Vant，但产品经理说要那种比较简洁的设计风格，Vant的组件太重了，看起来有点复杂。看了几个UI框架后...

Remix vs Next.js：这次我真的选对了吗？ 最近项目重构，纠结了好久到底用Remix还是Next.js。之前一直听说Remix很牛逼，数据获取方式颠覆传统，但团队熟悉Next.js，学习成...

一个Button组件，折腾了我整整一天 昨天下午接到一个需求，要给后台管理系统加个新的Button组件，看起来很简单对吧？结果从下午2点一直搞到晚上9点才搞定，期间各种诡异问题。 最开始我以为就是个普...

优化前：卡得不行 最近重构了一个离线应用的数据存储模块，用的是WebSQL。说实话，刚开始没太在意性能问题，就是普通的CRUD操作。结果测试的时候发现，批量插入1000条数据要花5秒多，查询个复杂点的...

项目初期的技术选型 最近接手了一个老项目，团队里新来了几个实习生，代码风格五花八门。有些喜欢分号，有些讨厌分号；有些人缩进用2个空格，有些人用4个空格；还有人居然混用了空格和Tab。每次Code Re...

先说说我为什么写这篇文章 最近做项目又遇到分页组件了，说实话，这玩意儿看起来简单，但真要做得用户友好还是有不少坑的。之前我都是直接拿现成的UI库里的分页，但这次产品提了一些特殊需求，比如需要显示当前页...

一个电商项目的真实性能优化记录 最近做了一个电商项目的前端重构，说实话，开始没想到会遇到这么多性能问题。项目原本是个老系统，用户量上来之后各种卡顿，尤其是商品列表页和搜索页面，用户体验差得不行。老板催...

优化前：CI流水线慢得要命 最近把项目迁移到新的CI/CD流程，结果发现构建时间从原来的3分钟拖到了快8分钟，每次提交代码都得等半天，简直要命。最恶心的是测试阶段，光跑单元测试就要花4分多钟，感觉整个...

一行代码搞定复制功能 之前做项目的时候，有个需求是要让用户点击按钮就能复制一段文本。以前都是用第三方库比如 clipboard.js，但最近发现浏览器原生的 Clipboard API 其实挺好用的，...

项目初期的技术选型 最近接手了一个电商项目的重构，主要是商品列表页和详情页的优化。页面上有个问题特别明显：一次性加载几百张图片，用户打开页面就是白屏，有时候要等个十几秒才能看到内容。老板看不下去了，让...

Watch监听的基本用法，别再写一堆if-else了 最近重构一个项目，发现之前的代码里全是这种东西： // 老代码，每次数据变化都这么判断 function handleDataChange(new...

Canvas橡皮擦又把我整懵了 前两天搞个在线画板功能，本来以为橡皮擦就是个简单的事儿，结果被折磨得够呛。一开始想着用globalCompositeOperation搞个source-atop，结果发...

我的写法，亲测靠谱 快捷键提示这玩意儿，看起来简单，实际上坑不少。我一般这样处理：先搞个全局的键盘事件监听，然后把所有快捷键配置集中管理，最后用一个轻量级的UI组件来显示提示。 先看核心代码： // ...

这次Kbone真把我搞吐血了 最近项目里用Kbone做一个小程序转H5的需求，本以为就是个普通的跨端框架，结果各种奇怪的问题层出不穷。最主要的是touch相关事件完全不灵了，在小程序里好好的，在H5环...

一个数据大屏项目的意外需求 最近做的那个数据大屏项目，本来以为就是常规的数据展示，结果产品突然提了个需求：要在大屏幕上显示一些关键的统计数据，比如实时用户数、交易金额、订单量这些，而且要求要有动画效果...

核心加密方案，直接上手就能用 最近项目里需要对接第三方API，对方要求所有请求都得加密传输。说实话，这块技术之前接触不多，但真搞起来其实也就那回事。今天把整个流程记录下来，主要针对实际应用场景。 我用...

TouchEnd事件处理的那些坑 昨天遇到一个奇怪的问题，移动端的点击效果怎么都触发不了，折腾了半天发现原来是touchend事件被preventDefault给阻止了。这里我把整个踩坑过程记录一下，...

项目初期的技术选型 最近做的一个企业级项目，安全要求特别高，客户那边专门提了各种安全检测工具的需求。说实在的，刚开始我还挺抵触的，觉得这些安全工具就是给开发增加负担，但后来发现确实有必要。 项目是个内...

JavaScript数组shift方法的核心用法 最近项目里频繁用到数组的shift方法，虽然看似简单，但用起来还是有些门道的。直接看代码吧： shift()方法会移除数组的第一个元素，并返回该元素的...

先来个完整的Demo跑起来 别整那些虚的，直接看代码跑起来什么效果。Library模式就是把你的代码打包成一个可以直接引用的库文件，比如jQuery那种，在script标签里引入就能用了。 // we...