如何制作json模板引擎

如何制作一个轻量级JSON模板引擎：从原理到实践

引言：为什么需要JSON模板引擎？

在前后端分离架构中,JSON是数据交互的核心格式，但实际开发中，我们常遇到这样的场景：后端返回的JSON数据需要动态填充到前端模板中（如渲染HTML页面、生成配置文件等），而前端又希望用更简洁、可维护的方式处理这种数据绑定，一个轻量级的JSON模板引擎就能派上用场——它允许我们用模板语法描述数据结构，再通过JSON数据动态生成目标内容，既灵活又高效。

本文将带你从零开始,手写一个轻量级JSON模板引擎，核心原理、语法设计、代码实现到性能优化，一步步拆解这个过程。

核心原理：模板引擎的工作机制

无论多复杂的模板引擎,其核心机制都可以拆解为三个步骤：

1. 模板解析：将模板字符串（如"Hello, {{name}}!"）解析成抽象语法树（AST），即计算机可理解的指令结构。
2. 数据绑定：将JSON数据（如{"name": "Alice"}）与AST中的变量、表达式等节点关联起来。
3. 结果渲染：遍历AST，执行指令（如变量替换、循环、条件判断等），最终生成渲染后的字符串。

模板引擎就是“模板+数据→结果”的转换器，关键在于如何设计模板语法和解析逻辑。

模板语法设计：简洁易用是核心

模板语法是模板引擎的“用户界面”，设计时需遵循两个原则：直观性（开发者一眼能看懂）和扩展性（支持后续添加复杂功能），我们以常见的作为占位符符号，设计以下基础语法：

变量替换

用{{变量名}}直接替换JSON中的对应值。

• 示例模板："User: {{name}}, Age: {{age}}"
• 示例JSON：{"name": "Bob", "age": 25}
• 渲染结果："User: Bob, Age: 25"

条件判断

支持{{#if 条件}}...{{else}}...{{/if}}，条件为真时渲染if块，否则渲染else块。

• 示例模板："Status: {{#isActive}}Active{{else}}Inactive{{/isActive}}"
• 示例JSON：{"isActive": true}
• 渲染结果："Status: Active"

循环遍历

支持{{#each 数组}}...{{/each}}，遍历数组并渲染每项数据。

• 示例模板："Items: {{#each items}}- {{this}}{{/each}}"
• 示例JSON：{"items": ["Apple", "Banana", "Cherry"]}
• 渲染结果："Items: - Apple- Banana- Cherry"

注释

支持{{!-- 注释内容 --}}不会被渲染，方便模板维护。

代码实现：从零搭建模板引擎

基于上述语法,我们用JavaScript实现一个轻量级模板引擎，核心是“解析器”和“渲染器”两部分，重点处理模板字符串到AST的转换，以及AST到结果的生成。

定义AST节点类型

AST由不同类型的节点组成,我们先定义基础节点类型：

// 文本节点：直接输出的文本内容
class TextNode {
  constructor(content) {
    this.type = 'text';
    this.content = content;
  }
}
// 变量节点：需要替换的变量，如{{name}}
class VariableNode {
  constructor(name) {
    this.type = 'variable';
    this.name = name; // 变量名，如"name"
  }
}
// 条件节点：if-else逻辑
class IfNode {
  constructor(test, consequent, alternate) {
    this.type = 'if';
    this.test = test; // 条件表达式，如"isActive"
    this.consequent = consequent; // if块内容（节点数组）
    this.alternate = alternate; // else块内容（节点数组）
  }
}
// 循环节点：each循环
class EachNode {
  constructor(array, body) {
    this.type = 'each';
    this.array = array; // 数组变量名，如"items"
    this.body = body; // 循环体内容（节点数组）
  }
}

模板解析器：将字符串转为AST

解析器是模板引擎的核心,我们需要将模板字符串拆分成一个个“令牌”（Token），再根据令牌生成AST，这里用递归下降法实现解析，逻辑清晰且易于扩展。

步骤1：词法分析（Tokenization）

将模板字符串拆成Token数组,包括文本、变量、条件、循环等类型。

function tokenize(template) {
  const tokens = [];
  let current = 0; // 当前解析位置
  while (current < template.length) {
    const char = template[current];
    // 跳过空白字符（空格、换行等）
    if (/\s/.test(char)) {
      current++;
      continue;
    }
    // 处理文本节点（非{{}}内容）
    if (char !== '{') {
      let value = '';
      while (current < template.length && template[current] !== '{') {
        value += template[current];
        current++;
      }
      tokens.push({ type: 'text', value });
      continue;
    }
    // 处理{{}}内容
    if (template.startsWith('{{', current)) {
      current += 2; // 跳过"{{"
      let value = '';
      while (current < template.length && !template.startsWith('}}', current)) {
        value += template[current];
        current++;
      }
      if (current >= template.length) {
        throw new Error('Unclosed {{}}');
      }
      current += 2; // 跳过"}}"
      value = value.trim();
      if (value.startsWith('#if')) {
        tokens.push({ type: 'if', test: value.substring(3).trim() });
      } else if (value.startsWith('/if')) {
        tokens.push({ type: '/if' });
      } else if (value.startsWith('#each')) {
        tokens.push({ type: 'each', array: value.substring(5).trim() });
      } else if (value.startsWith('/each')) {
        tokens.push({ type: '/each' });
      } else if (value.startsWith('!--')) {
        // 注释，直接跳过
        while (!template.startsWith('--}}', current)) {
          current++;
        }
        current += 4;
      } else {
        tokens.push({ type: 'variable', name: value });
      }
    }
  }
  return tokens;
}

步骤2：语法分析（AST Generation）

根据Token数组递归生成AST,处理嵌套的if和each块。

function parse(tokens) {
  let current = 0;
  const ast = { type: 'root', body: [] };
  function walk() {
    let token = tokens[current];
    if (!token) return null;
    // 处理文本节点
    if (token.type === 'text') {
      current++;
      return new TextNode(token.value);
    }
    // 处理变量节点
    if (token.type === 'variable') {
      current++;
      return new VariableNode(token.name);
    }
    // 处理if节点
    if (token.type === 'if') {
      const ifNode = new IfNode(token.test, [], []);
      current++;
      // 解析if块内容
      while (current < tokens.length && tokens[current].type !== '/if') {
        ifNode.consequent.push(walk());
      }
      if (current >= tokens.length || tokens[current].type !== '/if') {
        throw new Error('Unclosed #if');
      }
      current++; // 跳过"/if"
      // 检查是否有else块（简化版：假设else紧跟/if）
      if (current < tokens.length && tokens[current].type === 'else') {
        current++;
        while (current < tokens.length && tokens[current].type !== '/if') {
          ifNode.alternate.push(walk());
        }
        current++; // 跳过"/if"
      }
      return ifNode;
    }
    // 处理each节点
    if (token.type === 'each') {
      const eachNode = new EachNode(token.array, []);
      current++;
      // 解析循环体内容
      while (current < tokens.length && tokens[current].type !== '/each') {
        eachNode.body.push(walk());
      }
      if (current >= tokens.length || tokens[current].type !== '/each') {
        throw new Error('Unclosed #each');
      }
      current++; // 跳过"/each"
      return eachNode;
    }
    throw new Error(`Unexpected token: ${token.type