实现一个简单的JavaScript模板引擎需解析双大括号变量，支持嵌套属性访问与响应式更新。1. 用正则/{{\s*([\w.]+)\s*}}/g匹配{{ name }}类占位符；2. 通过getValue(data, 'user.name')支持对象路径取值；3. 利用Proxy拦截数据修改并触发视图重渲染；4. 将编译函数与响应式系统结合，在数据变化时自动更新DOM。核心流程为：模板解析→数据绑定→依赖追踪→视图更新，可扩展转义、指令语法等特性。
实现一个简单的 JavaScript 模板引擎并支持数据绑定，核心是解析模板字符串、替换变量占位符，并在数据变化时自动更新视图。可以通过字符串解析 + 依赖追踪来实现基本功能。
1. 基础模板解析（插值替换）
模板通常使用双大括号 {{ }} 表示变量插值。我们可以用正则匹配这些表达式，并替换成对应的数据值。
例如模板：
姓名：{{ name }}，年龄：{{ age }}
通过正则 /{{\s*([a-zA-Z0-9_.]+)\s*}}/g 匹配变量名，然后动态替换。
立即学习“Java免费学习笔记（深入）”；
基础实现：
function compile(template, data) { return template.replace(/{{\s*([a-zA-Z0-9_.]+)\s*}}/g, (match, key) => { return data[key] !== undefined ? data[key] : ''; }); }调用：compile(template, { name: '张三', age: 25 }) 返回填充后的 HTML 字符串。
2. 支持嵌套属性访问
当数据结构为嵌套对象时，如 { user: { name: '李四' } }，需要支持 {{ user.name }} 这样的路径访问。
可以将 key 按 . 分割，逐级取值：
function getValue(obj, path) { return path.split('.').reduce((o, k) => o && o[k], obj); } // 替换逻辑中使用： return getValue(data, key) || '';3. 实现响应式数据绑定
要让数据变化时自动更新 DOM，需监听数据变化。可通过 Object.defineProperty 或 Proxy 实现响应式系统。
使用 Proxy 的例子：
function reactive(data, callback) { return new Proxy(data, { set(target, key, value) { target[key] = value; callback(); // 数据变化时重新渲染 return true; } }); }将数据包装后，在修改属性时触发视图更新。
4. 结合模板与响应式系统
将模板编译和响应式结合：
function createTemplateEngine(el, template, data) { const render = () => { el.innerHTML = compile(template, data); }; const proxy = reactive(data, render); render(); // 初始渲染 return proxy; // 返回可操作的响应式数据 }使用方式：
const app = document.getElementById('app'); const engine = createTemplateEngine(app, template, { name: '张三', age: 25 }); // 修改数据，视图自动更新 setTimeout(() => { engine.name = '李四'; // 页面内容自动变化 }, 1000);基本上就这些。简单模板引擎不复杂，但容易忽略边界情况，比如转义、表达式支持、if/for 语法等。进阶可加入 AST 解析、虚拟 DOM 等机制，但核心思路一致：解析模板 → 绑定数据 → 响应变化。
