26

最近困扰我的事情是HTML5 数据属性的使用以及何时适合使用它们。

通常，在对我的服务器执行多个 AJAX 调用的页面上，我需要ID代表正在查看的页面的那个。我目前一直将它存储在<input>页面上的一个隐藏元素中，然后访问它并将其存储在我的 jQuery doc 就绪调用顶部的 JS 变量中。

我一直在考虑将它移动到data-idbody 元素上的一个属性，然后我将在 jQuery 中使用$('body').data('id');.

使用 HTML5 数据属性有什么好处，反之亦然？表现？安全？“最佳实践”？

据我了解，所有浏览器都可以访问数据属性，因此无需担心处理 IE。

4

6 回答 6

15

主要缺点之一是可访问性。

由于这些属性不会在 POST 中提交给服务器，因此您需要记住在禁用 JavaScript 的浏览器中会发生什么。如果您的页面还应该能够优雅地降级并在必要时通过传统的表单提交执行相同的 AJAX 请求的功能，那么仍然需要隐藏字段。

也就是说，当数据属性有意义时，我是它们的忠实拥护者，尤其是在严格的“应用程序”类型站点中，您可以安全地使用 JavaScript。例如，使用 data-id 属性标记表格行比在其中一个单元格中填充隐藏字段要好得多。特别是再加上 jQuery 对该.data()方法的良好数据属性支持，在隐藏字段可能有点混乱的情况下，它可以生成干净、直观的代码。

于 2011-04-06T02:14:26.693 回答
12

这是我的看法：

  • Hiddeninput旨在在表单中用作将数据传回服务器而不使其在页面上可见或可编辑的一种方式。
  • 属性旨在描述元素的属性。data-属性旨在将有关元素的信息传达给页面上的 JavaScript。

基于此，or元素data-上的属性似乎是最合适的。htmlbody

另一种虽然语义较少的解决方案是将您的页面元数据序列化为 JSON，并使用script标签将其设置为页面上的全局变量。例如，您可以在GitHub 存储库中看到这一点，其中在页面顶部附近创建了一个全局GitHub对象，并向其中添加了一些信息（存储库名称、当前分支、最新提交）以便于访问。

于 2011-04-06T02:13:41.377 回答
5

我知道这篇文章已经有一段时间没有活跃了，但我最近遇到了这个话题，我想评论一下两者的性能方面。

正如其他人所指出的，Data 属性用于在 DOM 本身中存储数据，在 HTML5 之前，有不同的方法可以通过使用嵌套在 DOM 中的隐藏输入或使用其他属性来解决该需求。

隐藏输入对性能的要求更高（尤其是当您扩大它们时），因为它们是具有许多其他属性的 DOM 对象（占用更多内存）。

与隐藏输入相比，使用其他属性的内存效率更高，但可能需要更多处理。您可能需要为它们添加前缀并使用这些前缀提取数据。此外，设置和获取它们也可能很棘手，并且可能会破坏某些元素的默认功能。

因此，在隐藏输入和数据属性之间进行选择时，这是我为自己设置的一组准则。

  • 当数据仅用于前端功能时选择数据属性（无需提交回）
  • 当需要存储大规模数据时选择数据属性（例如：图形坐标，具有多个参数的大型列表）
  • 存储大块数据或带有特殊字符的数据时选择隐藏输入
于 2015-10-09T08:54:01.830 回答
2

因为数据属性是新的，所以我认为它们何时合适或最佳实践是什么尚未达成真正的共识。我个人的感觉是，当您将数据附加到页面下方的 DOM 元素时它们很有意义，因为它们在逻辑上与那些 DOM 元素一起使用。当您考虑在 body 标记上使用它们时，我想知道为什么您不将这些值保存在常规 javascript 变量中。我怀疑使用常规 javascript 变量会有更好的性能。所有这些变量都可以在 Firebug 等中轻松查看，因此从这个意义上说，一个或多或少的安全性不太可能。

关于初始页面状态，听起来您可能可以将 javascript 变量直接放入页面中，而不是按照您使用它的方式放入隐藏字段中。如果您将表单发布到服务器，则隐藏元素在那里可能很有用，这就是隐藏元素的设计目的。

关于这方面的最佳实践，这是一个很好的开放性问题。

于 2011-04-06T01:27:34.917 回答
1

根据您如何使用“id”来识别页面，最好将 id 放在 url

像http://www.example.com/page/123

其中 123 是 id

于 2011-04-06T01:34:01.673 回答
1

简而言之，数据属性可以附加到由属性描述的元素，其中隐藏输入的区域不能位于另一个 DOM 元素内，并且它的使用仅限于表单（无论如何都是良好的做法）。隐藏的输入是一个实际的 DOM 元素，而 data 属性很好……是一个属性，所以它可以绑定到一个 DOM 元素。在大多数情况下，但如果您需要更多信息并且可能需要继续阅读示例，我警告您它有点长而且英语不是我的母语。

基本上，创建 data 属性是为了向 DOM 元素添加额外的信息，这些信息不能通过现有的属性（例如 class 或旧的 id）附加到它。

这主要影响基于 Web 的应用程序，或者更具体地说是 Saas，对数据驱动属性的需求比普通网站要广泛得多（即使背后有 CMS）。

很多年前我曾经梦想过这个属性，当时你只有两个选择：

  1. 将 html 属性用于我们
    最初创建或设计的东西
  2. 使用带有标记的 html 属性，通过客户端或服务器端函数（split、splice、explode）对它们进行解码

这种方法的问题在于，无论您如何看待它，您都没有按照它们的意图和设计使用方式使用 html 属性。

Html 是一种标记语言，因此它自然不具有数据驱动属性，您无法使用这些属性来操纵数据处理和行为。

我当时的基本情况是我想要一个 jQuery 对话框来加载所有数据输入表单（客户、产品、供应商等），每个表单具有不同的宽度和高度。这样，客户端脚本会小得多，我需要为添加到客户端请求的应用程序的每个新表单添加一个新对话框。

这就是我在 data 属性出现之前的做法：

点击添加新产品

在 id 令牌中，我有 3 个值：

  1. 要从服务器加载的表单
  2. 对话窗口的宽度
  3. 对话窗口的高度

其他方法是使用 href 属性，但这比使用 id 更糟糕，因为 href 属性旨在指向 DOM 元素或其他源，而不是保存任何要处理的数据。

任何一种方法都涉及使用 split 或类似功能分解令牌。

这就是我现在使用出色的数据属性的方式：

点击添加新产品

这样我就不需要令牌，我可以用一个很好的旧 $(this).attr('data-form');, $(this).attr('data-dwith'); 获取每个属性的值 等等。

恕我直言，我认为向 html 元素添加一些额外的数据比创建更长的 javascript 文件更好，从而更重、更复杂。

于 2013-04-05T01:12:12.090 回答