今天想聊聊搞js模板网站时候踩过的坑，本来觉得套个模板分分钟搞定，结果光调样式就耗掉大半天。

先说说为啥要折腾这个

上周接了个企业官网的急单，客户非要三天内上线。我寻思直接拿现成模板改改算了，结果打开代码一看——好家伙，光是重复的导航栏代码就复制了十几处！改个联系电话都得全局搜索替换，差点把页面样式搞崩。

开始动手改造

第一个狠招是把重复内容抽成函数。我把导航栏和页脚打包成两个JS函数，比如这样：

• 写个renderHeader()函数塞进公共JS文件
• 在每个页面直接用*(renderHeader())调用
• 页脚同理，改联系方式只要动一次函数

第二个技巧是用数据对象集中管理内容。以前把公司地址、电话这些信息散落在各个角落，现在全扔进一个config对象里：

• 建个文件
• 里面放公司名称、LOGO路径、联系电话这些变量
• 所有页面统一引用这个配置文件

最省事的终极大法

后来发现有些页面结构复杂的项目，光靠JS函数还是手忙脚乱。干脆祭出简易模板引擎——用正则匹配占位符，把HTML模板里的{{title}}、{{content}}自动替换成真实数据。具体操作是这样的：

• 先写好带占位符的HTML模板文件
• 写个不到20行的replaceTemplate函数
• 运行时把用户数据灌进去直接生成最终页面

现在遇到模板类项目，我基本半小时就能搭出可维护的架子。客户临时要加个新页面，也不用满世界找代码复制粘贴了。最近还琢磨着把这三个方法打包成脚手架工具，下次分享再细说。