JavaScript代码生成_模板引擎编译原理

模板引擎通过解析模板字符串生成JavaScript函数实现渲染，首先将模板拆解为tokens，如文本、变量、逻辑指令等；然后根据tokens拼接出可执行的函数体字符串，利用new Function动态创建渲染函数，结合数据对象输出HTML；过程中需处理变量作用域、转义以防止XSS，核心流程为：解析→代码生成→函数构造→数据绑定渲染。

模板引擎的核心目标是将模板字符串和数据结合，生成最终的 HTML 或文本内容。实现这一过程的关键步骤是“编译”——把模板转换成可执行的 JavaScript 函数。下面以一个简化版的模板引擎为例，说明其编译原理和代码生成过程。

模板解析：将字符串拆解为语法结构

模板通常包含普通文本和变量插值（如 {{name}}）或逻辑语句（如 {{if user}}）。编译的第一步是通过正则表达式或词法分析器将模板字符串分解为标记（tokens）。

例如，模板：

{{each users as user}}
  
• {{user.name}}

{{/each}}

会被解析成如下 tokens 数组：

• { type: 'text', value: '
  ' }
• { type: 'each', variable: 'users', alias: 'user' }
• { type: 'text', value: '
• ' }
• { type: 'variable', value: 'user.name' }
• { type: 'text', value: '
' }
• { type: 'endEach' }
• { type: 'text', value: '

' }

生成 JavaScript 代码字符串

根据解析出的 tokens，逐步拼接出一段合法的 JavaScript 函数体字符串。这个函数接收一个数据对象作为参数，返回渲染后的字符串。

核心思路是使用一个局部变量（如 __html）来拼接结果，通过字符串累加或数组 push 后 join 的方式构建输出。

上面模板可能生成如下函数体：

var __html = "";
__html += "

";
if (users && users.length) {
  for (var i = 0; i     var user = users[i];
    __html += "
• " + (user.name) + "
";
  }
}
__html += "

";
return __html;

利用 new Function 动态创建函数

JavaScript 提供了 new Function(args, body) 的方式，从字符串动态生成函数。这是模板引擎实现的关键一步。

将生成的函数体字符串传入：

var render = new Function('users', 'return function(data){ var users = data.users; ' + compiledCode + ' }')();

实际中，所有变量都应从传入的 data 对象中获取，因此通常会将上下文设为 data，并用 with 语句简化访问（尽管不推荐，但历史引擎如 ejs 曾使用）：

with(data) {
  __html += "..." + name;
}

更安全的做法是显式引用 data.xxx，避免作用域混乱。

处理转义与安全输出

为了防止 XSS，模板引擎通常提供两种插值语法：

• {{name}}：自动 HTML 转义
• {{{raw}}} 或 {{!raw}}：不转义，直接输出

在生成代码时，对普通变量插值调用一个 escape 工具函数：

__html += escape(user.name);

基本上就这些。模板引擎的编译过程本质是：解析 → 生成 JS 字符串 → 动态构造函数 → 执行并传入数据。虽然现代框架多用虚拟 DOM，但理解这一原理有助于掌握动态代码生成和字符串渲染的本质。