理解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。
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
错误的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 html
html
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完全加载后执行。通常，将
