Pug模板与JavaScript中数据属性（Dataset）的正确使用指南-js教程-PHP中文网

Pug模板与JavaScript中数据属性（Dataset）的正确使用指南

心靈之曲

发布： 2025-08-02 14:30:01

原创

758人浏览过

Pug模板与JavaScript中数据属性（Dataset）的正确使用指南

本教程详细介绍了如何在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。

AiPPT模板广场

AiPPT模板广场-PPT模板-word文档模板-excel表格模板

147

查看详情

错误的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完全加载后执行。通常，将<script>标签放在</body>闭合标签之前，或者使用DOMContentLoaded事件监听器，可以确保在尝试获取DOM元素时它们已经存在。在本例中，script(src='/js/bundle.js')放在</body>前是正确的做法。
元素存在性检查： 在尝试对DOM元素进行操作之前，始终使用if (element)或if (element !== null)进行检查，以避免在元素不存在时引发JavaScript错误。
语义化命名： 尽量使data-*属性的名称具有描述性，清晰地表达其存储的数据的用途。
数据量与敏感性： data-*属性适合存储少量、非敏感的数据。对于大量数据或敏感信息，应通过其他方式（如AJAX请求）从服务器获取。
避免与现有属性冲突： data-*前缀保证了与HTML标准属性的兼容性，但仍需注意避免与CSS或JavaScript库/框架内部使用的特定属性名冲突。

遵循这些规范和最佳实践，可以有效避免在使用Pug和JavaScript进行前端开发时，因数据属性命名不当而导致的常见问题，提高代码的健壮性和可维护性。

以上就是Pug模板与JavaScript中数据属性（Dataset）的正确使用指南的详细内容，更多请关注php中文网其它相关文章！