不能直接用 innerHTML + 字符串拼接做模板解析，因其会丢失事件绑定、破坏 DOM 状态、触发重排、导致 XSS；应使用 template 标签配合 cloneNode(true) 安全克隆并遍历文本节点替换变量。
为什么不能直接用 innerHTML + 字符串拼接做模板解析
因为会丢掉事件绑定、破坏已存在的 DOM 状态（比如 input 的光标位置、video 播放进度）、触发多次重排，并且无法安全处理用户输入——{{ user.name }} 若含 <script> 片段，直接插入等于执行 XSS。
常见错误现象包括：表单控件值突然清空、点击事件失效、控制台报 Failed to execute 'insertBefore' on 'Node'、渲染后样式错乱。
- 浏览器对
innerHTML赋值会强制销毁并重建整个子树，所有原生事件监听器丢失 - 动态参数若来自用户输入，未转义就插入会导致 HTML 结构被截断或脚本注入
- 嵌套循环或条件逻辑无法通过简单正则一次匹配完成，容易漏替换或错位
template 标签 + content.cloneNode(true) 是安全起点
HTML 原生 <template> 不会被解析或渲染，内容保留在文档片段中，适合做模板容器。关键不是“怎么放”，而是“怎么取出来再安全挂载”。
使用场景：编辑器需预览模板效果、支持实时参数替换、允许用户修改变量名但不破坏结构。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 必须用
template.content.cloneNode(true)，不能用template.innerHTML—— 后者会丢失<slot>、<svg>子节点的命名空间信息 - 克隆后需遍历所有文本节点，只在文本节点内做变量替换（避免误改属性值或事件处理器）
- 对
textContent中的{{ key }}做转义后再赋值，例如用document.createTextNode(value.replace(/&/g, '&').replace(/, '<'))
如何支持 {% if %} 和 {% for %} 这类逻辑语法
纯正则无法可靠解析嵌套结构，比如 {% if a %}{% if b %}...{% endif %}{% endif %}。必须走 AST 解析或分阶段处理。
推荐做法是把逻辑块预先编译成函数，而不是运行时反复正则匹配。
- 第一步：用正则提取所有
{% ... %}块，记录起始/结束位置和类型（if、for、endif），构建扁平指令列表 - 第二步：按位置顺序遍历指令，用栈匹配
if/endif，生成带作用域的 JS 代码字符串（如if (data.a) { ... }） - 第三步：用
Function('data', 'return `' + compiledTemplate + '`')编译（注意仅限可信上下文，不可用于用户上传模板） - 性能影响：首次编译慢，但结果函数可缓存；重复渲染时比每次正则快 5–10 倍
参数作用域与嵌套数据访问怎么不出错
用户常写 {{ user.profile.name }} 或 {{ items[0].title }}，但直接 eval 或 with 有安全与性能问题。
真正稳定的做法是手动实现路径取值，不依赖 JS 执行环境。
- 把
user.profile.name拆成['user', 'profile', 'name']，逐级检查data[key] !== undefined - 数组索引如
[0]需额外识别，正则建议用/{{\s*([a-zA-Z_$][\w$]*(?:\.[a-zA-Z_$][\w$]*|\[\d+\])*)\s*}}/g - 遇到不存在字段时，返回空字符串而非
undefined，避免模板中出现"undefined"文本 - 禁止支持任意表达式（如
{{ a + b }}），否则必须引入沙箱，复杂度陡增
data- 属性、src 等属性值里的 {{ }} 也需要替换，但不能用同一套文本节点遍历逻辑处理**——它们得单独提取属性，再对属性值做解析，否则会漏掉。 
