核心目标是将数据与模板结合生成html，通过解析语法、变量替换和逻辑控制实现渲染。采用{{}}插值和执行代码的语法设计，编译模板为javascript函数，支持字符串拼接输出；引入转义机制防止xss，区分转义与非转义插值；利用缓存避免重复编译提升性能；最终实现轻量、安全、高效的模板引擎。
JavaScript模板引擎的核心目标是将数据与模板字符串结合，生成最终的HTML或文本内容。设计一个简单的模板引擎并不复杂，关键在于解析模板语法、处理变量替换和逻辑控制，并安全地渲染数据。
模板语法设计
一个清晰的模板语法能让开发者更直观地编写模板。常见做法是使用定界符包裹表达式，比如双大括号 {{ }} 表示变量输出，而 用于执行逻辑代码（如循环、条件判断）。
例如：
- {{ users[i].name }}
这种设计借鉴了早期的 Underscore.js 或 EJS 模板风格，易于理解且可扩展。
立即学习“Java免费学习笔记（深入）”；
编译过程实现
模板引擎通常会将模板字符串编译成可执行的JavaScript函数。这个函数接收数据作为参数，返回渲染后的字符串。
基本思路是：
- 用正则匹配 和 {{ ... }} 语法
- 将模板拆分为字符串片段和代码片段
- 拼接成一个 Function 构造的函数体
- 在函数中通过字符串累加（或数组 join）构建结果
示例转换逻辑：
// 原始模板片段：
Hello {{ name }}!
18) { %>AdultMinor
会被转换为：
function(data) {let out = '';
out += 'Hello ' + data.name + '!';
if (data.age > 18) {
out += 'Adult';
} else {
out += 'Minor';
}
return out;
}
安全与转义机制
直接插入变量可能带来XSS风险。应提供两种插值方式：
- {{ }}：自动HTML转义（如 & 转为 &）
- {{! }} 或 {{= }}：不转义，用于可信内容
转义函数可以这样实现：
function escape(html) {return String(html)
.replace(/&/g, '&')
.replace(/, '<')
.replace(/>/g, '>')
.replace(/"/g, '"');
}
缓存与性能优化
频繁编译相同模板会影响性能。建议对已编译的模板函数进行缓存，以模板字符串为键，避免重复解析。
可以暴露一个 compile 方法：
const template = compile('Hello {{ name }}
');const html = template({ name: 'Alice' });
多次调用时复用编译结果，提升运行效率。
基本上就这些。一个轻量级模板引擎不需要太多功能，重点是语法清晰、渲染高效、输出安全。按需支持变量插入、流程控制和过滤器即可满足大多数场景。不复杂但容易忽略细节，比如作用域隔离和错误定位。如果追求极致性能，还可以预编译模板为字符串函数。基本上就这些。
