前阵子同时接到两个老客户改联系方式的需求。第一个站，找到页脚组件改了一处，全站生效，十分钟收工。第二个站，电话号码散落在十一个页面里，逐页翻找逐页替换，还漏了一个产品详情页被客户打电话指出来。网页前端开发里组件化做得好不好，平时看不出来，一到改版就见真章。
组件化到底指什么
说白了就是把页面拆成可复用的零件。页头、页脚、产品卡片、询盘按钮、表单，这些在网站里反复出现的东西，做成一个独立的部件，哪个页面要用就引用哪个。好处是改一处、全站生效，样式统一，新页面拼装速度也快。一个产品卡片组件，列表页用、首页用、搜索结果页也用，逻辑只维护一份。
反面的做法是每个页面各写各的，复制粘贴式开发。短期看不出问题，半年后各个页面的按钮颜色已经悄悄长得不一样了，客户自己都发现首页的蓝色和产品页对不上。这种细节上的散架，多数源于没有组件化的代码结构。判断一个团队有没有组件化意识，还有个软指标：报价时他会不会主动提组件清单和复用方案，满口都是页面数量的，多半还是逐页手写的思路。
怎么判断交付的代码有没有组件化
验收时可以试试这三个土办法：
- 让开发方当场演示改一次页脚版权信息，看是不是一处改动全站生效；
- 看项目目录结构，有没有components、样式变量这类分层，还是几十个平铺的页面文件；
- 翻两个不同页面的源码，同样的模块代码长得一模一样还是各写各的。
有位做五金出口的客户吃过亏，第一个服务商的代码全是复制的，第二次改版报价单里光改版式就排了六个人天。换团队重做时新服务商按组件化搭了骨架，次年改版两天搞定，费用不到前一次的三分之一。
组件化也有边界
别走到另一个极端。三五页的小站硬拆出二十个组件，反而增加理解成本；变化频率很低的独立页面，整页写也没毛病。组件化的对象是重复出现的东西，重复三次以上的才值得抽，一次性的页面模块不必过度设计。网页前端开发的架构判断，说到底是判断重复度和变化频率。
两条建议：新站签约时把组件化要求写进技术条款，验收时按上面的土办法当场演示；老站改版前先让技术方评估现有代码结构，结构烂的站点，重构比硬改更省钱。比格网络交付的项目都会附一份组件清单，客户以后自己加页面也能拼着用。
