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*([sS]+?)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 }}<span>Admin</span>{{ /if }}{{ each items as item index }}<li>{{ item.name }}</li>{{ /each }}{{ include 'header.html' }}
关键步骤：
python-flask-vue-creator
下载
创建 Flask + Vue.js 全栈项目，采用单端口架构、uv 依赖管理、结构化日志和生产级前端设计。当用户要求以下操作时触发：创建新的 Flask+Vue 项目、搭建 Web 应用、构建全栈 Python+Vue 应用、初始化 Flask Web 项目、设置单端口 Flask 前后端项目。触发词：新建项目、创建项目、搭建项目、Flask项目、Vue项目。
立即学习“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 }}注入内置变量
