改一次全站生效——导航组件化实战

一段重复的代码出现在十六个页面里，它就是十六个等着出错的地方。把它收进一个文件，改一次，全站同步。

我不写代码，但我盯交付。早期站点有十六个子页面，每个页面顶部都贴着一段几乎一样的导航：商品分类下拉、教程下拉、搜索框、语言切换、汉堡全屏菜单。导航要加一个入口、改一个链接、修一个手机端点不开的 bug，理论上要把同一处改动复制十六遍。这篇讲的就是怎么把这件事从「改十七次」收敛成「改一次」。

真实场景：导航少一个入口

要在导航里加一个「下单流程」入口。两种走法,结果天差地别。

	第一反应（逐页改）	正确动作（组件化）
改动范围	打开 16 个 HTML，逐个粘贴	改 1 个 nav-component.js
出错概率	每页一次手工操作，漏改、贴错位、缩进乱	单点改动，全站一致
验证成本	16 个页面逐一肉眼比对	一条命令批量核对 16 页
三个月后再改	又来一遍 16 次	还是改 1 次

逐页改最大的坑不是慢，是不一致。改到第九页累了,漏了一个;某页缩进多了一格,样式错位。十六份拷贝迟早漂移成十六个版本,谁也说不清哪个才是对的。

为什么会这样：重复即债务

根因是导航 HTML 被物理复制进了每个页面。复制那一刻就埋下了债务,只是利息以后才付。

现象	直接原因	根本原因
改导航要动 16 个文件	16 份导航代码各自独立	没有单一数据源（single source of truth）
各页导航悄悄不一致	历次改动有的页漏改	复制粘贴无法保证同步
手机端 bug 修不干净	某些页用的是旧拷贝	旧文件覆盖了新修复

因果链很清楚：复制 → 多份拷贝 → 每次改动都要遍历全部 → 必然漏改 → 版本漂移 → 越改越乱。组件化就是在源头掐断这条链：导航只存一份，所有页面运行时去引它。

落地方式是建一个 nav-component.js，里面装完整的导航结构（图标雪碧图、导航条、全屏菜单）和交互逻辑（下拉、汉堡菜单、移动端 touchend）。每个页面只留一个空容器 <div id="site-nav"></div>，脚本在加载时把导航注入进去。十六个页面引同一个文件，导航天然一致。

你该怎么做

1. 找出重复块。扫一遍页面,把每页都有、内容几乎一样的部分（导航、页脚、客服浮窗）圈出来——这些是组件化的首选。
2. 抽成一个文件。把这段 HTML 和它的交互逻辑搬进一个独立组件文件，让它运行时注入页面里的占位容器。
3. 页面只留占位符。每个页面删掉原来那段重复代码，换成一个空容器和一行引用脚本。
4. 改完先备份再动手。批量替换前给每个文件留一份备份，出问题能秒回滚。
5. 用命令批量验证,别靠肉眼。改完用一条命令核对全部页面：每页都返回正常、都含新组件、旧代码已清零。
6. 下次只改源头。导航再要改，只动那一个组件文件。十六个页面自动跟上。

---

我不写代码,但我懂一件事：重复的东西越多,系统越脆。把它收成一份,改一次全站生效,这是我让一群 AI 帮我管十几个站点时反复用到的笨办法。想看更多这样的真实拆解,工具站在 wutuobangai.com;想从零跟着做一遍,16 周陪跑课在 forms.wutuobangai.com。