举例说明使用data-有什么优点？

使用data-* 属性在前端开发中有很多优点，主要体现在以下几个方面：

1. 存储自定义数据: data-* 属性允许你在HTML元素上存储自定义数据，而不会影响页面的结构或样式。这些数据可以是任何你需要的，例如：

• 组件配置: 可以存储组件的配置选项，例如颜色、大小、显示状态等。例如，一个自定义的日期选择器组件可以存储日期格式：<input type="text" data-date-format="YYYY-MM-DD">。
• 状态标识: 可以用来标记元素的状态，例如是否选中、是否激活、是否加载完成等。例如，<li data-selected="true">已选中</li>。
• 关联信息: 可以存储与元素相关的数据，例如产品的ID、文章的URL等。例如，<img src="product.jpg" data-product-id="12345">。

2. 简化JavaScript操作: 通过JavaScript可以轻松地访问和操作 data-* 属性的值，从而简化DOM操作。例如：

const element = document.querySelector('[data-product-id="12345"]');
const productId = element.dataset.productId; // 获取产品ID
element.dataset.selected = true; // 设置选中状态

3. 避免使用非标准属性: 使用 data-* 属性可以避免使用非标准的HTML属性，从而提高代码的可维护性和兼容性。 非标准属性可能会导致浏览器兼容性问题，或者在未来的HTML版本中失效。

4. 提高代码可读性: data-* 属性的命名方式清晰易懂，可以提高代码的可读性和可维护性。例如，data-user-name 比 userName 更清晰地表明了数据的含义。

5. 与CSS配合使用: data-* 属性的值可以被CSS选择器使用，从而实现动态样式控制。例如：

li[data-selected="true"] {
  background-color: yellow;
}

6. 框架和库的集成: 许多JavaScript框架和库都利用 data-* 属性来实现一些功能，例如数据绑定、事件处理等。 了解 data-* 属性的使用方法可以更好地理解和使用这些框架和库。

总结: data-* 属性提供了一种灵活、标准、易于使用的方式来存储和访问自定义数据，从而提高前端开发的效率和代码质量。 它可以帮助你更好地组织代码、简化DOM操作、提高代码可读性和可维护性。