在Pug模板中正确使用和JavaScript访问HTML data-* 属性-js教程-PHP中文网

在Pug模板中正确使用和JavaScript访问HTML data-* 属性

霞舞

发布： 2025-08-02 11:16:27

原创

912人浏览过

在Pug模板中正确使用和JavaScript访问HTML data-* 属性

本教程详细阐述了在Pug模板中定义并从JavaScript中正确访问HTML data-* 属性的关键。核心在于理解HTML data-* 属性必须以 data- 前缀命名，且在JavaScript中通过 HTMLElement.dataset 访问时，kebab-case 会自动转换为 camelCase。文章通过代码示例，指导开发者避免常见错误，确保前后端数据传递的顺畅性。

引言：理解 data-* 属性的作用

在web开发中，我们经常需要在html元素上存储一些不属于标准属性的自定义数据，以便javascript脚本能够读取和操作。html5引入的 data-* 全局属性正是为此目的而生。它们提供了一种标准的方式来存储私有数据，这些数据对页面内容的呈现没有直接影响，但可以被javascript轻松访问。

例如，一个按钮可能需要关联一个ID或一个特定的操作类型，这些信息可以通过 data-* 属性附加到按钮元素上，然后在用户点击时被JavaScript获取并处理。

问题解析：错误的 data-* 属性命名

在Pug（或任何HTML模板引擎）中定义 data-* 属性时，一个常见的错误是未能遵循其严格的命名规范。根据HTML标准，所有自定义数据属性都必须以 data- 前缀开头。

考虑以下Pug代码片段：

button.sbt-enroll(subject-data-slug=`${subject[0].slug}`) enroll

登录后复制

这里的属性名 subject-data-slug 虽然包含了 data 关键字，但它并没有以 data- 作为完整的前缀。这意味着浏览器不会将其识别为一个标准的 data-* 属性。当JavaScript尝试通过 HTMLElement.dataset API来访问这个属性时，它将无法找到预期的值，因为 dataset API只处理符合 data- 命名规范的属性。

立即学习“Java免费学习笔记（深入）”；

例如，如果一个属性是 my-data-id="123"，那么在JavaScript中可以通过 element.dataset.myId 来访问。但如果属性是 custom-id="123"，则 dataset 将无法直接访问它。在上述Pug示例中，subject-data-slug 实际上被视为一个普通的自定义属性，而不是 data-* 属性家族的一员。

解决方案：遵循 data-* 规范与 dataset 访问规则

要正确地在Pug模板中定义 data-* 属性并在JavaScript中访问它们，需要遵循以下两个关键规则：

HTML属性命名： 属性名必须以 data- 开头，后面跟着一个或多个小写字母、数字、连字符（-）、点（.）、冒号（:）或下划线（_）。通常推荐使用 kebab-case（短横线连接）来命名 data-* 属性，例如 data-subject-slug。
JavaScript访问： 当通过 HTMLElement.dataset 属性访问这些数据时，JavaScript会自动将 kebab-case 命名的属性转换为 camelCase（驼峰命名法）。例如，data-subject-slug 将被转换为 subjectSlug。

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

147

查看详情

Pug模板中的正确定义

将原始的Pug代码修改为符合 data-* 规范：

button.sbt-enroll(data-subject-slug=`${subject[0].slug}`) enroll

登录后复制

这里，我们将属性名从 subject-data-slug 修改为 data-subject-slug，使其完全符合HTML data-* 属性的命名规范。

JavaScript中的正确访问

相应地，在JavaScript中访问这个属性时，需要使用其 camelCase 形式：

let subjectBtn = document.querySelector(".sbt-enroll");
if (subjectBtn) {
  subjectBtn.addEventListener("click", (e) => {
    e.preventDefault();
    // 从 e.target.dataset 中解构出 subjectSlug
    // data-subject-slug 在 JS 中对应 subjectSlug
    const { subjectSlug } = e.target.dataset;
    applySubject(subjectSlug);
  });
}

// 示例：假设 applySubject 函数存在
function applySubject(slug) {
  console.log(`Applying subject with slug: ${slug}`);
  // 可以在这里执行 AJAX 请求或页面跳转等操作
}

登录后复制

通过以上修改，当点击按钮时，e.target.dataset 将能够正确识别并包含 subjectSlug 属性，从而允许 applySubject 函数接收到正确的数据。

完整代码示例

为了更好地理解，以下是Pug模板和JavaScript代码的关键部分的整合示例：

Pug 模板 (index.pug)

doctype html
html
  head
    // ... 其他头部内容 ...
    title= subject[0].name
    style
      include ../public/style.css

  body
    section.courses-background
      // ... 导航和其他元素 ...
      .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

  // 确保脚本在 DOM 元素加载后执行
  script(src='/js/bundle.js')

登录后复制

JavaScript 文件 (bundle.js 或 index.js)

// 获取按钮元素
let subjectBtn = document.querySelector(".sbt-enroll");

// 确保按钮存在，避免空引用错误
if (subjectBtn) {
  // 添加点击事件监听器
  subjectBtn.addEventListener("click", (e) => {
    e.preventDefault(); // 阻止默认行为，如表单提交

    // 从事件目标（被点击的按钮）的 dataset 中获取数据
    // data-subject-slug 在 JavaScript 中被访问为 subjectSlug
    const { subjectSlug } = e.target.dataset;

    // 调用处理函数，并传入获取到的 slug
    applySubject(subjectSlug);
  });
}

// 定义 applySubject 函数
function applySubject(slug) {
  console.log(`执行报名操作，科目 slug 为: ${slug}`);
  // 在这里可以添加实际的业务逻辑，例如：
  // - 发送 AJAX 请求到后端 API 进行报名
  // - 页面重定向到报名确认页
  // - 显示一个确认消息
}

登录后复制

注意事项与最佳实践

命名规范的严格性： 始终牢记 data-* 属性必须以 data- 开头。任何不符合这个前缀的属性都不会被 HTMLElement.dataset API识别。
驼峰命名转换： 从 kebab-case 到 camelCase 的自动转换是 dataset API 的核心特性。理解这一点对于在JavaScript中正确访问属性至关重要。
脚本加载时机： 确保你的JavaScript代码在DOM元素完全加载并可用之后再执行。将 <script> 标签放在 </body> 闭合标签之前是一个常见的最佳实践，因为它确保了在脚本执行时，页面上的所有HTML元素都已经解析完毕。
调试技巧：
- 浏览器开发者工具： 利用浏览器的开发者工具检查元素。在“Elements”或“检查”面板中，选中你的按钮元素，查看其HTML属性，确认 data-subject-slug 是否正确显示。
- console.log()： 在JavaScript代码中，使用 console.log(e.target.dataset) 来打印出 dataset 对象的内容，这将帮助你确认哪些 data-* 属性被正确解析并可用。
- 断点调试： 在JavaScript代码中设置断点，逐步执行代码，观察变量的值，以定位问题所在。
健壮性检查： 在尝试访问DOM元素或其属性之前，始终进行非空检查（例如 if (subjectBtn)），以防止在元素不存在时引发JavaScript错误。

总结

正确地在Pug模板中定义和在JavaScript中访问 data-* 属性是实现前端交互逻辑的关键一环。核心在于理解并严格遵循HTML data-* 属性的命名规范（必须以 data- 开头），以及JavaScript HTMLElement.dataset API在访问时对 kebab-case 到 camelCase 的自动转换。通过遵循这些原则，开发者可以有效地在Pug生成的HTML与客户端JavaScript之间传递和利用自定义数据，从而构建出更强大、更灵活的Web应用。

以上就是在Pug模板中正确使用和JavaScript访问HTML data-* 属性的详细内容，更多请关注php中文网其它相关文章！