应避免用innerHTML拼接结构化视图，而采用<template>复用、data-*属性驱动状态、classList控制样式、slot机制嵌套、事件委托清理监听器，实现DOM复用与状态解耦。
视图变换别硬写HTML字符串拼接
直接用 innerHTML 拼接大量结构化的视图（比如带条件分支的表格、多状态卡片、嵌套表单）极易出错：引号嵌套混乱、标签闭合遗漏、变量注入 XSS 风险、后续 DOM 更新难追踪。模板不是“把 HTML 写进 JS 里”，而是把结构和逻辑分离。
- 用
<template>标签定义可复用片段，浏览器不渲染它，JS 可安全 cloneNode(true) - 避免
document.write()或insertAdjacentHTML()动态插入——它们绕过 DOM 构建流程，破坏事件绑定和 Vue/React 等框架的响应链 - 若需动态内容，优先用
textContent设置文本，setAttribute()设置属性，而非拼接 HTML 字符串
用 data-* 属性驱动模板复用，而不是 if/else 堆逻辑
复杂视图往往对应多个状态（编辑/预览/禁用/加载中），靠 JS 里一堆 if (state === 'edit') {...} 切换 DOM 很脆弱。真正可维护的做法是让模板本身携带状态语义。
- 给模板根元素加
data-view="card"、data-state="loading"等属性，CSS 用属性选择器控制显隐：[data-state="loading"] .content { display: none; } - JS 层只负责切换
data-state值，不操作具体子节点——减少 DOM 查询和重排开销 - 避免在模板里写
<div class="btn {{active ? 'active' : ''}}">这类模板语法，原生 HTML 不支持；改用classList.toggle('active', active)控制
嵌套视图用 slot 模式，别用 innerHTML 替换整个子树
当一个视图包含可变区域（如卡片头部、主体、操作栏），直接替换 innerHTML 会销毁子组件事件监听器、中断动画、清空输入框焦点。slot 是更可控的“插槽”机制。
- 用
<div class="card"><slot name="header"></slot><slot name="body"></slot></div>定义容器 - 实例化时用
appendChild()把已存在的 DOM 节点（比如一个<h3>或<form>）塞进对应 slot，而非生成新字符串 - 需要动态更新 slot 内容时，只操作该 slot 的 childNodes，不影响外层容器的其他部分
模板更新后必须手动清理旧事件监听器
用模板重新渲染某块区域时，如果旧节点被 replaceChild 或 innerHTML 清掉，但之前绑定的事件监听器没移除，就会造成内存泄漏和重复触发——尤其在频繁切换视图的编辑器、仪表盘中很常见。
立即学习“前端免费学习笔记（深入）”；
- 每次更新前，先调用
element.querySelectorAll('button, input, a')找到所有可交互元素，再对每个调用.removeEventListener() - 更稳妥的方式是用事件委托：把监听器统一挂到容器上，用
event.target.matches('.save-btn')判断来源，避免逐个绑定 - 如果用了
classList.toggle()切换模式（如编辑/预览），确保对应按钮的 click 处理函数也做了状态判断，防止预览态下仍响应编辑操作
原生模板管理的关键不在“怎么写得漂亮”，而在“怎么换得干净”。DOM 节点复用、事件生命周期、状态与结构解耦，这三件事漏掉任何一环，复杂视图一动就崩。
