Pug模板与JS数据属性使用详解

从现在开始，我们要努力学习啦！今天我给大家带来《Pug模板与JS数据属性使用教程》，感兴趣的朋友请继续看下去吧！下文中的内容我们主要会涉及到等等知识点，如果在阅读本文过程中有遇到不清楚的地方，欢迎留言呀！我们一起讨论，一起学习！

本教程详细介绍了如何在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语法示例：

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访问这些自定义数据属性时，浏览器会自动将属性名进行转换：

1. data-前缀会被移除。
2. 属性名中所有连字符（-）后的字母会被转换为大写（即驼峰式命名）。

例如，一个在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 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);
  });
}

解析：

1. Pug模板中，button.sbt-enroll(data-subject-slug=${subject[0].slug}) 将生成一个HTML按钮，其上带有data-subject-slug="some-slug-value"这样的属性。
2. JavaScript中，document.querySelector(".sbt-enroll") 成功获取到该按钮元素。
3. 当按钮被点击时，事件监听器触发。e.target指向被点击的按钮元素。
4. e.target.dataset返回一个对象，其中包含所有data-*属性。由于HTML属性是data-subject-slug，它在dataset对象中对应的键就是subjectSlug。
5. const { subjectSlug } = e.target.dataset; 使用ES6的解构赋值语法，从dataset对象中提取subjectSlug的值。
6. 最后，applySubject(subjectSlug) 函数被调用，并传入正确的学科标识。

注意事项与最佳实践

• DOM加载时机： 确保你的JavaScript代码在DOM完全加载后执行。通常，将