写页面最费时间的不是写第一版，是改第二十版。同一个页面结构，在首页写一遍、分类页写一遍、详情页再写一遍，改个样式要改三处，漏一处就出现不一致。模板复用解决的就是这个问题：把重复的结构抽出来，只写一次，各处引用。说起来简单，做起来容易走偏，要么抽得太碎到处都是碎片，要么抽得太粗改一处影响全站。
先分清模板和组件
两个概念容易混。模板是整页的骨架，决定这一页由哪几块组成、怎么排列；组件是页面上的一块具体内容，比如一个卡片、一个分页条、一个侧边栏。
举个例子，文章详情页是模板，它包含标题区、正文区、相关推荐、评论区这几个组件。分类列表页也是模板，包含筛选条、列表、分页三个组件。两个模板都用到分页条，那就把分页条做成组件，两处引用。
分清这两层的好处是改动有边界。改页面结构动模板，改某一块的样式动组件，互不干扰。
目录怎么放
按用途分目录，别按文件类型分。推荐的结构是这样：模板目录下按页面类型分子目录，比如 index、list、detail、user；组件目录单独一个，所有可复用的块放一起；布局目录放通用的头部、底部、侧边栏。
命名要能一眼看懂。article-card 比 c1 好，comment-list 比 box2 好。文件名的语言统一，别一半中文一半英文，也别一半横线一半下划线，看着乱还容易引用错。
还有一条：组件的文件名和它输出的内容要对得上。叫 pagination 的组件只做分页，别顺手把筛选也塞进去。一个组件做两件事，下次想单独用其中一件就没办法了。
变量和配置必须抽出来
模板里最忌讳硬编码。站点名、域名、每页显示多少条、图片尺寸，这些都应该来自配置，不该写死在模板里。
做法是建一个配置文件，所有可能变的东西都放进去。模板里只引用变量名，不写具体值。换域名的时候改一个地方，全站生效；调整每页条数也改一处。
还有一类是循环里的临时变量。列表渲染的时候，当前项的标题、链接、时间，通过参数传进组件，不要组件自己去查数据库。组件只负责展示，不负责取数，这样组件才能被不同场景复用。
复用的边界：别过度抽象
抽取得太狠，会得到一堆“万能组件”，参数十几个，用起来比不抽还麻烦。判断标准很简单：同一个结构被用在三处以上，才值得抽。只用在两处，而且未来可能分叉，就各写各的。
还有几种不建议复用的情况。一是两个页面的结构看着像但语义完全不同，硬合并之后，改一个需求另一个就受影响。二是一次性的页面，比如活动页，用完就撤，没必要为了复用增加复杂度。三是差异超过三成的部分，硬抽出来会变成一堆 if 判断，不如分开写。
经验是宁可多写一点重复代码，也别造一个自己都看不懂的抽象。重复代码改起来费点时间，烂抽象会拖垮整个项目。
版本和改动管理
模板和组件改动影响面大，必须有版本管理。用 git 管理整个代码目录，每次改动一次提交，提交信息写清楚改了什么、为什么改。
改动流程建议这样：先在本地改，跑一遍受影响的页面；再传到测试环境，确认所有引用这个组件的地方都正常；最后上生产。跳过中间一步，经常会出现在某个不常访问的页面样式崩了。
组件的改动最好带一个清单，列出所有引用它的位置。改之前先看清单，心里有数。这份清单不用很精确，靠全局搜索文件名也能得到，但形成习惯之后，改动的谨慎程度完全不一样。
和样式类的配合
模板和样式最好分开管。模板只负责结构和内容占位，颜色、字号、间距全放公共样式文件。好处是换肤或者调视觉只动 CSS，不动模板，风险小得多。
样式文件也要分：基础样式（重置、字体、颜色变量）一个文件，组件样式一个文件，页面特有的样式单独放。别把所有东西塞进一个几千行的样式表，改一行要找半天。
用现成框架的话，别直接在框架文件里改。新建一个自定义样式文件覆盖上去，升级框架时不冲突。
测试复用效果的办法
改完必须验证，不然容易搞坏别处。三个办法。一是列出所有引用这个组件或者模板的页面，逐个打开看一遍，页面不多的话半小时能完成。二是写个简单脚本，把关键页面地址列出来，批量请求一遍看返回码和页面里的关键元素。三是走核心流程：首页到列表页到详情页，每一步都看。
最容易漏的是访问量低但重要的页面：关于页、申请页、错误页、搜索结果页。这些平时没人看，改坏了要等用户投诉才发现。
小步优化：先抽最痛的那个
不建议一次性重构全站。挑最痛的地方先改：改一次要动三处的、最容易出不一致的、最近三个月改过三次以上的。把这些抽出来，立刻能感受到收益，也有动力继续。
每抽一个，验证一轮，稳定了再抽下一个。全站重构听着痛快，中途出问题的时候，你分不清是哪一步引入的。
模板复用不是架构上的炫技，是为了少改几处、少出几次错。判断标准只有一个：抽完之后，改一个需求是不是更快了。更快就继续，更慢就退回去。
