引言：前端数据传递与 data-* 属性
在现代前端开发中，我们经常需要将 HTML 元素上的特定数据传递给 JavaScript 进行处理，例如按钮点击时获取其关联的 ID 或配置信息。HTML5 引入的 data-* 全局属性提供了一种标准且语义化的方式来存储自定义数据。这些属性允许开发者在不使用非标准属性、额外 DOM 属性或 Node.js 变量的情况下，将额外信息附加到标准 HTML 标签上。
然而，在使用像 Pug 这样的模板引擎时，开发者有时会遇到在模板中定义了 data-* 属性，但在 JavaScript 中无法正确访问的问题。这通常是由于对 data-* 属性的命名规范和 JavaScript dataset API 的工作原理理解不足导致的。
理解 HTML data-* 属性与 dataset API
data-* 属性的命名规则非常明确：它们必须以 data- 作为前缀，后面可以跟任何自定义的名称（允许包含连字符 -）。例如，data-id、data-user-name、data-product-slug 都是有效的 data-* 属性。
在 JavaScript 中，可以通过 HTMLElement 接口的 dataset 属性来访问这些自定义数据。dataset 属性返回一个 DOMStringMap 对象，其中包含了所有 data-* 属性的键值对。需要注意的是，当通过 dataset 访问这些属性时，JavaScript 会自动将连字符命名的 data-* 属性转换为驼峰命名（camelCase）。
立即学习“前端免费学习笔记（深入）”；
例如：
- data-id 会在 dataset 中映射为 dataset.id。
- data-user-name 会映射为 dataset.userName。
- data-product-slug 会映射为 dataset.productSlug。
在 Pug 模板中定义 data-* 属性
在 Pug（以前称为 Jade）模板中定义 HTML 属性非常简洁。对于 data-* 属性，关键在于严格遵循 data- 前缀的命名规范。
错误示例（常见误区）：
// 错误的命名方式，data- 前缀没有放在最前面
button.sbt-enroll(subject-data-slug=`${subject[0].slug}`) enroll在这个例子中，subject-data-slug 并不是一个标准的 data-* 属性，因为它没有以 data- 开头。尽管它看起来像一个数据属性，但浏览器并不会将其解析到 dataset 对象中。
正确示例：
要确保属性被识别为 data-* 属性并可通过 dataset 访问，必须以 data- 作为属性名的开头。
// 正确的命名方式，以 data- 开头
button.sbt-enroll(data-subject-slug=`${subject[0].slug}`) enroll这里，data-subject-slug 是一个标准的 data-* 属性。Pug 会将其正确渲染为 。
在 JavaScript 中访问 dataset 属性
一旦在 Pug 模板中正确定义了 data-* 属性，就可以在 JavaScript 中使用 HTMLElement.dataset API 轻松访问它们。记住，连字符命名会转换为驼峰命名。
JavaScript 访问示例：
假设我们有以下 Pug 模板：
// pug/index.pug
doctype html
html
head
title My Subject Page
style
include ../public/style.css
body
section.course
.subject
// 注意这里使用了 data-subject-slug
button.sbt-enroll(data-subject-slug=`${subject[0].slug}`) enroll
script(src='/js/bundle.js')以及对应的 JavaScript 文件 (public/js/bundle.js)：
// public/js/bundle.js
// 假设 subject[0].slug 在服务器端被渲染为 "web-development"
// 那么按钮的 HTML 将是
let subjectBtn = document.querySelector(".sbt-enroll");
if (subjectBtn) {
subjectBtn.addEventListener("click", (e) => {
e.preventDefault();
// 从 e.target.dataset 中获取数据
// data-subject-slug 会被转换为 subjectSlug
const { subjectSlug } = e.target.dataset;
console.log("Subject Slug:", subjectSlug); // 输出: Subject Slug: web-development
// 调用处理函数
applySubject(subjectSlug);
});
}
function applySubject(slug) {
// 模拟一个异步操作，例如发送请求到后端
console.log(`Applying for subject: ${slug}`);
// 实际应用中可能包含 AJAX 请求、页面跳转等
alert(`成功申请课程：${slug}`);
}
// 确保在 DOM 完全加载后执行脚本
// 如果 script 标签放在 body 底部，通常不需要DOMContentLoaded
// 但如果 script 标签在 head 中，则需要
// document.addEventListener('DOMContentLoaded', () => {
// // ... 上面的代码 ...
// });在这个 JavaScript 示例中，e.target.dataset 返回一个包含所有 data-* 属性的对象。由于 Pug 中定义的属性是 data-subject-slug，因此在 JavaScript 中，它被转换为驼峰命名的 subjectSlug，我们可以通过解构赋值 const { subjectSlug } = e.target.dataset; 来直接获取其值。
注意事项与总结
- data- 前缀强制性： 任何自定义数据属性都必须以 data- 开头。这是 HTML 规范的要求，也是 dataset API 识别它们的唯一方式。
- 驼峰命名转换： 在 JavaScript 中访问 dataset 时，所有 data- 后面的连字符命名都会被转换为驼峰命名。例如，data-my-custom-attribute 对应 dataset.myCustomAttribute。
- 脚本加载时机： 确保你的 JavaScript 代码在 DOM 元素（包括你的按钮）加载并可用之后执行。最常见的做法是将
