本教程详细介绍了如何在Pug模板中定义HTML元素的自定义数据属性（data-*），以及如何在JavaScript中正确地访问和利用这些数据。我们将重点探讨dataset API的命名规范，包括Pug中属性的声明方式和JavaScript中属性名的驼峰式转换规则，并通过实际代码示例演示如何解决常见的按钮事件处理和数据传递问题，确保前后端交互的顺畅与高效。
理解HTML自定义数据属性（data-*）
在现代web开发中，我们经常需要在html元素上存储一些额外的数据，这些数据不直接影响元素的样式或行为，但可以在javascript中被访问和操作。html5引入了自定义数据属性（custom data attributes），即以data-为前缀的属性，它们为开发者提供了一种标准且语义化的方式来在dom中存储私有数据。例如，你可以存储一个元素的id、状态或任何与业务逻辑相关的信息。
这些data-*属性可以通过JavaScript中的HTMLElement.dataset属性来访问，dataset返回一个DOMStringMap对象，其中包含了元素上所有data-*属性的键值对。
Pug模板中定义数据属性的规范
在使用Pug（以前称为Jade）这样的模板引擎时，定义HTML属性的方式与纯HTML略有不同，但对于data-*属性的命名规范，其核心原则与HTML标准保持一致：所有自定义数据属性都必须以data-前缀开头。
原始问题中，Pug模板使用了subject-data-slug作为自定义属性名。这是一个常见的误解，因为它没有完全遵循data-前缀的规范。正确的做法是，将subject-data-slug改为data-subject-slug。
错误的Pug语法示例：
立即学习“Java免费学习笔记（深入）”；
button.sbt-enroll(subject-data-slug=`${subject[0].slug}`) enroll
正确的Pug语法示例：
button.sbt-enroll(data-subject-slug=`${subject[0].slug}`) enroll
通过上述修改，Pug模板将生成符合HTML标准的data-subject-slug属性，从而确保JavaScript能够正确地识别和访问它。
JavaScript中访问数据属性的规则
当在JavaScript中通过HTMLElement.dataset访问这些自定义数据属性时，浏览器会自动将属性名进行转换：
data-前缀会被移除。属性名中所有连字符（-）后的字母会被转换为大写（即驼峰式命名）。
例如，一个在HTML中定义的属性data-subject-slug，在JavaScript中通过dataset访问时，对应的键将是subjectSlug。
错误的JavaScript访问方式示例：
const { subject } = e.target.dataset; // 尝试解构'subject'applySubject(subject);
由于Pug中定义的属性是data-subject-slug（即使在错误的情况下也意图如此），在JavaScript中通过dataset访问时，应该使用驼峰式命名的subjectSlug。
正确的JavaScript访问方式示例：
const { subjectSlug } = e.target.dataset; // 正确解构'subjectSlug'applySubject(subjectSlug);
完整示例与解析
结合Pug模板和JavaScript代码，以下是修正后的完整示例：
Pug模板 (index.pug):
doctype htmlhtml head meta(charset='UTF-8') meta(http-equiv='X-UA-Compatible' content='IE=edge') meta(name='viewport' content='width=device-width, initial-scale=1.0') title= subject[0].name link(rel='preconnect' href='https://fonts.googleapis.com') link(rel='preconnect' href='https://fonts.gstatic.com' crossorigin='') link(href='https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;600;700&display=swap' rel='stylesheet') link(rel='stylesheet' , href='https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css') style include ../public/style.css body section.courses-background nav.nav a(href='/') img(src='../pictures/logo.jpg' alt='logo') #navLinks.nav-links svg.icon(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 512 512' onclick='hideMenu()') path(d='M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z') ul li a(href='/') HOME li a ABOUT US li a(href='/loginSignup') LOGIN/SIGNUP li a(href='/subjects') Subjects li a CONTACT svg.icon(xmlns='http://www.w3.org/2000/svg' viewbox='0 0 448 512' onclick='showMenu()') path(d='M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z') .text-box h1= subject[0].name p= subject[0].summary // subjects section.course p= subject[0].description .subject // 修正后的data属性名称 button.sbt-enroll(data-subject-slug=`${subject[0].slug}`) enroll script(src='/js/bundle.js')
JavaScript文件 (index.js 或 bundle.js):
// 假设 applySubject 函数已定义function applySubject(slug) { console.log(`Applying subject with slug: ${slug}`); // 在这里执行与该学科相关的逻辑，例如发起API请求}let subjectBtn = document.querySelector(".sbt-enroll");// 确保元素存在，避免空指针错误if (subjectBtn) { subjectBtn.addEventListener("click", (e) => { e.preventDefault(); // 阻止按钮的默认行为，例如表单提交 // 从e.target.dataset中正确解构出subjectSlug const { subjectSlug } = e.target.dataset; applySubject(subjectSlug); });}
解析：
Pug模板中，button.sbt-enroll(data-subject-slug=${subject[0].slug}) 将生成一个HTML按钮，其上带有data-subject-slug=”some-slug-value”这样的属性。JavaScript中，document.querySelector(“.sbt-enroll”) 成功获取到该按钮元素。当按钮被点击时，事件监听器触发。e.target指向被点击的按钮元素。e.target.dataset返回一个对象，其中包含所有data-*属性。由于HTML属性是data-subject-slug，它在dataset对象中对应的键就是subjectSlug。const { subjectSlug } = e.target.dataset; 使用ES6的解构赋值语法，从dataset对象中提取subjectSlug的值。最后，applySubject(subjectSlug) 函数被调用，并传入正确的学科标识。
注意事项与最佳实践
DOM加载时机： 确保你的JavaScript代码在DOM完全加载后执行。通常，将标签放在
以上就是Pug模板与JavaScript中数据属性（Dataset）的正确使用指南的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1513244.html
微信扫一扫 
支付宝扫一扫 
