隐藏输入与HTML5数据属性

Question

最近一直困扰我的是使用HTML5数据属性,什么时候适合使用它们.

通常,在对我的服务器执行大量AJAX调用的页面上,我要求ID代表正在查看的页面.我现在一直将它存储在<input>页面上的隐藏元素中,然后在我的jQuery doc ready调用的顶部访问并存储在JS变量中.

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

使用HTML5数据是否有任何优势？反之亦然？性能？安全？"最佳实践"？

我的理解是所有浏览器都可以访问数据属性,因此处理IE不是一个问题.

Answer 1

其中一个主要缺点是可访问性.

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

也就是说,当他们有意义时,我是数据属性的忠实粉丝,特别是在严格的"应用程序"类型网站中,您可以安全地授权JavaScript.例如,使用data-id属性标记表行比在其中一个单元格中填充隐藏字段要好得多.特别是结合jQuery对该.data()方法的良好数据属性支持,在隐藏字段可能有点混乱的情况下,这使得干净,直观的代码成为可能.

Answer 2

这是我的看法:

• 隐藏的inputs意味着在表单中用作将数据传递回服务器而不使其在页面上可见或可编辑的方式.
• 属性用于描述元素的属性.data-属性旨在将有关元素的信息传递给页面上的JavaScript.

基于此,或元素data-上的属性似乎是最合适的.htmlbody

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

Answer 3

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

正如其他人指出的那样，Data 属性用于在 DOM 本身中存储数据，在 HTML5 之前，通过使用嵌套在 DOM 中的隐藏输入或使用其他属性，有不同的方法来满足这一需求。

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

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

因此，当涉及到在隐藏输入和数据属性之间进行选择时，我为自己设定了一组指导方针。

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

Answer 4

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

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

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