从零构建轻量级 JavaScript 模板引擎：核心原理与实现

苏见山

发布时间：2026-10-13 | 3人浏览过

原创

在 Web 前端开发中，虽然存在众多成熟的模板库，但理解其底层原理对于优化性能和处理特殊场景至关重要。本文将深入剖析如何利用原生 JavaScript 的正则表达式匹配、字符串处理以及 new Function 动态编译技术，从零构建一个极简的模板引擎。该方案仅需不到 20 行代码即可支持基础数据替换与循环控制结构，帮助开发者掌握客户端模板渲染的核心机制。

目标与架构思路

我们的目标是构建一个名为 TemplateEngine 的函数，它接收两个参数：HTML 模板字符串和包含数据的对象。最终返回渲染后的 HTML 字符串。核心挑战在于如何处理模板中的占位符（如 <%name%>）以及如何支持更复杂的逻辑结构（如 if 判断或 for 循环），同时确保生成的代码能在浏览器环境中安全高效地执行。

第1步：定义基础数据结构与占位符识别

目的：建立模板函数的基本骨架，并识别出需要被替换的数据变量。

入口：定义一个高阶函数或立即执行函数块。

动作：首先确定模板标记语法。我们选用 <% 和 %> 作为包裹变量的符号。使用正则表达式 /<%([^%>]+)?%>/g 来全局匹配这些标签。其中 exec 方法配合 while 循环可以遍历所有匹配项，获取变量名及其在字符串中的位置索引。

var TemplateEngine = function(tpl, data) {
  var re = /<%([^%>]+)?%>/g;
  // 后续逻辑将在此处展开
}

var template = '<p>Hello, my name is <%name%>. I\'m <%age%> years old.</p>';
// 预期输出: <p>Hello, my name is Krasimir. I'm 29 years old.</p>

第2步：处理简单属性替换与嵌套对象限制

目的：验证初步替换逻辑，并暴露直接访问嵌套对象的难点。

参数：数据对象 data。

动作：最简单的实现方式是利用 String.prototype.replace。但在实际应用中，数据往往具有层级结构，例如 { profile: { age: 29 } }。如果模板中直接使用 <%profile.age%>，简单的键值映射会失败，因为 JS 对象不支持通过点号字符串直接访问属性。为此，我们需要在模板语法中显式使用 this 关键字，即 <%this.profile.age%>，这为后续动态编译函数埋下伏笔。

第3步：构建编译中间代码（AST 思想雏形）

目的：将 HTML 文本与 JavaScript 表达式分离，准备生成可执行代码。

参数：模板字符串 html，正则规则，游标 cursor。

动作：为了实现高性能和灵活性，我们不直接操作 DOM 或进行实时替换，而是“编译”生成一段 JavaScript 代码。这段代码的逻辑是：创建一个数组 r，将静态文本 push 进数组，遇到变量时则将 this.xxx 直接作为表达式 push 进去。最后调用 r.join('') 拼接结果。

为了区分纯文本和 JS 代码，我们需要引入一个布尔标记 js。同时，必须对文本中的双引号进行转义，防止生成的代码出现语法错误。

var TemplateEngine = function(html, options) {
  var re = /<%([^%>]+)?%>/g,
    code = 'var r=[];\n',
    cursor = 0;
  
  var add = function(line, js) {
    // 如果是 JS 代码片段，直接追加到代码流
    if(js) {
      code += line + '\n';
    } else {
      // 如果是纯文本，转义引号后 push 到数组
      code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
    }
    return add;
  }

  while(match = re.exec(html)) {
    // 1. 添加匹配项之前的静态文本
    add(html.slice(cursor, match.index));
    // 2. 添加匹配到的 JS 表达式 (match[1] 是捕获组)
    add(match[1], true);
    cursor = match.index + match[0].length;
  }
  // 3. 处理末尾剩余文本
  add(html.substr(cursor, html.length - cursor));
  
  code += 'return r.join("");';
  console.log(code); // 调试查看生成的函数体
  return html;
}

第4步：启用动态函数编译与上下文绑定

目的：将编译好的字符串转化为可执行的 JavaScript 函数。

动作：利用浏览器内置构造函数 new Function(arg1, ..., argN, body)。我们将上一步生成的 code 变量作为函数体传入。为了确保生成的函数能正确访问传入的数据对象，我们在调用时使用 .apply(options)，这使得函数内部的 this 指向传入的 options 对象，从而完美解析 <%this.name%>。

// ... 前面的解析逻辑不变 ...
code += 'return r.join("");';
return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);

第5步：支持复杂控制流（if/for）

目的：让模板引擎具备循环列表和条件渲染的能力。

参数：新增用于检测控制流关键字的正则表达式 reExp。

动作：当模板中出现 <%for(...)%> 或 <%if(...)%> 时，上述简单逻辑会将整个语句误认为是一个变量进行 push，导致语法报错。我们需要识别这些控制流关键字。如果检测到语句以 if, for, else, switch, break, { 开头，则将其作为独立的 JS 语句直接追加到 code 中，而不是包裹在 r.push() 里。

var reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g;

var add = function(line, js) {
  if(js) {
    // 检查是否为控制流语句
    code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n';
  } else {
    code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '';
  }
  return add;
}

通过这一改进，模板可以轻松处理以下场景：

var template = 
  'Skills:' + 
  '<%for(var index in this.skills) {%>' + 
  '<a href="#"><%this.skills[index]%></a>' +
  '<%}%>';

第6步：终极精简版实现

结果：经过逻辑合并与代码压缩，最终核心逻辑可浓缩至 15 行左右。该版本兼顾了可读性与功能完整性，能够处理嵌套属性、循环及条件分支。

var TemplateEngine = function(html, options) {
  var re = /<%([^%>]+)?%>/g,
    reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
    code = 'var r=[];\n',
    cursor = 0;
  var add = function(line, js) {
    js ? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
      (code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
    return add;
  }
  while(match = re.exec(html)) {
    add(html.slice(cursor, match.index))(match[1], true);
    cursor = match.index + match[0].length;
  }
  add(html.substr(cursor, html.length - cursor));
  code += 'return r.join("");';
  return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
}

总结与注意事项

本教程展示了一种基于 new Function 的极简模板引擎实现。它利用了 JavaScript 闭包、正则解析和动态编译的特性，避免了引入大型依赖库的开销。在实际生产环境中使用类似逻辑时，需特别注意 new Function 带来的 XSS 风险，建议对输入数据进行严格的 sanitization（消毒）。此外，对于复杂的项目，推荐评估 Vue, React 或轻量级的 Mustache/Hogan.js 等成熟方案，以获得更好的稳定性和生态支持。

以上就是手写轻量级 JavaScript 模板引擎的详细内容，更多关于前端模板引擎优化的资料请关注本站其它相关文章！