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

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

聖光之護

发布： 2025-08-02 10:46:13

原创

923人浏览过

在 pug 模板中正确使用和访问 html data-* 属性

本文详细介绍了在 Pug 模板中定义和在 JavaScript 中访问 HTML data-* 属性的正确方法。通过实例代码，解释了 data- 前缀的重要性以及 JavaScript dataset API 如何将连字符命名转换为驼峰命名，帮助开发者有效解决从模板传递数据到脚本的问题，提升前端交互性。

引言：前端数据传递与 data-* 属性

在现代前端开发中，我们经常需要将 HTML 元素上的特定数据传递给 JavaScript 进行处理，例如按钮点击时获取其关联的 ID 或配置信息。HTML5 引入的 data-* 全局属性提供了一种标准且语义化的方式来存储自定义数据。这些属性允许开发者在不使用非标准属性、额外 DOM 属性或 Node.js 变量的情况下，将额外信息附加到标准 HTML 标签上。

然而，在使用像 Pug 这样的模板引擎时，开发者有时会遇到在模板中定义了 data-* 属性，但在 JavaScript 中无法正确访问的问题。这通常是由于对 data-* 属性的命名规范和 JavaScript dataset API 的工作原理理解不足导致的。

理解 HTML data-* 属性与 dataset API

data-* 属性的命名规则非常明确：它们必须以 data- 作为前缀，后面可以跟任何自定义的名称（允许包含连字符 -）。例如，data-id、data-user-name、data-product-slug 都是有效的 data-* 属性。

在 JavaScript 中，可以通过 HTMLElement 接口的 dataset 属性来访问这些自定义数据。dataset 属性返回一个 DOMStringMap 对象，其中包含了所有 data-* 属性的键值对。需要注意的是，当通过 dataset 访问这些属性时，JavaScript 会自动将连字符命名的 data-* 属性转换为驼峰命名（camelCase）。

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

例如：

data-id 会在 dataset 中映射为 dataset.id。
data-user-name 会映射为 dataset.userName。
data-product-slug 会映射为 dataset.productSlug。

在 Pug 模板中定义 data-* 属性

在 Pug（以前称为 Jade）模板中定义 HTML 属性非常简洁。对于 data-* 属性，关键在于严格遵循 data- 前缀的命名规范。

错误示例（常见误区）：

// 错误的命名方式，data- 前缀没有放在最前面
button.sbt-enroll(subject-data-slug=`${subject[0].slug}`) enroll

登录后复制

在这个例子中，subject-data-slug 并不是一个标准的 data-* 属性，因为它没有以 data- 开头。尽管它看起来像一个数据属性，但浏览器并不会将其解析到 dataset 对象中。

正确示例：

AiPPT模板广场

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

147

查看详情

要确保属性被识别为 data-* 属性并可通过 dataset 访问，必须以 data- 作为属性名的开头。

// 正确的命名方式，以 data- 开头
button.sbt-enroll(data-subject-slug=`${subject[0].slug}`) enroll

登录后复制

这里，data-subject-slug 是一个标准的 data-* 属性。Pug 会将其正确渲染为 <button class="sbt-enroll" data-subject-slug="some-slug">enroll</button>。

在 JavaScript 中访问 dataset 属性

一旦在 Pug 模板中正确定义了 data-* 属性，就可以在 JavaScript 中使用 HTMLElement.dataset API 轻松访问它们。记住，连字符命名会转换为驼峰命名。

JavaScript 访问示例：

假设我们有以下 Pug 模板：

// pug/index.pug
doctype html
html
  head
    title My Subject Page
    style
      include ../public/style.css
  body
    section.course
      .subject
        // 注意这里使用了 data-subject-slug
        button.sbt-enroll(data-subject-slug=`${subject[0].slug}`) enroll

    script(src='/js/bundle.js')

登录后复制

以及对应的 JavaScript 文件 (public/js/bundle.js)：

// public/js/bundle.js

// 假设 subject[0].slug 在服务器端被渲染为 "web-development"
// 那么按钮的 HTML 将是 <button class="sbt-enroll" data-subject-slug="web-development">enroll</button>

let subjectBtn = document.querySelector(".sbt-enroll");

if (subjectBtn) {
  subjectBtn.addEventListener("click", (e) => {
    e.preventDefault();

    // 从 e.target.dataset 中获取数据
    // data-subject-slug 会被转换为 subjectSlug
    const { subjectSlug } = e.target.dataset;

    console.log("Subject Slug:", subjectSlug); // 输出: Subject Slug: web-development

    // 调用处理函数
    applySubject(subjectSlug);
  });
}

function applySubject(slug) {
  // 模拟一个异步操作，例如发送请求到后端
  console.log(`Applying for subject: ${slug}`);
  // 实际应用中可能包含 AJAX 请求、页面跳转等
  alert(`成功申请课程：${slug}`);
}

// 确保在 DOM 完全加载后执行脚本
// 如果 script 标签放在 body 底部，通常不需要DOMContentLoaded
// 但如果 script 标签在 head 中，则需要
// document.addEventListener('DOMContentLoaded', () => {
//   // ... 上面的代码 ...
// });

登录后复制

在这个 JavaScript 示例中，e.target.dataset 返回一个包含所有 data-* 属性的对象。由于 Pug 中定义的属性是 data-subject-slug，因此在 JavaScript 中，它被转换为驼峰命名的 subjectSlug，我们可以通过解构赋值 const { subjectSlug } = e.target.dataset; 来直接获取其值。

注意事项与总结

data- 前缀强制性： 任何自定义数据属性都必须以 data- 开头。这是 HTML 规范的要求，也是 dataset API 识别它们的唯一方式。
驼峰命名转换： 在 JavaScript 中访问 dataset 时，所有 data- 后面的连字符命名都会被转换为驼峰命名。例如，data-my-custom-attribute 对应 dataset.myCustomAttribute。
脚本加载时机： 确保你的 JavaScript 代码在 DOM 元素（包括你的按钮）加载并可用之后执行。最常见的做法是将 <script> 标签放在 <body> 标签的闭合标签 </body> 之前。如果将脚本放在 <head> 中，则需要使用 DOMContentLoaded 事件监听器来确保 DOM 已完全解析。
值类型： dataset 属性的值始终是字符串。如果需要数字或布尔值，需要手动进行类型转换（例如 parseInt(), parseFloat(), JSON.parse()）。
调试： 在浏览器开发者工具中检查元素，确认 data-* 属性是否正确渲染。同时，使用 console.log(e.target.dataset) 来查看 dataset 对象的内容，确认 JavaScript 是否正确获取了数据。