data-* 属性是 HTML5 引入的一个自定义数据属性机制，允许开发者在 HTML 元素上存储自定义数据，这些数据不会影响到页面的布局、样式或其他行为。 它本质上提供了一种在 HTML 中嵌入私有数据的标准化方法，避免使用非标准的属性或全局变量，从而提升代码的可维护性和可读性。
以下是 data-* 属性的一些关键特性和用法：
-
命名规则：
data-*属性的名称必须以data-开头，后面跟着至少一个小写字母，可以使用连字符-连接多个单词，例如data-user-name、data-product-id等。避免使用大写字母和非字母数字字符。 -
数据类型：
data-*属性的值可以是任何字符串。虽然可以存储任何文本，但建议存储简单的数据类型，例如数字、布尔值或简短的字符串。对于复杂的数据结构，建议使用 JSON 格式并将其存储为字符串。 -
访问方式： 可以通过 JavaScript 的
dataset属性访问data-*属性的值。例如，要访问data-user-name属性的值，可以使用element.dataset.userName。需要注意的是，在 JavaScript 中，属性名会自动转换为驼峰命名法。 -
使用场景：
data-*属性的应用场景非常广泛，例如：- 存储组件状态： 可以用来存储组件的当前状态，例如是否展开、是否选中等。
- 传递数据： 可以用来在不同的 JavaScript 模块或函数之间传递数据，避免使用全局变量。
- 配置选项： 可以用来存储组件的配置选项，例如颜色、大小等。
- SEO 优化： 虽然搜索引擎可能不会直接使用这些数据，但可以用来存储一些对 SEO 有用的信息，例如文章的发布日期、作者等。
- 事件处理： 可以结合 JavaScript 事件处理机制，根据
data-*属性的值执行不同的操作。 - 第三方库/框架集成： 许多 JavaScript 库和框架也利用
data-*属性来实现特定的功能。
-
优势：
- 标准化：
data-*属性是 HTML5 标准的一部分，具有良好的跨浏览器兼容性。 - 易于访问： 通过 JavaScript 的
dataset属性可以方便地访问数据。 - 不影响页面结构：
data-*属性不会影响页面的布局和样式。 - 提高代码可维护性： 使代码更清晰、易于理解和维护。
- 标准化：
示例：
<div id="myElement" data-user-name="John Doe" data-product-id="12345">
My Element
</div>
<script>
const element = document.getElementById('myElement');
const userName = element.dataset.userName; // "John Doe"
const productId = element.dataset.productId; // "12345"
console.log(userName, productId);
</script>
总而言之，data-* 属性提供了一种灵活、标准化且易于使用的方式来存储和访问自定义数据，是现代前端开发中一个非常有用的特性。 它有助于提高代码的可读性、可维护性和可扩展性。