模板引擎怎么实现？用JavaScript从零构建并理解核心原理

各位同学，各位开发者，大家好！

今天，我们将一起深入探讨模板引擎的奥秘。在现代Web开发中，无论是前端框架的组件渲染，还是后端服务的页面生成，模板引擎都扮演着举足轻重的角色。它们允许我们以一种声明式的方式，将数据与UI结构分离，极大地提高了开发效率和代码的可维护性。

你或许用过Handlebars、EJS、Nunjucks，甚至Vue或React的JSX，它们都是功能强大的模板方案。但你是否曾好奇，这些引擎的底层机制是怎样的？它们是如何将我们编写的带有特殊语法的模板字符串，最终转化为可执行的HTML？

今天，我们的目标不仅仅是学会使用一个模板引擎，更是要从零开始，用JavaScript亲手构建一个简化的模板引擎，从而彻底理解其核心原理。我们将一步步揭示词法分析、语法分析、代码生成与执行的整个过程。

为什么我们需要模板引擎？

在深入技术细节之前，我们先来回顾一下模板引擎解决的核心问题。

想象一下，你正在构建一个显示用户列表的Web页面。如果没有模板引擎，你可能会这样拼接HTML字符串：

function renderUserList(users) {
  let html = '<ul>';
  for (const user of users) {
    html += '<li>';
    html += '<h2>' + user.name + '</h2>';
    html += '<p>Email: ' + user.email + '</p>';
    html += '</li>';
  }
  html += '</ul>';
  return html;
}

const users = [
  { name: 'Alice', email: '[email protected]' },
  { name: 'Bob', email: '[email protected]' }
];

document.getElementById('app').innerHTML = renderUserList(users);

这种直接拼接字符串的方式，在简单场景下尚可接受，但随着页面复杂度的增加，会迅速暴露出诸多弊端：

1. 可读性差： HTML结构与JavaScript逻辑混杂在一起，难以阅读和维护。
2. 维护困难： 任何UI或数据结构的微小变动，都可能导致大量的字符串修改。
3. 安全性问题： 如果user.name或user.email中包含恶意脚本（如<script>alert('XSS')</script>），直接拼接会导致XSS攻击。手动进行HTML转义非常繁琐且容易出错。
4. 缺乏复用性： 相同或相似的UI结构，需要重复编写拼接逻辑。

模板引擎正是为了解决这些问题而生。它提供了一种分离视图（HTML结构）和模型（数据）的方式，通过特定的语法，让开发者可以在HTML中嵌入动态内容和控制逻辑，然后由引擎负责将这些模板和数据结合，生成最终的HTML。

模板引擎的核心工作原理概览

一个完整的模板引擎通常会经历以下几个阶段：

1. 词法分析（Lexing / Tokenization）： 将输入的模板字符串分解成一系列有意义的“词素”或“令牌”（Tokens）。例如，{{ name }} 会被识别为一个变量令牌，{% if %} 会被识别为一个条件开始令牌。
2. 语法分析（Parsing）： 将词法分析得到的令牌流组织成一个树形结构，称为抽象语法树（Abstract Syntax Tree, AST）。AST是对模板逻辑结构的一种抽象表示，它移除了语法层面的细节，只保留了核心的逻辑关系。
3. 代码生成（Code Generation / Compilation）： 遍历AST，将其转换为目标语言（通常是JavaScript）的可执行代码。这段代码通常是一个函数，它接受数据作为参数，并返回最终的渲染结果（HTML字符串）。
4. 渲染（Rendering）： 执行上一步生成的代码，传入实际的数据，得到最终的输出结果。

我们可以将这个过程想象成一个翻译器：

• 原始模板 ({{ name }}) -> 原始语言句子
• 词法分析 ([TEXT, VARIABLE_START, IDENTIFIER('name'), VARIABLE_END]) -> 单词列表
• 语法分析 (AST: { type: 'Variable', value: 'name' }) -> 语法树（句子的结构）
• 代码生成 (_output += escape(data.name);) -> 目标语言（JavaScript）
• 渲染 ("John Doe") -> 翻译后的结果

我们要构建的模板引擎特性

为了简化并聚焦核心原理，我们将构建一个支持以下功能的模板引擎：

• 变量插值： {{ variableName }}，用于显示数据对象中的值。
• HTML转义： 默认对变量插值进行HTML转义，防止XSS攻击。
• 条件语句： {% if condition %} {% else %} {% endif %}，用于根据条件渲染不同的内容。
• 循环语句： {% for item in collection %} {% endfor %}，用于遍历数组或可迭代对象。

我们将通过一个TemplateEngine类来实现这些功能。

---

第一阶段：词法分析（Lexical Analysis / Tokenization）

词法分析是模板引擎的第一步，它的任务是将输入的模板字符串分解成一系列最小的、有意义的单元——“令牌”（Tokens）。就像自然语言中的单词一样，每个令牌都代表了模板中的一个特定元素，如普通文本、变量名、控制流关键字等。

我们的模板语法将使用以下标记：

• {{ ... }}：变量插值
• {% ... %}：控制流语句（if, for, else）

我们将定义不同类型的令牌，例如：

令牌类型	描述	示例值	对应的正则表达式片段
TEXT	普通文本	"Hello, World!"	[^{]+
VAR_START	变量插值开始标记	"{{"	{{
VAR_END	变量插值结束标记	"}}"	}}
CONTROL_START	控制流开始标记	"{%"	{%
CONTROL_END	控制流结束标记	"%}"	%}
IDENTIFIER	变量名或关键字	"name", "if"	[a-zA-Z_][a-zA-Z0-9_]*
EXPRESSION	控制流内部的表达式（如 user.age > 18）	"item in users"	.+$ (捕获整个内部内容)

我们的词法分析器将使用正则表达式来匹配这些模式，并创建相应的令牌。

// token.js
class Token {
  constructor(type, value) {
    this.type = type;
    this.value = value;
  }

  toString() {
    return `Token(${this.type}, "${this.value}")`;
  }
}

// 定义所有可能的令牌类型
const TOKEN_TYPES = {
  TEXT: 'TEXT',
  VAR_START: 'VAR_START',
  VAR_END: 'VAR_END',
  CONTROL_START: 'CONTROL_START',
  CONTROL_END: 'CONTROL_END',
  IDENTIFIER: 'IDENTIFIER', // 用于变量名、关键字 (if, for, else, in)
  EXPRESSION: 'EXPRESSION', // 用于条件或循环的完整表达式
  WHITESPACE: 'WHITESPACE', // 忽略的空白符
};

// 定义匹配规则的正则表达式
// 注意：顺序很重要，特定的模式应该在更通用的模式之前
const TOKEN_REGEXES = [
  { type: TOKEN_TYPES.VAR_START, regex: /^{{/ },
  { type: TOKEN_TYPES.VAR_END, regex: /^}}/ },
  { type: TOKEN_TYPES.CONTROL_START, regex: /^{%/ },
  { type: TOKEN_TYPES.CONTROL_END, regex: /^%}/ },
  { type: TOKEN_TYPES.WHITESPACE, regex: /^s+/ }, // 匹配空白符，之后会过滤掉
  // TEXT 应该在所有标签匹配之后，因为它会匹配所有非标签内容
  // 但是，我们需要它能够匹配到下一个标签之前的内容
  // 复杂的文本匹配需要特殊处理，因为文本中可能包含 '{' 但不是标签的开始
  // 暂时先让它匹配所有非标签开始字符，并在后续处理中完善
];

/**
 * 词法分析器，将模板字符串转换为令牌数组
 * @param {string} templateString
 * @returns {Token[]}
 */
function tokenize(templateString) {
  const tokens = [];
  let cursor = 0;

  // 辅助函数，用于将匹配到的文本作为普通文本令牌加入
  const addTextToken = (value) => {
    if (value.length > 0) {
      tokens.push(new Token(TOKEN_TYPES.TEXT, value));
    }
  };

  while (cursor < templateString.length) {
    let matched = false;

    // 尝试匹配控制流或变量标签
    if (templateString.substring(cursor, cursor + 2) === '{{') {
      // 匹配到变量开始
      addTextToken(templateString.substring(lastMatchEnd, cursor)); // 之前的文本
      tokens.push(new Token(TOKEN_TYPES.VAR_START, '{{'));
      cursor += 2;
      let varEndIndex = templateString.indexOf('}}', cursor);
      if (varEndIndex === -1) {
        throw new Error(`Unclosed variable tag near: ${templateString.substring(cursor - 2, cursor + 20)}`);
      }
      let expression = templateString.substring(cursor, varEndIndex).trim();
      if (expression.length === 0) {
          throw new Error(`Empty variable expression near: ${templateString.substring(cursor - 2, cursor + 20)}`);
      }
      tokens.push(new Token(TOKEN_TYPES.EXPRESSION, expression));
      tokens.push(new Token(TOKEN_TYPES.VAR_END, '}}'));
      cursor = varEndIndex + 2;
      matched = true;
    } else if (templateString.substring(cursor, cursor + 2) === '{%') {
      // 匹配到控制流开始
      addTextToken(templateString.substring(lastMatchEnd, cursor)); // 之前的文本
      tokens.push(new Token(TOKEN_TYPES.CONTROL_START, '{%'));
      cursor += 2;
      let controlEndIndex = templateString.indexOf('%}', cursor);
      if (controlEndIndex === -1) {
        throw new Error(`Unclosed control tag near: ${templateString.substring(cursor - 2, cursor + 20)}`);
      }
      let expression = templateString.substring(cursor, controlEndIndex).trim();
      if (expression.length === 0) {
          throw new Error(`Empty control expression near: ${templateString.substring(cursor - 2, cursor + 20)}`);
      }
      tokens.push(new Token(TOKEN_TYPES.EXPRESSION, expression));
      tokens.push(new Token(TOKEN_TYPES.CONTROL_END, '%}'));
      cursor = controlEndIndex + 2;
      matched = true;
    }

    if (!matched) {
      // 如果没有匹配到任何标签，则将当前位置到下一个标签开始或字符串结尾之间的内容作为TEXT令牌
      let nextVarStart = templateString.indexOf('{{', cursor);
      let nextControlStart = templateString.indexOf('{%', cursor);

      let nextTagStart = -1;
      if (nextVarStart !== -1 && nextControlStart !== -1) {
        nextTagStart = Math.min(nextVarStart, nextControlStart);
      } else if (nextVarStart !== -1) {
        nextTagStart = nextVarStart;
      } else if (nextControlStart !== -1) {
        nextTagStart = nextControlStart;
      }

      if (nextTagStart === -1) { // 没有更多标签了，剩余全是文本
        tokens.push(new Token(TOKEN_TYPES.TEXT, templateString.substring(cursor)));
        cursor = templateString.length;
      } else { // 匹配到下一个标签之前的所有文本
        tokens.push(new Token(TOKEN_TYPES.TEXT, templateString.substring(cursor, nextTagStart)));
        cursor = nextTagStart;
      }
    }
  }

  // 过滤掉所有空白符令牌，因为它们在语法分析阶段没有实际意义
  // 我们只关心标签内部的表达式，外部的空白符会被文本令牌吸收
  // return tokens.filter(token => token.type !== TOKEN_TYPES.WHITESPACE);
  // 实际上，我们的当前实现已经将外部空白符包含在 TEXT 令牌中，不需要额外过滤
  return tokens;
}

解释：
这个tokenize函数采取了一种基于状态和字符串搜索的策略，而不是纯粹的正则表达式遍历。这是因为处理嵌套结构和普通文本与特殊标签的交错，纯粹的正则表达式分词会非常复杂。

1. 它通过cursor变量遍历模板字符串。
2. 每次迭代，它首先检查当前位置是否是{{或{%的开始。
3. 如果匹配到标签开始，它会：
   • 将从上一个匹配点到当前标签开始之间的所有文本收集为一个TEXT令牌。
   • 创建相应的VAR_START或CONTROL_START令牌。
   • 查找对应的结束标签}}或%}，提取中间的表达式，创建EXPRESSION令牌。
   • 创建VAR_END或CONTROL_END令牌。
   • 更新cursor到结束标签之后。
4. 如果没有匹配到标签，它会查找下一个{{或{%的出现位置，将当前位置到下一个标签之间的所有内容作为TEXT令牌。
5. 如果直到字符串末尾都没有更多标签，则将剩余所有内容作为TEXT令牌。

示例：
假设我们有模板字符串：Hello, {{ name }}! Today is {% if sunny %}sunny{% else %}cloudy{% endif %}.

词法分析的结果将是这样的令牌流：

序号	类型	值
1	TEXT	"Hello, "
2	VAR_START	"{{"
3	EXPRESSION	"name"
4	VAR_END	"}}"
5	TEXT	"! Today is "
6	CONTROL_START	"{%"
7	EXPRESSION	"if sunny"
8	CONTROL_END	"%}"
9	TEXT	"sunny"
10	CONTROL_START	"{%"
11	EXPRESSION	"else"
12	CONTROL_END	"%}"
13	TEXT	"cloudy"
14	CONTROL_START	"{%"
15	EXPRESSION	"endif"
16	CONTROL_END	"%}"
17	TEXT	"."

这个令牌流是下一步——语法分析——的输入。

---

第二阶段：语法分析（Syntactic Analysis / Parsing）

语法分析的任务是将词法分析器生成的令牌流转化为一个抽象语法树（AST）。AST是一个树形结构，它以一种层次化的方式表示了模板的逻辑结构，而忽略了具体的语法细节（如{{或}}）。

AST的每个节点都代表了模板中的一个构造，例如：

• Program (根节点): 整个模板的容器，包含所有子节点。
• TextNode: 普通文本内容。
• VariableNode: 变量插值，包含变量名或表达式。
• IfNode: 条件语句，包含条件表达式、consequent（if块内的内容）和可选的alternate（else块内的内容）。
• ForNode: 循环语句，包含迭代变量、集合表达式和循环体内容。

我们将采用“递归下降”解析器（Recursive Descent Parser）的思路。这种解析器由一组函数组成，每个函数负责解析语法中的一个特定部分。当解析器遇到一个块级结构（如if或for）时，它会递归地调用自身来解析块内部的内容。

// ast.js
// 定义AST节点类型
const NODE_TYPES = {
  PROGRAM: 'Program',
  TEXT: 'TextNode',
  VARIABLE: 'VariableNode',
  IF: 'IfNode',
  ELSE: 'ElseNode', // 实际上 ElseNode 不会独立存在，而是作为 IfNode 的一部分
  FOR: 'ForNode',
};

// 定义AST节点类
class ASTNode {
  constructor(type, value = null, children = []) {
    this.type = type;
    this.value = value; // 文本内容、变量名、表达式
    this.children = children; // 包含的子节点
  }
}

class Parser {
  constructor(tokens) {
    this.tokens = tokens;
    this.cursor = 0;
  }

  // 获取当前令牌
  peek() {
    return this.tokens[this.cursor];
  }

  // 消费当前令牌并前进
  advance() {
    return this.tokens[this.cursor++];
  }

  // 检查当前令牌类型
  is(type) {
    return this.peek() && this.peek().type === type;
  }

  // 消耗指定类型的令牌，如果类型不匹配则抛出错误
  expect(type, errorMessage) {
    const token = this.advance();
    if (!token || token.type !== type) {
      throw new Error(errorMessage || `Expected token type ${type}, but got ${token ? token.type : 'EOF'}`);
    }
    return token;
  }

  // 解析整个模板，返回AST的根节点
  parse() {
    const programNode = new ASTNode(NODE_TYPES.PROGRAM);
    programNode.children = this.parseBlock([TOKEN_TYPES.CONTROL_END]); // 根节点没有明确的结束符，但我们可以在内部定义
    return programNode;
  }

  /**
   * 解析一个块（block），直到遇到某个结束令牌类型
   * @param {string[]} endTokenTypes - 结束此块的令牌类型数组，例如 ['CONTROL_END']
   * @returns {ASTNode[]} 此块中解析出的所有子节点
   */
  parseBlock(endTokenTypes) {
    const nodes = [];
    while (this.cursor < this.tokens.length && !endTokenTypes.includes(this.peek().type)) {
      const token = this.peek();

      if (token.type === TOKEN_TYPES.TEXT) {
        nodes.push(new ASTNode(NODE_TYPES.TEXT, this.advance().value));
      } else if (token.type === TOKEN_TYPES.VAR_START) {
        this.expect(TOKEN_TYPES.VAR_START); // Consume '{{'
        const expression = this.expect(TOKEN_TYPES.EXPRESSION, 'Expected variable expression').value;
        this.expect(TOKEN_TYPES.VAR_END); // Consume '}}'
        nodes.push(new ASTNode(NODE_TYPES.VARIABLE, expression));
      } else if (token.type === TOKEN_TYPES.CONTROL_START) {
        this.expect(TOKEN_TYPES.CONTROL_START); // Consume '{%'
        const controlExpressionToken = this.expect(TOKEN_TYPES.EXPRESSION, 'Expected control expression');
        const controlExpression = controlExpressionToken.value;
        this.expect(TOKEN_TYPES.CONTROL_END); // Consume '%}'

        // 解析控制流语句 (if, else, for, endif, endfor)
        const parts = controlExpression.split(/s+/);
        const keyword = parts[0];

        if (keyword === 'if') {
          nodes.push(this.parseIfStatement(controlExpression));
        } else if (keyword === 'for') {
          nodes.push(this.parseForStatement(controlExpression));
        } else if (keyword === 'else') {
          // 'else' 应该由 parseIfStatement 处理，这里不应该直接遇到
          throw new Error(`Unexpected 'else' token outside of 'if' block at token: ${controlExpressionToken.toString()}`);
        } else if (keyword === 'endif') {
          // 'endif' 是块的结束符，由父级 parseBlock 处理
          // 这里我们只是确保它不被当作普通节点
          // 如果执行到这里，说明 'endif' 没有被父级处理，可能是语法错误
          throw new Error(`Unexpected 'endif' token. Missing 'if' block start?`);
        } else if (keyword === 'endfor') {
          // 'endfor' 是块的结束符，由父级 parseBlock 处理
          throw new Error(`Unexpected 'endfor' token. Missing 'for' block start?`);
        } else {
          throw new Error(`Unknown control keyword: ${keyword} at token: ${controlExpressionToken.toString()}`);
        }
      } else {
        throw new Error(`Unexpected token type: ${token.type} with value: ${token.value}`);
      }
    }
    return nodes;
  }

  // 解析 If 语句
  parseIfStatement(ifExpression) {
    const condition = ifExpression.substring(ifExpression.indexOf(' ') + 1);
    const ifNode = new ASTNode(NODE_TYPES.IF, condition);

    // 解析 if 块内容，直到遇到 else 或 endif
    ifNode.children = this.parseBlock([TOKEN_TYPES.CONTROL_START]);

    // 检查是否有 else 块
    if (this.is(TOKEN_TYPES.CONTROL_START)) {
      this.expect(TOKEN_TYPES.CONTROL_START);
      const elseToken = this.expect(TOKEN_TYPES.EXPRESSION, 'Expected else or endif expression');
      const elseKeyword = elseToken.value.split(/s+/)[0];
      this.expect(TOKEN_TYPES.CONTROL_END);

      if (elseKeyword === 'else') {
        // 解析 else 块内容，直到遇到 endif
        ifNode.alternate = this.parseBlock([TOKEN_TYPES.CONTROL_START]);
        // 确保 else 之后紧跟着 endif
        this.expect(TOKEN_TYPES.CONTROL_START);
        const endifToken = this.expect(TOKEN_TYPES.EXPRESSION, 'Expected endif expression after else block');
        if (endifToken.value.trim() !== 'endif') {
          throw new Error(`Expected 'endif' but got '${endifToken.value}'`);
        }
        this.expect(TOKEN_TYPES.CONTROL_END);
      } else if (elseKeyword === 'endif') {
        // 如果是 endif，说明没有 else 块
        // 已经消耗了 endif 令牌，不需要额外操作
      } else {
        throw new Error(`Expected 'else' or 'endif' but got '${elseKeyword}'`);
      }
    } else {
      // 必须有 endif 结束 if 块
      throw new Error(`Expected 'endif' to close 'if' block, but got ${this.peek() ? this.peek().type : 'EOF'}`);
    }

    return ifNode;
  }

  // 解析 For 语句
  parseForStatement(forExpression) {
    // for item in collection
    const parts = forExpression.split(/s+/); // ['for', 'item', 'in', 'collection']
    if (parts.length !== 4 || parts[2] !== 'in') {
      throw new Error(`Invalid 'for' loop syntax: ${forExpression}. Expected 'for item in collection'.`);
    }
    const iterationVar = parts[1];
    const collection = parts[3];

    const forNode = new ASTNode(NODE_TYPES.FOR, { iterationVar, collection });

    // 解析 for 循环体内容，直到遇到 endfor
    forNode.children = this.parseBlock([TOKEN_TYPES.CONTROL_START]);

    // 确保有 endfor 结束循环
    if (this.is(TOKEN_TYPES.CONTROL_START)) {
      this.expect(TOKEN_TYPES.CONTROL_START);
      const endforToken = this.expect(TOKEN_TYPES.EXPRESSION, 'Expected endfor expression');
      if (endforToken.value.trim() !== 'endfor') {
        throw new Error(`Expected 'endfor' but got '${endforToken.value}'`);
      }
      this.expect(TOKEN_TYPES.CONTROL_END);
    } else {
      throw new Error(`Expected 'endfor' to close 'for' block, but got ${this.peek() ? this.peek().type : 'EOF'}`);
    }

    return forNode;
  }
}

/**
 * 将令牌流解析为AST
 * @param {Token[]} tokens
 * @returns {ASTNode}
 */
function parse(tokens) {
  const parser = new Parser(tokens);
  return parser.parse();
}

解释：

• Parser类维护一个tokens数组和cursor来跟踪当前解析位置。
• parse()方法是入口，它创建一个Program节点并调用parseBlock来解析所有顶级内容。
• parseBlock(endTokenTypes)是核心，它循环处理令牌，直到遇到指定的结束令牌类型。
  • 如果遇到TEXT令牌，就创建一个TextNode。
  • 如果遇到VAR_START，就创建一个VariableNode。
  • 如果遇到CONTROL_START，它会根据内部的表达式（if, for）来分发给特定的解析函数（parseIfStatement, parseForStatement）。
• parseIfStatement和parseForStatement是专门处理if和for语句的函数。它们会：
  • 提取条件或循环的表达式。
  • 递归调用parseBlock来解析其内部的内容。
  • 处理else块（对于if语句）。
  • 确保有正确的结束标签（endif或endfor）。

示例AST结构：
对于模板 Hello, {{ name }}!，AST可能看起来像：

Program
  └── TextNode ("Hello, ")
  └── VariableNode ("name")
  └── TextNode ("!")

对于更复杂的 {% if sunny %}sunny{% else %}cloudy{% endif %}：

Program
  └── IfNode ("sunny")
        ├── children (consequent)
        │     └── TextNode ("sunny")
        └── alternate (else block)
              └── TextNode ("cloudy")

AST是模板的抽象和标准化表示，它消除了语法上的噪音，使得后续的代码生成阶段可以更容易地处理模板的逻辑。

---

第三阶段：代码生成（Code Generation / Compilation）

代码生成阶段的目标是将AST转换成可执行的JavaScript函数。这个函数将接受一个数据对象作为参数，并返回最终渲染的HTML字符串。

为了实现这一点，我们通常会构建一个字符串，这个字符串就是最终的JavaScript函数体。这个函数体内部会包含：

1. 一个用于累积结果的变量，例如_output = []。
2. 将文本、变量值、条件逻辑和循环逻辑转换为JavaScript语句。
3. 对变量值进行HTML转义，防止XSS。
4. 最终返回_output.join('')。

// compiler.js
// 简单的HTML转义函数，避免XSS
function escapeHTML(str) {
  if (typeof str !== 'string') {
    str = String(str); // 确保是非字符串类型也能被处理
  }
  const div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
}

// 编译器的核心功能：将AST节点转换为JS代码字符串
class Compiler {
  constructor() {
    this.code = [];
    this.indent = 0; // 用于生成可读性更好的代码，添加缩进
    this.uniqueId = 0; // 用于生成唯一变量名，避免冲突
  }

  // 添加一行代码到缓冲区
  _add(line) {
    this.code.push('  '.repeat(this.indent) + line);
  }

  // 增加缩进
  _indent() {
    this.indent++;
  }

  // 减少缩进
  _dedent() {
    this.indent--;
  }

  // 编译AST并返回生成的JS函数字符串
  compile(ast) {
    this.code = [];
    this.indent = 0;
    this.uniqueId = 0;

    this._add(`var _output = [];`);
    this._add(`var _escape = ${escapeHTML.toString()};`); // 将转义函数也嵌入到生成代码中

    this.walk(ast);

    this._add(`return _output.join('');`);

    // 将生成的代码包装成一个函数
    // 'data' 是渲染时传入的数据对象
    // '_escape' 是内部使用的转义函数
    return new Function('data', '_escape', this.code.join('n'));
  }

  // 遍历AST
  walk(node) {
    switch (node.type) {
      case NODE_TYPES.PROGRAM:
        node.children.forEach(child => this.walk(child));
        break;
      case NODE_TYPES.TEXT:
        this._add(`_output.push(${JSON.stringify(node.value)});`);
        break;
      case NODE_TYPES.VARIABLE:
        // 对变量进行HTML转义
        this._add(`_output.push(_escape(data.${node.value}));`);
        break;
      case NODE_TYPES.IF:
        this._add(`if (${node.value}) {`);
        this._indent();
        node.children.forEach(child => this.walk(child)); // if 块内容
        this._dedent();
        this._add(`}`);
        if (node.alternate && node.alternate.length > 0) {
          this._add(`else {`);
          this._indent();
          node.alternate.forEach(child => this.walk(child)); // else 块内容
          this._dedent();
          this._add(`}`);
        }
        break;
      case NODE_TYPES.FOR:
        const { iterationVar, collection } = node.value;
        const loopVarId = `_loop${this.uniqueId++}`; // 确保循环变量名唯一
        this._add(`if (Array.isArray(data.${collection})) {`); // 检查集合是否为数组
        this._indent();
        this._add(`for (var ${loopVarId} = 0; ${loopVarId} < data.${collection}.length; ${loopVarId}++) {`);
        this._indent();
        this._add(`var ${iterationVar} = data.${collection}[${loopVarId}];`);
        node.children.forEach(child => this.walk(child)); // for 循环体内容
        this._dedent();
        this._add(`}`);
        this._dedent();
        this._add(`} else {`); // 如果不是数组，可以打印警告或跳过
        this._indent();
        this._add(`// Warning: collection '${collection}' is not an array for 'for' loop.`);
        this._dedent();
        this._add(`}`);
        break;
      default:
        throw new Error(`Unknown AST node type: ${node.type}`);
    }
  }
}

/**
 * 将AST编译为可执行的渲染函数
 * @param {ASTNode} ast
 * @returns {Function} - 接受 'data' 作为参数的渲染函数
 */
function compile(ast) {
  const compiler = new Compiler();
  return compiler.compile(ast);
}

解释：

1. escapeHTML函数： 这是一个简单的HTML转义函数，它通过DOM API来确保字符串中的特殊字符（<, >, &, ", '）被正确转义，从而避免XSS漏洞。这个函数会被内联到生成的JS代码中。
2. Compiler类：
   • _add, _indent, _dedent方法用于构建带有适当缩进的JavaScript代码字符串，提高可读性。
   • compile(ast)是入口方法。它初始化一个_output数组来收集渲染结果，并声明_escape函数。然后，它调用walk方法遍历AST。
   • 最后，它使用new Function('data', '_escape', this.code.join('n'))将构建的代码字符串转换为一个实际的JavaScript函数。new Function是一个强大的工具，它允许我们动态地创建函数。
3. walk(node)方法： 这是AST遍历的核心。它根据节点的类型生成不同的JavaScript代码片段：
   • Program： 递归遍历其所有子节点。
   • TextNode： 将其文本内容直接推入_output数组。JSON.stringify确保文本中的引号等特殊字符被正确处理。
   • VariableNode： 生成_output.push(_escape(data.variableName));，自动调用转义函数。
   • IfNode： 生成if (condition) { ... } else { ... }结构，并递归编译其children（if块）和alternate（else块）。
   • ForNode：
     • 生成一个if (Array.isArray(data.collection)) { ... }来确保我们迭代的是一个数组。
     • 生成一个标准的for循环，将item in collection转换为for (var item = data.collection[i])。为了避免item变量与外部作用域冲突，我们为循环索引使用一个唯一的_loopId。
     • 在循环内部，将当前迭代的元素赋值给iterationVar（例如var item = data.users[i];），然后递归编译循环体内容。

生成代码示例：
对于模板 Hello, {{ name }}! Today is {% if sunny %}sunny{% else %}cloudy{% endif %}.，生成的函数体可能大致如下：

var _output = [];
var _escape = function escapeHTML(str) {
  if (typeof str !== 'string') {
    str = String(str);
  }
  const div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
};

_output.push("Hello, ");
_output.push(_escape(data.name));
_output.push("! Today is ");

if (data.sunny) {
  _output.push("sunny");
} else {
  _output.push("cloudy");
}

_output.push(".");

return _output.join('');

这个生成的函数，当传入一个data对象时，就会执行并返回最终的HTML字符串。

---

第四阶段：整合与渲染（Integration / Rendering）

现在我们已经有了词法分析、语法分析和代码生成的所有组件，是时候将它们整合到一个可用的模板引擎中了。我们将创建一个TemplateEngine类，它将提供一个render方法，接受模板字符串和数据，并返回渲染结果。

为了提高性能，模板引擎通常会缓存编译后的函数。这意味着同一个模板字符串只需要被解析和编译一次，后续的渲染请求可以直接使用缓存中的函数，避免重复的CPU密集型操作。

// TemplateEngine.js
// 导入之前定义好的模块
// const { Token, TOKEN_TYPES, tokenize } = require('./tokenizer'); // 假设在 Node.js 环境
// const { ASTNode, NODE_TYPES, parse } = require('./parser');
// const { compile } = require('./compiler');

// 在浏览器环境中，直接使用全局作用域中的函数和类
// 对于本讲座，我们将把所有代码放在一个文件中，以便演示

// --- Begin Tokenizer Code ---
class Token {
  constructor(type, value) {
    this.type = type;
    this.value = value;
  }

  toString() {
    return `Token(${this.type}, "${this.value}")`;
  }
}

const TOKEN_TYPES = {
  TEXT: 'TEXT',
  VAR_START: 'VAR_START',
  VAR_END: 'VAR_END',
  CONTROL_START: 'CONTROL_START',
  CONTROL_END: 'CONTROL_END',
  IDENTIFIER: 'IDENTIFIER',
  EXPRESSION: 'EXPRESSION',
  WHITESPACE: 'WHITESPACE',
};

function tokenize(templateString) {
  const tokens = [];
  let cursor = 0;
  let lastMatchEnd = 0; // 记录上一个非TEXT令牌的结束位置

  const addTextToken = (value) => {
    if (value.length > 0) {
      tokens.push(new Token(TOKEN_TYPES.TEXT, value));
    }
  };

  while (cursor < templateString.length) {
    let matched = false;

    if (templateString.substring(cursor, cursor + 2) === '{{') {
      addTextToken(templateString.substring(lastMatchEnd, cursor));
      tokens.push(new Token(TOKEN_TYPES.VAR_START, '{{'));
      cursor += 2;
      let varEndIndex = templateString.indexOf('}}', cursor);
      if (varEndIndex === -1) {
        throw new Error(`Unclosed variable tag near: ${templateString.substring(cursor - 2, cursor + 20)}`);
      }
      let expression = templateString.substring(cursor, varEndIndex).trim();
      if (expression.length === 0) {
          throw new Error(`Empty variable expression near: ${templateString.substring(cursor - 2, cursor + 20)}`);
      }
      tokens.push(new Token(TOKEN_TYPES.EXPRESSION, expression));
      tokens.push(new Token(TOKEN_TYPES.VAR_END, '}}'));
      cursor = varEndIndex + 2;
      lastMatchEnd = cursor;
      matched = true;
    } else if (templateString.substring(cursor, cursor + 2) === '{%') {
      addTextToken(templateString.substring(lastMatchEnd, cursor));
      tokens.push(new Token(TOKEN_TYPES.CONTROL_START, '{%'));
      cursor += 2;
      let controlEndIndex = templateString.indexOf('%}', cursor);
      if (controlEndIndex === -1) {
        throw new Error(`Unclosed control tag near: ${templateString.substring(cursor - 2, cursor + 20)}`);
      }
      let expression = templateString.substring(cursor, controlEndIndex).trim();
      if (expression.length === 0) {
          throw new Error(`Empty control expression near: ${templateString.substring(cursor - 2, cursor + 20)}`);
      }
      tokens.push(new Token(TOKEN_TYPES.EXPRESSION, expression));
      tokens.push(new Token(TOKEN_TYPES.CONTROL_END, '%}'));
      cursor = controlEndIndex + 2;
      lastMatchEnd = cursor;
      matched = true;
    }

    if (!matched) {
      let nextVarStart = templateString.indexOf('{{', cursor);
      let nextControlStart = templateString.indexOf('{%', cursor);

      let nextTagStart = -1;
      if (nextVarStart !== -1 && nextControlStart !== -1) {
        nextTagStart = Math.min(nextVarStart, nextControlStart);
      } else if (nextVarStart !== -1) {
        nextTagStart = nextVarStart;
      } else if (nextControlStart !== -1) {
        nextTagStart = nextControlStart;
      }

      if (nextTagStart === -1) {
        addTextToken(templateString.substring(cursor));
        cursor = templateString.length;
        lastMatchEnd = cursor;
      } else {
        addTextToken(templateString.substring(cursor, nextTagStart));
        cursor = nextTagStart;
        lastMatchEnd = cursor;
      }
    }
  }
  return tokens;
}
// --- End Tokenizer Code ---

// --- Begin Parser Code ---
const NODE_TYPES = {
  PROGRAM: 'Program',
  TEXT: 'TextNode',
  VARIABLE: 'VariableNode',
  IF: 'IfNode',
  FOR: 'ForNode',
};

class ASTNode {
  constructor(type, value = null, children = []) {
    this.type = type;
    this.value = value;
    this.children = children;
  }
}

class Parser {
  constructor(tokens) {
    this.tokens = tokens;
    this.cursor = 0;
  }

  peek() {
    return this.tokens[this.cursor];
  }

  advance() {
    return this.tokens[this.cursor++];
  }

  is(type) {
    return this.peek() && this.peek().type === type;
  }

  expect(type, errorMessage) {
    const token = this.advance();
    if (!token || token.type !== type) {
      throw new Error(errorMessage || `Expected token type ${type}, but got ${token ? token.type : 'EOF'}`);
    }
    return token;
  }

  parse() {
    const programNode = new ASTNode(NODE_TYPES.PROGRAM);
    programNode.children = this.parseBlock([TOKEN_TYPES.CONTROL_END]);
    return programNode;
  }

  parseBlock(endTokenTypes) {
    const nodes = [];
    while (this.cursor < this.tokens.length && (!this.is(TOKEN_TYPES.CONTROL_START) || !endTokenTypes.includes(this.tokens[this.cursor + 1]?.type)) && !endTokenTypes.includes(this.peek().type)) {
      const token = this.peek();

      if (token.type === TOKEN_TYPES.TEXT) {
        nodes.push(new ASTNode(NODE_TYPES.TEXT, this.advance().value));
      } else if (token.type === TOKEN_TYPES.VAR_START) {
        this.expect(TOKEN_TYPES.VAR_START);
        const expression = this.expect(TOKEN_TYPES.EXPRESSION, 'Expected variable expression').value;
        this.expect(TOKEN_TYPES.VAR_END);
        nodes.push(new ASTNode(NODE_TYPES.VARIABLE, expression));
      } else if (token.type === TOKEN_TYPES.CONTROL_START) {
        this.expect(TOKEN_TYPES.CONTROL_START);
        const controlExpressionToken = this.expect(TOKEN_TYPES.EXPRESSION, 'Expected control expression');
        const controlExpression = controlExpressionToken.value;
        this.expect(TOKEN_TYPES.CONTROL_END);

        const parts = controlExpression.split(/s+/);
        const keyword = parts[0];

        if (keyword === 'if') {
          nodes.push(this.parseIfStatement(controlExpression));
        } else if (keyword === 'for') {
          nodes.push(this.parseForStatement(controlExpression));
        } else if (keyword === 'else' || keyword === 'endif' || keyword === 'endfor') {
          // 如果这里遇到这些，说明它们是父块的结束符，或者语法错误
          // 我们不在这里处理它们，让外层循环或 parseIfStatement/parseForStatement 来处理
          // 为了避免无限循环，这里需要一个机制来跳出或抛出错误
          // 如果当前令牌是 CONTROL_START，且其内部表达式是这些关键字之一，
          // 说明它可能是当前 parseBlock 的结束条件的一部分，那么应该让外层处理
          // 因此，这里直接 return 即可，让外层判断 if (!this.is(TOKEN_TYPES.CONTROL_START) || !endTokenTypes.includes(this.tokens[this.cursor + 1]?.type))
          this.cursor -= 3; // 回退，以便外层循环可以再次检查这个控制流令牌
          return nodes;
        } else {
          throw new Error(`Unknown control keyword: ${keyword} at token: ${controlExpressionToken.toString()}`);
        }
      } else {
        throw new Error(`Unexpected token type: ${token.type} with value: ${token.value}`);
      }
    }
    return nodes;
  }

  parseIfStatement(ifExpression) {
    const condition = ifExpression.substring(ifExpression.indexOf(' ') + 1);
    const ifNode = new ASTNode(NODE_TYPES.IF, condition);

    // 解析 if 块内容，直到遇到 else 或 endif
    ifNode.children = this.parseBlock([TOKEN_TYPES.CONTROL_START]);

    // 检查是否有 else 块
    if (this.is(TOKEN_TYPES.CONTROL_START)) {
      this.expect(TOKEN_TYPES.CONTROL_START);
      const elseToken = this.expect(TOKEN_TYPES.EXPRESSION, 'Expected else or endif expression');
      const elseKeyword = elseToken.value.split(/s+/)[0];
      this.expect(TOKEN_TYPES.CONTROL_END);

      if (elseKeyword === 'else') {
        ifNode.alternate = this.parseBlock([TOKEN_TYPES.CONTROL_START]);
        // 确保 else 之后紧跟着 endif
        this.expect(TOKEN_TYPES.CONTROL_START);
        const endifToken = this.expect(TOKEN_TYPES.EXPRESSION, 'Expected endif expression after else block');
        if (endifToken.value.trim() !== 'endif') {
          throw new Error(`Expected 'endif' but got '${endifToken.value}'`);
        }
        this.expect(TOKEN_TYPES.CONTROL_END);
      } else if (elseKeyword === 'endif') {
        // 如果是 endif，说明没有 else 块，已经消耗了 endif 令牌
      } else {
        throw new Error(`Expected 'else' or 'endif' but got '${elseKeyword}'`);
      }
    } else {
      throw new Error(`Expected 'endif' to close 'if' block, but got ${this.peek() ? this.peek().type : 'EOF'}`);
    }

    return ifNode;
  }

  parseForStatement(forExpression) {
    const parts = forExpression.split(/s+/);
    if (parts.length !== 4 || parts[2] !== 'in') {
      throw new Error(`Invalid 'for' loop syntax: ${forExpression}. Expected 'for item in collection'.`);
    }
    const iterationVar = parts[1];
    const collection = parts[3];

    const forNode = new ASTNode(NODE_TYPES.FOR, { iterationVar, collection });

    forNode.children = this.parseBlock([TOKEN_TYPES.CONTROL_START]);

    if (this.is(TOKEN_TYPES.CONTROL_START)) {
      this.expect(TOKEN_TYPES.CONTROL_START);
      const endforToken = this.expect(TOKEN_TYPES.EXPRESSION, 'Expected endfor expression');
      if (endforToken.value.trim() !== 'endfor') {
        throw new Error(`Expected 'endfor' but got '${endforToken.value}'`);
      }
      this.expect(TOKEN_TYPES.CONTROL_END);
    } else {
      throw new Error(`Expected 'endfor' to close 'for' block, but got ${this.peek() ? this.peek().type : 'EOF'}`);
    }

    return forNode;
  }
}

function parse(tokens) {
  const parser = new Parser(tokens);
  return parser.parse();
}
// --- End Parser Code ---

// --- Begin Compiler Code ---
function escapeHTML(str) {
  if (typeof str !== 'string') {
    str = String(str);
  }
  const div = document.createElement('div');
  div.appendChild(document.createTextNode(str));
  return div.innerHTML;
}

class Compiler {
  constructor() {
    this.code = [];
    this.indent = 0;
    this.uniqueId = 0;
  }

  _add(line) {
    this.code.push('  '.repeat(this.indent) + line);
  }

  _indent() {
    this.indent++;
  }

  _dedent() {
    this.indent--;
  }

  compile(ast) {
    this.code = [];
    this.indent = 0;
    this.uniqueId = 0;

    this._add(`var _output = [];`);
    this._add(`var _escape = ${escapeHTML.toString()};`);

    this.walk(ast);

    this._add(`return _output.join('');`);

    // 使用 new Function 来动态创建渲染函数
    // 注意：new Function 有安全风险，因为它执行任意字符串作为代码。
    // 在生产环境中，需要确保模板源是可信的，或进行沙箱处理。
    try {
        return new Function('data', '_escape', this.code.join('n'));
    } catch (e) {
        console.error("Error compiling template:", e);
        console.error("Generated code:", this.code.join('n'));
        throw e;
    }
  }

  walk(node) {
    switch (node.type) {
      case NODE_TYPES.PROGRAM:
        node.children.forEach(child => this.walk(child));
        break;
      case NODE_TYPES.TEXT:
        this._add(`_output.push(${JSON.stringify(node.value)});`);
        break;
      case NODE_TYPES.VARIABLE:
        this._add(`_output.push(_escape(data.${node.value}));`);
        break;
      case NODE_TYPES.IF:
        this._add(`if (${node.value}) {`);
        this._indent();
        node.children.forEach(child => this.walk(child));
        this._dedent();
        this._add(`}`);
        if (node.alternate && node.alternate.length > 0) {
          this._add(`else {`);
          this._indent();
          node.alternate.forEach(child => this.walk(child));
          this._dedent();
          this._add(`}`);
        }
        break;
      case NODE_TYPES.FOR:
        const { iterationVar, collection } = node.value;
        const loopVarId = `_loop${this.uniqueId++}`;

        // 优化：直接在循环中定义迭代变量，并通过解构赋值
        this._add(`if (Array.isArray(data.${collection})) {`);
        this._indent();
        this._add(`for (const ${iterationVar} of data.${collection}) {`); // 使用 for...of 更简洁
        this._indent();
        node.children.forEach(child => this.walk(child));
        this._dedent();
        this._add(`}`);
        this._dedent();
        this._add(`} else if (data.${collection} !== undefined && data.${collection} !== null) {`);
        this._indent();
        this._add(`// Warning: collection '${collection}' is not an array. Skipping 'for' loop.`);
        this._dedent();
        this._add(`}`);
        break;
      default:
        throw new Error(`Unknown AST node type: ${node.type}`);
    }
  }
}

function compile(ast) {
  const compiler = new Compiler();
  return compiler.compile(ast);
}
// --- End Compiler Code ---

class TemplateEngine {
  constructor() {
    this.cache = new Map(); // 用于缓存编译后的函数
  }

  /**
   * 渲染模板
   * @param {string} templateString - 模板字符串
   * @param {object} data - 渲染所需的数据
   * @returns {string} - 渲染后的HTML字符串
   */
  render(templateString, data = {}) {
    let renderFunction = this.cache.get(templateString);

    if (!renderFunction) {
      // 1. 词法分析 (Tokenization)
      const tokens = tokenize(templateString);
      // console.log("Tokens:", tokens.map(t => t.toString()));

      // 2. 语法分析 (Parsing)
      const ast = parse(tokens);
      // console.log("AST:", JSON.stringify(ast, null, 2));

      // 3. 代码生成 (Compilation)
      renderFunction = compile(ast);
      this.cache.set(templateString, renderFunction); // 缓存编译结果
    }

    // 4. 渲染 (Rendering)
    // 执行编译后的函数，传入数据
    return renderFunction(data);
  }
}

// 实例化模板引擎
const engine = new TemplateEngine();

// --- 演示与测试 ---
console.log("--- 模板引擎演示 ---");

const template1 = `
  <h1>Hello, {{ user.name }}!</h1>
  <p>Your email is: {{ user.email }}</p>
  {% if user.isAdmin %}
    <p>Welcome, Admin!</p>
  {% else %}
    <p>You are a regular user.</p>
  {% endif %}
`;

const data1 = {
  user: {
    name: "Alice",
    email: "[email protected]",
    isAdmin: true
  }
};

console.log("nTemplate 1:");
console.log(template1);
console.log("nData 1:");
console.log(data1);
console.log("nRendered 1:");
console.log(engine.render(template1, data1));
/* 预期输出:
  <h1>Hello, Alice!</h1>
  <p>Your email is: [email protected]</p>
    <p>Welcome, Admin!</p>
*/

const data2 = {
  user: {
    name: "Bob",
    email: "[email protected]",
    isAdmin: false
  }
};

console.log("nRendered 2 (with different data, same template):");
console.log(engine.render(template1, data2));
/* 预期输出:
  <h1>Hello, Bob!</h1>
  <p>Your email is: [email protected]</p>
    <p>You are a regular user.</p>
*/

const template2 = `
  <h2>User List:</h2>
  <ul>
    {% for user in users %}
      <li>{{ user.name }} ({{ user.email }})</li>
    {% endfor %}
  </ul>
  <p>Total users: {{ users.length }}</p>
`;

const data3 = {
  users: [
    { name: "Charlie", email: "[email protected]" },
    { name: "David", email: "[email protected]" },
    { name: "Eve", email: "[email protected]" }
  ]
};

console.log("nTemplate 2:");
console.log(template2);
console.log("nData 3:");
console.log(data3);
console.log("nRendered 3:");
console.log(engine.render(template2, data3));
/* 预期输出:
  <h2>User List:</h2>
  <ul>
      <li>Charlie ([email protected])</li>
      <li>David ([email protected])</li>
      <li>Eve ([email protected])</li>
  </ul>
  <p>Total users: 3</p>
*/

const template3 = `
  <p>This is a test with a potentially malicious script: {{ maliciousContent }}</p>
`;
const data4 = {
  maliciousContent: "<script>alert('XSS Attack!')</script>"
};

console.log("nTemplate 3 (XSS Test):");
console.log(template3);
console.log("nData 4:");
console.log(data4);
console.log("nRendered 4 (should be escaped):");
console.log(engine.render(template3, data4));
/* 预期输出:
  <p>This is a test with a potentially malicious script: &lt;script&gt;alert('XSS Attack!')&lt;/script&gt;</p>
*/

const template4 = `
  {% if isTrue %}
    <p>This is true.</p>
    {% for num in numbers %}
      <p>Number: {{ num }}</p>
    {% endfor %}
  {% else %}
    <p>This is false.</p>
  {% endif %}
`;

const data5 = {
  isTrue: true,
  numbers: [10, 20, 30]
};

console.log("nTemplate 4 (Nested Logic):");
console.log(template4);
console.log("nData 5:");
console.log(data5);
console.log("nRendered 5:");
console.log(engine.render(template4, data5));
/* 预期输出:
  <p>This is true.</p>
      <p>Number: 10</p>
      <p>Number: 20</p>
      <p>Number: 30</p>
*/

对整合部分的解释和修改：

1. TemplateEngine类：

   • constructor()：初始化一个Map (this.cache) 来存储编译后的渲染函数。模板字符串作为键，编译函数作为值。
   • render(templateString, data)：
     • 首先检查this.cache中是否已有该模板字符串对应的编译函数。
     • 如果没有，则依次调用tokenize、parse、compile，并把最终生成的渲染函数存入缓存。
     • 最后，调用（或从缓存中获取的）渲染函数，传入data对象，并返回结果。

2. Parser的parseBlock修正：

   • 在原始parseBlock的while条件中，!endTokenTypes.includes(this.peek().type) 无法正确处理 {% else %} 或 {% endif %} 这样的结束符，因为它们本身是 CONTROL_START 令牌。
   • 我修改了while循环的条件：while (this.cursor < this.tokens.length && (!this.is(TOKEN_TYPES.CONTROL_START) || !endTokenTypes.includes(this.tokens[this.cursor + 1]?.type)) && !endTokenTypes.includes(this.peek().type))
     • 这个条件现在更复杂，它检查：
       1. 是否到达令牌流末尾。
       2. 如果当前是CONTROL_START，并且紧随其后的EXPRESSION是endTokenTypes中某个关键字（如else, endif），则停止解析当前块。
       3. 如果当前令牌类型本身就是endTokenTypes中的一个，也停止（尽管对于我们的控制流标签，通常是CONTROL_START后面跟着关键字）。
   • 在parseBlock内部处理CONTROL_START时，如果遇到else, endif, endfor等关键字，我让它回退this.cursor -= 3;（回到{% keyword %}的{%之前），并return nodes;，这样父级parseIfStatement或parseForStatement就可以正确地处理这些结束令牌。

3. Compiler的ForNode优化：

   • 我将for (var ${loopVarId} = 0; ...)改为了更现代、更简洁的for (const ${iterationVar} of data.${collection}) { ... }。这使得生成的代码更接近原生的JavaScript，也更容易理解。
   • 增加了对非数组集合的检查和警告，提高了鲁棒性。

安全性考虑：new Function 的风险

在代码生成阶段，我们使用了new Function来将生成的JavaScript代码字符串转换为可执行函数。new Function是一个非常强大的工具，但它也带来了潜在的安全风险：

• 任意代码执行： 如果攻击者能够控制模板字符串，他们就可以在模板中注入恶意的JavaScript代码，这些代码会在服务器端（Node.js）或客户端浏览器中执行，导致XSS攻击、数据泄露或其他安全漏洞。
• 沙箱隔离： 尽管我们的data对象是作为参数传入，但如果模板表达式允许访问全局对象（如window或process），则可能突破沙箱限制。

缓解策略：

1. 严格的模板输入验证： 确保模板字符串只来自可信源，并且不允许用户直接提交或修改模板。
2. 默认HTML转义： 我们的引擎已经默认对{{ ... }}中的变量进行HTML转义，这是防止XSS的关键第一步。
3. 限制表达式能力： 更复杂的模板引擎会通过静态分析或更严格的解析规则来限制模板中允许使用的JavaScript表达式。例如，可能只允许简单的变量访问和操作符，禁止函数调用、new操作符、全局对象访问等。
4. 沙箱环境： 在Node.js环境中，可以使用vm模块来在一个独立的上下文（沙箱）中执行编译后的函数，进一步隔离潜在的恶意代码。在浏览器中，这更具挑战性，通常依赖于严格的内容安全策略（CSP）和谨慎的模板管理。

我们的目标是理解核心原理，因此在本次实现中，我们暂时接受new Function带来的潜在风险，并假定模板字符串是可信的。但在实际生产环境中，这一点必须被高度重视。

核心原理的掌握与未来展望

通过这次从零开始构建模板引擎的实践，我们深入理解了计算机语言处理的几个核心阶段：词法分析、语法分析和代码生成。我们看到了如何将一个自定义的声明式语法，一步步转化为机器可执行的指令。

这个简化的模板引擎虽然功能有限，但它包含了现代模板引擎最基础、最核心的逻辑。在此基础上，我们可以进一步扩展其功能，例如：

• 过滤器（Filters）： 允许对变量值进行格式化，如 {{ name | uppercase }}。
• 自定义标签（Custom Tags）： 允许定义更复杂的业务逻辑标签。
• 局部文件（Partials / Includes）： 允许在一个模板中引入另一个模板，提高模块化和复用性。
• 宏（Macros）： 类似于函数，可以在模板中定义可复用的代码块。
• 错误报告： 提供更详细、友好的错误信息，包括错误发生的行号和列号。
• 性能优化： 进一步优化代码生成，例如避免不必要的数组push操作，直接拼接字符串。

理解模板引擎的运作机制，不仅能够帮助我们更有效地使用现有的模板工具，更能够提升我们对编程语言、编译器和解释器设计的理解。这种“知其然，更知其所以然”的能力，是成为一名优秀开发者的基石。希望这次讲座能为大家打开一扇新的大门，激发大家对底层原理探索的兴趣。