选对模板方式可省70%结构编写时间，需用document.createElement('template')避免innerHTML漏洞，cloneNode(true)复制内容，外置逻辑样式，防白屏加catch，勿在DOMContentLoaded前操作，对象数据改用data属性传递。
直接用模板能省掉 70% 以上重复写结构的时间，但前提是选对方式、避开加载失败和变量未定义这类硬伤。
用 document.createElement('template') 避免字符串拼接漏洞
很多人一上来就用 innerHTML += `...` 拼列表，结果 XSS 风险、引号转义错乱、DOM 重排频繁全来了。原生 template 元素不渲染、可复用、自带作用域隔离，是轻量动态渲染最稳的起点。
- 必须用
content.cloneNode(true)复制，直接appendChild(template.content)会移走原节点，第二次就空了 - 里面不能写
<script></script>或<style></style>，它们不会执行；需要逻辑或样式请外置 - 适合单次渲染几十条以内的列表，比如后台侧边栏菜单、弹窗表单项
用 fetch() + innerHTML 加载外部 HTML 片段时防白屏
手动引入 navbar.html 或 footer.html 看起来干净，但网络失败或 404 会导致整块区域空白，且没 fallback 机制。
- 务必加
.catch()，哪怕只塞个占位文字：document.querySelector('#navbar').innerHTML = '<!-- loading -->' - 避免在
DOMContentLoaded之前调用，否则querySelector返回null - 如果片段含内联脚本（比如初始化某个按钮），得用
eval()或重新注入，但极不推荐——应把行为抽成独立函数，在加载完再显式调用
模板字符串里别直接插对象，JSON.stringify() 也不行
ES6 模板字符串写 `<div data-item="${item}">` 看似方便，但 <code>item 是对象时会变成 [object Object]；用 JSON.stringify(item) 又会把双引号、斜杠全转义，破坏 HTML 结构。
立即学习“前端免费学习笔记（深入）”；
- 只插原始类型：
item.id、item.name、item.price?.toFixed(2) - 需要整个对象传给 JS 逻辑？改用
data-属性存 ID，再用 ID 查表，而不是把 JSON 塞进 HTML - 真要序列化传输，请走
dataset+JSON.parse()，但仅限调试或低频场景
真正卡住效率的从来不是“会不会用模板”，而是没意识到：模板只是容器，数据来源、错误边界、更新时机这三处没对齐，再好的模板也白搭。
