本文详细介绍了在 Pug 模板中定义和在 JavaScript 中访问 HTML data-* 属性的正确方法。通过实例代码，解释了 data- 前缀的重要性以及 JavaScript dataset API 如何将连字符命名转换为驼峰命名，帮助开发者有效解决从模板传递数据到脚本的问题，提升前端交互性。
引言：前端数据传递与 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.pugdoctype htmlhtml 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 元素（包括你的按钮）加载并可用之后执行。最常见的做法是将 标签放在 标签的闭合标签
以上就是在 Pug 模板中正确使用和访问 HTML data-* 属性的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1513215.html
微信扫一扫 
支付宝扫一扫 
