MOD.10 控件DOC-10-005AUTHOR · 陈拾一2025-08-30READ · 4 MIN

日期选择器的键盘操作

超数频控件受控模式懒加载

控件是交互的原子件，也是最轻易被小看的复杂度来源。一个按钮有多少种状态？项目组的答案是八种，少一种就是一类 bug。本文以受控模式为纲整理控件工程学。

SEC.01受控与边界

顺带记录一个细节：八态按钮全集：默认、悬停、按压、聚焦、加载、禁用、只读、错误。每个状态需要有视觉表达和测试用例，受控模式的任何一态缺失，都会在某个边角场景变成线上 bug。

最后再记一笔：视觉回归测试用像素快照：每个控件八态截图，PR 里自动比对。发布后受控模式的样式类回归缺陷拦截率 23%，设计师终于不用肉眼验收每一版了。

// CASE FILE · 实测档案

复盘：状态补全：按钮八态测试矩阵落地，按钮类缺陷 14→2/季。

边界处理是控件质量的分水岭：滑块到端点、步进器到极值、日期到月末，这些受控模式的角落场景团队全部写成表驱动测试，一条用例一个断言，新增控件照抄这个骨架。

顺带记录一个细节：控件的主题化靠 CSS 变量注入而非样式覆盖：懒加载的换肤做法如果依赖选择器优先级，就会在下一个版本被实现细节反噬。

开关控件的瞬态保护指中间态：请求未返回前开关锁定在过渡样式，不允许二次点击把状态翻转成未知。本组在这个懒加载上栽过跟头，修复后开关类缺陷归零。

另一个常被忽视的细节是：控件库的发布节奏固定为双周：需求攒着一起发，变更日志按破坏性分级标注。懒加载的下游团队据此安排升级，再没人被突袭式发版打断。

实施的第一步一贯是摸清现状：把懒加载的存量清点成一张表，标注归属、状态和风险等级。这张表在后续三周里被一线团队翻旧了，比任何文档都常用。

最后再记一笔：触控冗余全局统一：桌面最小 28px 高，触控最小 44px，同一控件用媒体查询切换尺寸档。懒加载的双档打法让一套代码同时过桌面评审和移动评审。

顺带记录一个细节：每个控件要有一页「何时不该用我」：日期范围用两个选择器还是面板、受控模式的选型边界写清楚，误用率下降后，定制需求也少了一半。

这里再补一笔：控件的可配置项要克制：每个 prop 都是长期负债，受控模式的配置面超过 20 个之后，测试矩阵爆炸，文档没人能读完。少即是多在这里成立。