原生HTML项目重构的核心是识别并消除“坏味道”代码，从HTML结构入手做最小安全重构，解耦JS与DOM，确保可维护性。
原生 HTML 项目不是“不能用”，而是“不敢动”——改一处样式，三处布局崩；加一个交互，全局 window 变量又多挂一个监听器；上线前查 console.log 残留，发现删了七次还漏两个。重构不是为了炫技，是让下次改需求时，你还能在 15 分钟内定位到问题模块。
识别 HTML 里的“坏味道”代码
重构第一步不是写新代码，是看懂旧代码在“喊什么”。HTML 本身不执行逻辑，但它的结构、属性和嵌套方式直接暴露维护风险：
-
id大量重复或语义模糊（如id="div1"、id="box22"），说明 DOM 查询和 JS 绑定极易出错 - 内联样式密集出现（
style="margin: 0; padding-left: 20px; color: #333;"），意味着 CSS 耦合严重，响应式适配几乎不可能增量推进 -
script标签堆在body底部且无模块划分，函数之间靠window.xxx全局通信，调试时找不到源头 - 表单控件缺失
name或id，或用onclick="submitForm()"绑定行为，阻断自动化测试和无障碍访问
从 HTML 结构入手做最小安全重构
别一上来就重写成 Vue 组件。先确保 HTML 自身具备可维护基线，这步做完，后续框架迁移成本能降 60%：
- 把所有硬编码 class 名统一为 BEM 风格，比如把
class="btn primary"改成class="button button--primary"，避免未来 CSS 冲突时疯狂加!important - 用
data-*属性替代自定义属性（如把role="tab"换成data-role="tab"），既保留语义又不干扰 ARIA 解析 - 将重复的 DOM 片段（如列表项、卡片结构）抽成
<template></template>，哪怕暂时不用 JS 渲染，也比复制粘贴 5 次强 - 给每个
<form></form>补全autocomplete和novalidate属性，明确告知浏览器“这个表单由 JS 控制校验”，避免默认行为干扰
JS 与 HTML 协作层必须解耦
原生 HTML 项目最痛的点，是 JS 和 DOM 形成“共生寄生”关系：删一个 div，三个 querySelector 报错；改一个 class，五个事件监听器失效。解耦不是删 JS，而是划定边界：
立即学习“前端免费学习笔记（深入）”；
- 禁止在 HTML 中写
onclick、onchange等内联事件处理器，全部收归到统一初始化函数中，用document.addEventListener('click', handler, true)做事件委托 - 用
data-js-前缀标记需要 JS 控制的节点（如data-js-tabs-container），JS 层只认这个约定，不依赖 class 或 id - 把配置类信息从 HTML 移到 JSON script 标签里：
<script type="application/json" id="app-config">{"apiUrl": "/v1/data", "timeout": 5000}</script>，JS 用JSON.parse(document.getElementById('app-config').textContent)读取 - 所有定时器、事件监听器、WebSocket 连接，必须在组件销毁（如页面跳转前）调用显式清理函数，否则内存泄漏无法避免
重构后验证是否真“安全”的关键检查点
改完 HTML 和 JS 关系后，别急着庆祝。以下三点不满足，说明重构只是“看起来整洁”，实际仍埋雷：
- 打开 DevTools 的 Elements 面板，删掉任意一个
data-js-节点，页面其他功能是否完全不受影响？如果某处按钮立刻失灵，说明 JS 还在强依赖 DOM 结构 - 运行
document.querySelectorAll('[style]').length，结果应为 0 —— 所有样式必须走 CSS，内联 style 是技术债而非临时方案 - 把整个
的 innerHTML 替换为一段静态 HTML 字符串再恢复，所有交互是否照常工作？这是检验 JS 是否真正“不依赖初始渲染时机”的硬指标
重构最难的不是写代码，是判断哪部分“现在还不能动”。比如某个 Cesium 地图容器被 17 个 script 标签交叉修改，就先用 data-js-cesium-root 锁定入口，其余逻辑暂不动——留白比错改更安全。
