3. 模板引擎核心原理：工作流程、变量替换与控制结构

模板引擎是报表导出系统的“翻译官”——它将带有占位符和逻辑指令的模板文本，转换为最终可用的文档内容。理解其核心原理，是设计高内聚、低耦合渲染架构的前提。本章从工作流程、变量替换机制、控制结构三个维度拆解模板引擎的底层逻辑。

3.1 模板引擎工作流程

一个标准的模板引擎渲染过程可归纳为四个阶段：加载 → 解析 → 编译 → 执行。每个阶段职责清晰，边界明确。

3.2 变量替换机制

变量替换是模板引擎最基础的功能。其核心逻辑是：在模板中标记变量占位符，渲染时从数据上下文中查找对应值并替换。

3.2.1 占位符语法

不同模板引擎的占位符语法略有差异，但本质都是“定界符 + 变量路径”。

3.2.2 替换流程

1. 定界符识别： 扫描模板字符串，找到所有 {{ 与 }} 之间的内容。
2. 变量路径解析： 将 user.name 拆分为 ['user', 'name'] 路径数组。
3. 上下文查找： 从数据根对象开始，按路径逐层取值。若中间节点为 null 或 undefined，触发默认值或空字符串策略。
4. 类型转换与转义： 将值转为字符串，并根据配置进行 HTML 转义（防 XSS）或原样输出。
5. 替换回填： 将占位符替换为最终字符串。

3.3 控制结构实现：循环与条件

控制结构让模板具备逻辑表达能力，是模板引擎从“简单替换”走向“完整渲染”的关键。下面分别拆解循环和条件的实现机制。

3.3.1 条件结构（if / else）

条件结构在 AST 中表现为一个分支节点。编译时生成条件跳转指令，执行时根据数据上下文决定走哪个分支。

// 模板示例
{{#if user.isAdmin}}
  <span class="admin-badge">管理员</span>
{{else}}
  <span class="user-badge">普通用户</span>
{{/if}}

// 编译后的伪代码
function render(context) {
  if (context.user.isAdmin) {
    return '<span class="admin-badge">管理员</span>';
  } else {
    return '<span class="user-badge">普通用户</span>';
  }
}

3.3.2 循环结构（each / for）

循环结构需要处理集合遍历、循环变量（索引）、循环体重复拼接三个核心问题。

// 模板示例
<ul>
{{#each items}}
  <li>{{index}}. {{name}} - ￥{{price}}</li>
{{/each}}
</ul>

// 编译后的伪代码
function render(context) {
  let result = '<ul>';
  const items = context.items;
  for (let i = 0; i < items.length; i++) {
    const item = items[i];
    result += '<li>' + (i + 1) + '. ' + item.name + ' - ￥' + item.price + '</li>';
  }
  result += '</ul>';
  return result;
}

3.4 架构分离启示

理解模板引擎核心原理后，在报表导出系统中应遵循以下架构原则：

• 模板与数据分离： 模板只描述结构和逻辑，不包含业务数据。数据由上层服务注入。
• 编译与执行分离： 编译结果可缓存，执行时只依赖数据上下文，避免重复解析开销。
• 控制结构最小化： 模板中避免复杂嵌套逻辑，复杂的条件判断应前置到数据准备层。
• 安全转义默认开启： 所有变量替换默认进行 HTML 转义，仅在明确标记为“安全”时输出原始内容。