JavaScript模板引擎核心是解析、编译、渲染三步，基础用with+new Function，进阶用词法分析+AST，需沙箱隔离与安全语法设计。
JavaScript 实现模板引擎的核心在于：将模板字符串与数据对象结合，通过解析、编译、渲染三步生成最终 HTML（或任意文本）。自定义语法的关键是控制“占位符识别”和“表达式求值”逻辑，不依赖正则硬匹配，而是用更健壮的解析方式。
一、基础原理：字符串替换 + with + new Function
最简实现利用 with 作用域和动态函数构造，适合学习底层逻辑（注意：with 在严格模式下禁用，生产环境建议用 Proxy 或作用域对象显式访问）：
function compile(template, data) {
// 把 {{ name }} 替换成 data.name，支持简单点号路径如 {{ user.profile.name }}
const code = template
.replace(/{{\s*([\s\S]+?)\s*}}/g, (_, exp) => {
// 简单安全化：只允许字母、数字、点、括号、空格、运算符（避免执行任意代码）
if (/^[a-zA-Z0-9_.\[\]\(\)\s+\-*/%&|^!~?:]+$/.test(exp)) {
return `'+(${exp})+'`;
}
return "''";
})
.replace(/\\n/g, '\\n');
const fn = new Function('data', `with(data){return \`${code}\`;}`);
return fn(data);
}
// 使用
const html = compile("Hello {{ name }}, age: {{ age + 1 }}", { name: "Alice", age: 25 });
// → "Hello Alice, age: 26"
二、进阶做法：词法分析 + AST 编译（推荐）
真正可控、可扩展的自定义语法需跳过正则直替，转为分词（tokenize）→ 构建抽象语法树（AST）→ 生成渲染函数。例如支持：
{{ if user.admin }}Admin{{ /if }}{{ each items as item index }}- {{ item.name }}
{{ /each }}{{ include 'header.html' }}
关键步骤：
网奇企业网站管理系统CWMS2.0 英文版
下载
CWMS 2.0功能介绍：一、 员工考勤系统，国内首创CWMS2.0的企业员工在线考勤系统。二、 自定义URL Rewrite重写，友好的搜索引擎 URL优化。三、 代码与模板分离技术，支持超过5种类型的模板类型。包括：文章、图文、产品、单页、留言板。四、 购物车功能，CWMS2.0集成国内主流支付接口。如：淘宝、易趣、快钱等。完全可媲美专业网上商城系统。五、 多语言自动切换 中英文的说明。六、
立即学习“Java免费学习笔记（深入）”；
- 定义 token 类型：TEXT、OPEN_TAG、CLOSE_TAG、RAW_EXPRESSION、COMMENT 等
- 用状态机扫描模板，产出 token 流（如：
{{ each list }}→{ type: 'OPEN_TAG', name: 'each', args: ['list'] }） - 递归下降解析 token 流，生成嵌套 AST 节点
- 遍历 AST，拼接 JS 字符串（如
if节点 →`if (${cond}) { ${bodyCode} }`），最后用new Function编译
三、安全与沙箱：避免直接 eval，控制作用域
用户输入的模板不可信，必须隔离执行环境：
- 禁用原型链访问：对
data包一层 Proxy，拦截__proto__、constructor等敏感属性 - 白名单属性访问：只允许
data[key]形式，禁止this.xxx或全局变量引用 - 超时保护：用
setTimeout+throw中断长循环（需在生成代码中注入检查） - 替代
with：显式解构const { name, age } = data，或用Object.assign({ }, data)创建干净上下文
四、语法设计建议：平衡易用性与可解析性
自定义语法不是越像 Vue 越好，而是要便于 tokenizer 切分且无歧义：
- 定界符统一：用
{{/}}，避免{%和{{混用（增加状态复杂度） - 指令命名清晰：如
{{#if}}和{{/if}}比{{if}}+{{endif}}更易配对 - 表达式限制：默认只支持读取和简单运算；复杂逻辑应写在预处理函数中，模板里只调用
{{ formatPrice(price) }} - 预留扩展点：比如支持
{{ @partial 'sidebar' }}加载子模板，或{{ $index }}注入内置变量
