模板引擎通过解析、编译和执行三阶段将模板字符串转为可执行函数，利用new Function实现高效渲染，并通过预编译优化性能，同时兼顾安全与灵活性。
JavaScript模板引擎的核心在于将字符串形式的模板转换为可执行的函数，从而高效生成HTML或其他文本内容。理解其编译原理与预编译优化机制，有助于提升前端性能和开发体验。
模板引擎的基本工作流程
模板引擎通常包含三个阶段：解析（Parse）、编译（Compile）和执行（Execute）。
- 解析阶段：将模板字符串拆分为语法单元（tokens），识别变量插值、条件语句、循环结构等语法元素。
- 编译阶段：将 tokens 转换为 JavaScript 函数字符串，利用 new Function 构造可执行函数。
- 执行阶段：传入数据对象，调用编译后的函数生成最终字符串结果。
例如一个简单模板：
{{name}} 欢迎你！
会被编译成类似这样的函数：
立即学习“Java免费学习笔记（深入）”；
function(data) {
return data.name + " 欢迎你！";
}
编译原理：从字符串到函数
核心是通过字符串拼接构造合法的 JS 代码，再使用 new Function 实例化。
- 遍历模板字符串，识别 {{ }} 或自定义分隔符包裹的表达式。
- 将静态文本转为字符串常量，动态部分转为对象属性访问。
- 最终拼接成一个返回完整 HTML 的函数体。
关键代码示意：
function compile(template) {
const code = "'use strict'; return `" + template.replace(/{{(.*?)}}/g, "${data.$1}") + "`;";
return new Function('data', code);
}
这样生成的函数可以直接传入数据执行，速度远快于运行时反复解析字符串。
预编译优化：提升运行时性能
在构建阶段提前完成模板编译，能显著减少客户端计算负担。
- 构建时编译：借助 Webpack、Vite 等工具，在打包过程中将 .tpl 或 .html 模板文件转为 JS 模块。
- 缓存编译结果：对同一模板多次渲染时，避免重复解析与编译，直接复用函数实例。
- 语法树优化：分析表达式复杂度，简化逻辑判断或内联常量，减少运行时开销。
比如 Handlebars 提供预编译工具，将模板转为轻量级 JS 函数，浏览器只需加载并执行，无需包含整个编译器。
安全与性能的权衡
模板引擎需防范 XSS 风险，同时保持高性能。
- 默认开启 HTML 转义，防止恶意脚本注入。
- 提供原始输出语法（如 {{{raw}}} 或 {{!unescaped}}）供信任内容使用。
- 限制允许执行的表达式类型，避免复杂 JS 逻辑嵌入模板。
合理设计沙箱环境，确保模板中只能访问传入的数据上下文，不泄露全局作用域。
基本上就这些。掌握模板如何被转化为函数，以及如何在构建期做预处理，就能更好地选择或设计适合项目的模板方案。
