HTML 中的数据属性：自定义属性或隐藏元素 – 哪种方法最好？

自定义属性：现代困境

自定义属性在 HTML 标记中越来越受欢迎，主要用于嵌入 JavaScript 代码使用的附加数据。然而，它们的使用引发了关于最佳实践和替代方案的问题。

耶：HTML5 数据属性

HTML5 标准明确允许以“data-”开头的自定义属性。例如，

Hello

是有效的。推荐此选项的原因是：

• 它是标准化的，确保更广泛的支持。
• 它允许语义 HTML，因为它不会重载现有属性。

不：潜在的缺点

一些人反对习俗属性：

• 缺乏 W3C 合规性： 自定义属性以前不符合 W3C 标准。不过，随着 HTML5 的认可，这种担忧有所缓解。

替代方案：

如果不首选自定义属性，请考虑以下替代方案：

• 隐藏元素：在隐藏输入中嵌入数据字段或
  元素，可通过 JavaScript 访问。
• 内联脚本：内联 JavaScript 代码可以动态访问属性。
• 额外类：为元素分配额外的 CSS 类，表示具体的数据值。
• IDI 抓取：从唯一元素 ID 解析信息。

推理：

方法的选择取决于以下因素：

• 数据大小：更大的数据集可能受益于专用的自定义属性或隐藏的属性
• 数据可见性：如果数据需要仅通过 JavaScript 访问，自定义属性或内联脚本都适合。
• 可维护性：内联脚本或额外的类可能会增加代码复杂性。
• 语义一致性： 自定义属性允许在不影响 HTML 语义的情况下嵌入数据，而隐藏元素等替代方案可能会引入语义噪音。

实践中的数据属性

HTML5 的“data-*”属性解决了有关自定义属性的许多问题，使它们成为现代 Web 中嵌入自定义数据的首选选项应用程序。但是，必须考虑对旧版浏览器的潜在影响并确保后备机制到位。