深耕组件化开发实践,分享组件设计、封装复用与组件库搭建技巧,构建高可用、易维护的组件体系。
-
优化前:卡得不行 我们项目里有个「消息中心」页,顶部是用户头像+未读消息徽章(Badge),右上角还有个「购物车」徽章,底部 TabBar 上还堆了 4 个带数字的 Badge。本来以为就几个小红点,...
-
我的写法,亲测靠谱 表单联动这事,我前后在三个中后台项目里反复折腾过:CRM的客户信息页、电商后台的SKU配置、还有个政府系统的多级审批表单。一开始我也用过各种“高大上”的方案——watch + co...
-
谁更灵活?谁更省事?Scale缩放的三种实战方案对比 做可视化编辑器、图片标注工具、PDF预览页,甚至一个带缩放的地图组件——只要用户要“捏合放大”“滚轮缩放”,你就绕不开 Scale。我去年重构了两...
-
谁更灵活?谁更省事? 分页组件这玩意儿,看起来简单,写起来真能让你半夜改完第三版还发现“上一页”在第一页时居然没禁用。我做过不下二十个带分页的项目,从纯静态表格到实时搜索+无限滚动混合场景,踩过的坑足...
-
Audio.play() 在 iOS 上静音失效?别急,先关掉“静音开关” 今天上线前测音频组件,发现一个离谱问题:在 iPhone Safari 里点播放按钮,audio.play() 调用成功、没...
-
谁更灵活?谁更省事? 上周又接到个需求:在富文本编辑器里加 Mention 功能,@用户后自动高亮、带下拉建议、支持回车/Tab 选中、还能嵌套在 textarea 或 contenteditable...
-
我的写法,亲测靠谱 Treemap 我用过三回,两回在数据看板项目里,一次在内部监控系统。第一次是照着 D3 官方例子抄的,结果上线后用户一缩放浏览器,颜色块全乱了;第二次改用 ECharts,但发现...
-
优化前:卡得不行 项目上线前压测,客户现场反馈:“拖个列表,手指都抬起来了,item还在半路飘着”。我本地一试——50条数据,Chrome DevTools 里 FPS 直接掉到 8fps,touch...
-
又踩坑了,Select下拉菜单在iOS上点不中 今天上线前测到一个诡异问题:我们自研的 Select 组件,在 iOS Safari 里点开下拉后,选项列表明明渲染出来了,但点任何一项都没反应——既不...
-
谁更灵活?谁更省事? 我做响应式组件快六年了,从最早手写媒体查询+JS监听 resize,到后来用 Bootstrap 栅格、Tailwind 的断点类,再到最近几个项目里试水 CSS Contain...
-
我的写法,亲测靠谱 Props 设计这事,我干了快六年,从 Vue 2 到 Vue 3,再到 React 18 + TS,踩过的坑比组件还多。最开始我真以为 props 就是“传个值”,结果上线后被产...
-
又踩坑了,Table里嵌套滚动区域 touchmove 失效 今天上线前测到一个诡异问题:Table组件里某列渲染了一个自定义的「标签选择器」,里面用了横向滚动容器(overflow-x: auto)...
-
谁更灵活?谁更省事? 历史记录这个功能,说小不小,说大不大。做后台系统、表单编辑器、可视化搭建工具时几乎绕不开——用户点错了、填错了、删错了,总得有个「撤回」按钮吧?我去年在做一个低代码画布组件时,光...
-
我的写法,亲测靠谱 主题定制这事,我干过不下七八个项目,从纯 CSS 变量切换,到运行时 JS 注入样式,再到 Webpack 构建时多主题打包——最后发现,最稳、最易维护、最不容易半夜被 QA 打电...
-
我的写法,亲测靠谱 VR/AR 在前端里真不是炫技玩具——去年我接手一个房产展厅项目,客户要求用 WebXR 做轻量级样板间漫游,不装 App、不扫码、点开即进。结果上线前一周,iOS Safari ...
-
项目初期的技术选型 去年做的一个教育类小程序(H5版),要支持课件页的自由缩放——不是简单的图片放大,而是整个内容容器(含文字、SVG图表、可点击按钮)跟着一起 scale。客户提的需求很直接:“像 ...
-
优化前:卡得不行 上个月上线一个后台管理平台,里面用了自己封装的 Message 组件——就是那种调用一下 Message.success('操作成功') 就弹个提示框的东西。本来以为这种小玩意儿能有...
-
优化前:卡得不行 上周上线一个新后台,菜单用了 React + Ant Design 的 Sider + Menu,数据量不大——就 80 条左右的菜单项,分了 4 层嵌套。结果一打开左侧菜单,Chr...
-
我的写法,亲测靠谱 Swipe 轮播我用过不下十个项目,从最早的手写 touch 事件,到后来引入 Swipe.js(那个只有几百行的轻量库),再到最近几个项目直接用 CSS scroll-snap ...
-
我的写法,亲测靠谱 Form校验这事,我干了快六年,从jQuery.validate手写正则开始,到Ant Design、Element Plus的内置规则,再到自己封装hooks——踩过的坑比填过的...