data-*属性是前端模块化动态加载的核心配置载体，浏览器原生支持、js可直接读取，需配合白名单校验、路径规范化、初始化防重及资源清理等边界控制机制。
data-* 属性是动态加载模块的通信桥梁
HTML 的 data-* 属性不是装饰用的，它是前端模块化加载时最轻量、最可控的配置载体。浏览器原生支持，无需额外解析库，JS 可直接读取，且不会干扰渲染或语义。
常见错误是把配置塞进 class 或 id 里（比如 class="module-chart type-line data-src=/api/metrics"），这既难维护又易冲突。正确做法是显式声明：<div data-module="chart" data-refresh="30000"></div>。
-
data-module必须唯一标识模块类型（如"chart"、"table-filter"），用于后续匹配加载逻辑 - 路径类配置统一用
data-src，避免混用data-url/data-api等变体，减少判断分支 - 数值型配置（如轮询间隔）建议存为数字字符串（
"30000"），JS 中用parseInt()转换，比JSON.parse()更安全
模块加载器需按 data-module 值做白名单校验
不能见到 data-module 就加载——这是 XSS 和资源滥用的温床。必须预设可加载模块白名单，未注册的值直接跳过。
示例逻辑片段：
const MODULE_MAP = {
'chart': () => import('./modules/chart.js'),
'table-filter': () => import('./modules/table-filter.js')
};
<p>document.querySelectorAll('[data-module]').forEach(el => {
const modName = el.dataset.module;
if (!MODULE_MAP[modName]) return; // 拦截非法模块名
MODULE_MAP[modName]().then(m => m.init(el));
});</p>
- 白名单必须硬编码或由构建时注入，禁止从服务端动态返回并
eval执行 -
import()返回 Promise，需处理加载失败（如显示占位错误提示，而非静默失败） - 模块
init()函数必须接收当前 DOM 元素作为参数，避免内部再查一次document.querySelector
data-src 路径解析要考虑相对路径上下文
data-src 值是相对路径时，它相对于当前 HTML 文档 URL，不是相对于模块 JS 文件位置。这点常被忽略，导致 API 请求 404。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
例如页面在 /dashboard/overview.html，而 会请求 /dashboard/metrics.json，但模块 JS 可能在 /js/modules/chart.js 下。
- 服务端接口路径建议统一用绝对路径（
），避免歧义 - 若必须用相对路径，可在加载器中用
new URL(el.dataset.src, document.baseURI)规范化 - 不推荐用
<base href>干预全局路径解析，它会影响所有资源（包括图片、CSS），副作用太大
重复初始化和内存泄漏要靠 dataset 标记拦截
SPA 场景下，同一 DOM 元素可能被 Vue/React 复用或手动 innerHTML 替换，导致模块被多次加载。仅靠 data-module 不足以识别是否已初始化。
解决方案是在首次加载后写入自定义标记：
if (el.dataset.initialized) return; el.dataset.initialized = 'true'; // 后续初始化逻辑...
- 不要用
el.hasAttribute('data-initialized')，因为属性可能被框架清空；dataset是实时映射，更可靠 - 模块卸载时（如组件销毁钩子），应清除
dataset.initialized并释放事件监听器、定时器等资源 - 对依赖全局状态的模块（如共享 WebSocket 连接），需额外设计连接复用机制，不能每个实例都新建
模块动态加载真正难的不是语法，是边界控制：谁允许加载、路径怎么算、加载过没、加载失败怎么办。这些细节漏掉一个，上线后就变成偶发白屏或接口刷爆。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
