data-属性仅静态存储字符串，不能直接用于接口请求；需用getAttribute()安全读取、手动序列化/反序列化、校验转换后显式组装请求参数。
不能直接用 data- 属性“保存接口参数”用于后续请求——它只负责静态挂载字符串，不自动参与网络调用，也不处理类型、序列化或安全性。
data-* 本质是字符串挂载点，不是参数容器
浏览器把所有 data- 属性值当纯字符串存进 DOM，哪怕你写 data-page="1" 或 data-filter='{"status":"active"}'，DOM 里存的也只是 "1" 和 '{"status":"active"}'。它不解析、不校验、不加密、不防 XSS，更不会在你调 fetch() 时自动塞进 body 或 url。
常见错误现象：
- 点击按钮后读
dataset.apiEndpoint得到"https://api.example.com?user=123"，但没做 URL 编码，直接拼进fetch()导致 400 - 服务端返回的
data-config='{"timeout":5000,"retry":true}'，前端忘了try/catch就JSON.parse()，页面白屏 - 用
dataset.userId拿到"123"，直接传给Number()，结果用户 ID 是"U123"，转成NaN
安全读取必须用 getAttribute()，别依赖 dataset
dataset 是个有陷阱的快捷方式：它只映射符合小写+连字符规则的属性（如 data-api-key → dataset.apiKey），一旦属性名含数字开头（data-2024-id）、下划线（data_user_id）或大写（data-API-Token），dataset 就静默返回 undefined，而 getAttribute() 总能拿到原始字符串。
立即学习“前端免费学习笔记（深入）”；
正确做法：
- 读取一律用
el.getAttribute('data-api-endpoint')，不写dataset.apiEndpoint - 判断是否存在用
el.hasAttribute('data-disabled')，不用dataset.disabled !== undefined - 含数字或特殊字符的 key，比如
data-1st-load，只能靠getAttribute('data-1st-load')，dataset["1stLoad"]虽然能访问但不稳定
结构化参数必须手动序列化/反序列化
data- 不支持对象或数组。想存配置对象，必须自己 JSON.stringify() 再写入；读取时必须 JSON.parse() 并包裹 try/catch。
示例：
const el = document.getElementById('app');
const raw = el.getAttribute('data-config');
let config = {};
try {
config = JSON.parse(raw || '{}');
} catch (e) {
console.warn('Invalid data-config:', raw, e);
}
// 后续 fetch 可用 config.timeout、config.retry 等
fetch(config.endpoint, { method: 'POST', body: JSON.stringify({ user: config.userId }) });注意：
- 服务端渲染时，确保输出的 JSON 是合法且已转义（避免单引号、未闭合引号、控制字符）
- 不要用
dataset.config = {...}，这会调toString()，变成[object Object] - 敏感参数（如 token、密钥）别走
data-，它暴露在 HTML 源码里，等同于明文
真正驱动请求的环节要手动桥接
data- 值不会自动变成 fetch 参数。你需要显式提取、转换、组装。
关键步骤：
- 提取：用
getAttribute()拿原始字符串 - 转换：数值用
+val或Number(val)，布尔用val === "true"，对象用JSON.parse() - 校验：检查必填字段是否存在、格式是否合法（如 URL 是否以
https://开头） - 组装：拼进
URLSearchParams、RequestInit.body或 headers - 清理：请求完成后，别留着过期的
data-值在 DOM 上，避免误读
最易被忽略的一点：如果你在 SSR 页面里预置了 data-config，客户端 hydration 时，框架（如 React/Vue）可能因初始 state 不一致触发 warning 或重绘异常——此时必须确保服务端和客户端对同一 data- 的解析逻辑完全一致，包括空值处理和 try/catch 行为。
