HTML 通过语义化 data 属性声明数据，JS 统一读取、转换并映射行为，结合事件委托与外部模块化脚本实现完全解耦。
用 dataset 实现 HTML 与 JS 解耦，核心是让 HTML 只负责“声明数据”，JS 只负责“消费数据”，中间不掺杂逻辑、不写内联脚本、不硬编码行为。
HTML 中只放语义化 data 属性
在元素上添加带明确意图的 data- 属性，比如：
-
data-api-endpoint="/api/orders"—— 告诉 JS 这个区域要请求哪个接口 -
data-product-id="789"—— 标识商品唯一性，不依赖 DOM 位置或 class 名 -
data-behavior="toggle-sidebar"—— 表达交互意图，而非写onclick="toggle()"
所有属性名用短横线分隔，小写字母，避免空格和特殊符号。这样既保持 HTML 干净，又为 JS 提供稳定、可预测的数据入口。
JS 中统一读取、类型转换与行为映射
不散落 getAttribute 调用，而是封装成可复用的读取逻辑：
立即学习“Java免费学习笔记（深入）”；
- 用
element.dataset.apiEndpoint直接获取值（自动转驼峰） - 数值类字段如
data-limit="10"，手动转成数字：Number(el.dataset.limit) - 布尔类字段如
data-enabled="true"，用el.dataset.enabled === "true"判断（注意它永远是字符串） - 把
data-behavior的值作为键，查表映射到函数：handlers[el.dataset.behavior]?.(el)
事件委托 + dataset 驱动动态响应
避免给每个按钮单独绑 click，改用父容器监听，靠 dataset 区分操作目标：
- HTML 示例：
<div id="order-list"><button data-order-id="101">取消</button></div> - JS 中：
document.getElementById('order-list').addEventListener('click', e => { if (e.target.matches('button')) { const id = e.target.dataset.orderId; cancelOrder(id); } }); - 新增订单项时，只要保证新按钮有
data-order-id，无需重新绑定事件
配合外部脚本与模块化组织
解耦不只是属性层面，更是工程层面：
- 所有 JS 写在外部文件中，HTML 里只留
<script src="main.js"></script> - 删除所有
onclick、onchange等内联事件属性 - 初始化逻辑统一从 data 属性提取配置：
const config = document.body.dataset.appConfig;，再启动对应模块 - 必要时用
data-module="cart"触发模块加载，实现按需激活
