后台拿到一批数据，要渲染成列表、表格、卡片，如果直接在代码里用字符串拼 HTML，短一点还行，稍微复杂一点就又长又乱，改一个地方要翻半天。模板引擎解决的就是这件事，先把页面结构写成模板，运行时再把数据填进去，逻辑和结构分开，改起来清楚得多。这次整理了 4 款开源免费、可商用的 JavaScript 模板引擎，前端和 Node 端都能用。
四款库分别适合谁
Handlebars 语法接近 HTML，用双花括号插入变量，支持条件判断、循环、自定义辅助函数和模板片段复用，还支持预编译，性能稳定，是国内用得最广的一款。Mustache 走极简路线，只做变量替换和循环，模板里不写逻辑，体积小、上手快，很多库还拿它当底层模板用。EJS 可以直接在模板里写 JavaScript，循环判断函数调用随便写，写起来顺手，Node 端渲染页面很常见。doT 主打性能，编译快、渲染开销小，适合模板量大、对速度敏感的场景。
为什么值得用模板
最直接的好处是数据和结构分开。以前数据一变就要在拼接代码里到处找，现在模板摆在那里，结构一眼看得明白，改文案、调布局都不会碰到业务逻辑。另外模板写出来是纯文本，谁都能改，不用非得懂前端，运营要调个字段位置也能自己动手。还有一点是安全性，自己拼字符串很容易漏掉转义、把用户输入直接插进页面，成熟的模板引擎默认就处理了转义，能避免不少问题。
怎么选和怎么用
四个目录都很独立，用 script 标签引入即可，同时也能在 Node 环境里用模块方式引入。选型看场景：要功能全面、语法友好就用 Handlebars，只要简单填数据就用 Mustache，习惯在模板里写 JS 逻辑就用 EJS，追求性能就用 doT。要提醒一句，如果模板内容来自用户输入，务必别用「不转义」的写法，否则会留下注入风险。包内每个目录都放了压缩版和非压缩版，还有基础用法说明和许可文件。
包内容和用法
压缩包里按库名分成了四个目录，每个目录里放了压缩版和带注释的非压缩版两种文件，正式项目引 min 版，调试的时候看非压缩版。四款库互相独立、不依赖任何框架，可以单独使用，也可以混用，比如主模板用 Handlebars，某块小内容用 Mustache 嵌进去。每个目录都附带了说明文档和许可文件，写了基础语法和常用用法，拿到手照着改就行。
模板引擎看着朴素，但它是很多项目里反复用得到的基础件，尤其做后台管理、邮件模板、静态页面生成这些活，用和不用差别很大。选的时候别只看功能多不多，先想清楚模板由谁写、要多少逻辑，逻辑越少越简单，长期维护越轻松。这四款加起来一百多 K，按需引入几乎不占体积，全部可免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端开发常用的组件和工具合集，需要的可以先收藏。
暂无评论内容