HTML模板仅负责结构占位与数据插值，禁止内联JS表达式或函数调用；动态逻辑须由外部JS控制，通过data-*属性或script[type="application/json"]安全传递配置与状态，确保SSR/CSR一致及解耦。
模板里不能直接写 JS 表达式或函数调用
HTML 模板不是执行环境，innerHTML 或服务端渲染时插入的字符串里写 {{ user.name.toUpperCase() }} 或 会直接变成文本或报错。浏览器只解析标签和属性，不执行 JS。所有动态逻辑必须由外部 JS 控制，模板只负责结构占位和数据插值。
常见错误是把模板当“轻量 JS 运行时”用：在 EJS 中写 100) { %> 看似可行，但一旦模板被静态导出、缓存或 SSR 与 CSR 不一致，条件判断就可能失效。真正解耦的做法是让模板只接收已计算好的布尔值：data-is-expensive="true"，JS 层统一处理业务逻辑。
- 服务端模板（如 Nunjucks、EJS）中，所有数据预处理必须在 render 前完成，模板内只做纯数据映射
- 客户端模板（如 Handlebars）禁止在
{{ }}里调用方法，只允许访问对象属性链：{{ user.profile.avatar }} - 若需格式化，封装为独立 filter 函数，而非内联表达式：
{{ price | currency }}，且 filter 必须返回纯字符串
data-* 属性是模板向 JS 传递配置的唯一安全通道
模板生成的 HTML 通过 data- 属性注入参数，JS 在运行时读取，这是解耦的关键枢纽。它比全局变量、window 属性或内联 script 更可控、可预测。
注意命名必须全小写加连字符：data-api-url → JS 中读作 el.dataset.apiUrl；写入必须用 setAttribute，不能直接赋值 dataset.xxx；值永远是字符串，数值/布尔需手动转换：Number(el.dataset.limit)、el.dataset.enabled === "true"。
立即学习“前端免费学习笔记（深入）”；
- 避免在模板里拼接 JSON 字符串到
data-config，服务端输出前必须 HTML 实体编码，客户端用JSON.parse(el.getAttribute('data-config'))+ try/catch 包裹 - 不要用
data-id="{{ id }}"传敏感 ID，尤其当模板由用户输入驱动时——这等于把数据库主键裸露在 DOM 中 - 多个配置项建议聚合为单个
data-options，而不是散列十几个data-属性，减少 DOM 膨胀
script[type="application/json"] 是状态注入的黄金标准
服务端预渲染时，初始状态必须塞进 <script type="application/json" id="__INITIAL_DATA__">，而不是 <script>window.__DATA__ = {...}</script>。前者是 DOM 节点，后者是可执行脚本，前者不会因未转义字符中断，也不会被 XSS 过滤器误杀。
关键点在于：客户端 JS 必须从该节点的 textContent 读取，而非 innerHTML；服务端序列化必须用 JSON.stringify() + 双重转义（或 serialize-javascript 库），否则遇到 "、'、</script> 会截断。
- React/Vue hydration 失败，90% 源于服务端注入的 JSON 被浏览器提前截断，检查
document.getElementById('__INITIAL_DATA__').textContent是否完整 - 不要把状态挂到
window上再由 JS 读取——如果后续某个库覆盖了window.__DATA__，hydration 就彻底不可恢复 - 同一页面多个组件共用状态？用不同
id区分：id="cart-data"、id="user-data"，避免冲突
模板结构必须与 JS 生命周期解耦
模板不应假设 JS 何时加载、是否加载成功。一个按钮写成 <button onclick="submitForm()"> 就绑死了执行时机和作用域；正确做法是留空行为，靠 JS 主动绑定：<button data-behavior="submit-form">，并在 document ready 后统一委托监听。
更深层的解耦是：模板只定义“这里要放一个表单”，不指定“这个表单提交到 /api/v1/order”。URL、验证规则、错误提示文案等全部由 JS 配置对象控制，模板只暴露 data-module="order-form" 这样的钩子。
- 新增组件时，只要保证 HTML 结构含对应
data-module和必要data-属性，JS 就能自动激活，无需改任何绑定代码 - 服务端可对不同设备返回不同模板（如移动端精简版），只要
data-接口契约不变，JS 逻辑完全复用 - 最易被忽略的是时间字段：服务端必须冻结为 ISO 字符串（如
data-created-at="2026-07-01T07:29:00Z"），否则客户端 hydration 时时间戳差异会触发不必要的 re-render
