隐藏输入与HTML5数据属性

Question

最近一直困扰我的是使用HTML5 data attributes，什么时候适合使用它们。

通常，在对我的服务器执行大量AJAX调用的页面上，我需要ID代表正在查看的页面。我目前将其存储在页面上隐藏的<input>元素中，然后将其存储在我的jQuery doc ready调用顶部的JS变量中。

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

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

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

Answer 1

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

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

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

Answer 2

这是我的看法：

• 隐藏input表示在表单中用作将数据传回服务器而不会在页面上显示或编辑的方式。
• 属性用于描述元素的属性。 data-属性旨在将有关元素的信息传递给页面上的JavaScript。

基于此，data-或html元素上的body属性似乎最合适。

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

Answer 3

我知道自从这篇文章发布以来已经有一段时间了，但我最近遇到了这个话题，我想评论两者的表现方面。

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

隐藏的输入对性能的影响更大（特别是在扩展时），因为它们是具有许多其他属性的DOM对象（占用更多内存）。

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

因此，在选择隐藏输入和数据属性时，我为自己设定了一套指导原则。

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

Answer 4

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

关于初始页面状态，听起来你可能会将javascript变量直接放入页面而不是隐藏字段中，就像你使用它一样。如果您要将表单发布到服务器，那么隐藏元素在那里非常有用，即隐藏元素的设计目的。

关于最佳做法是一个很好的开放性问题。

Answer 5

根据你如何使用“id”来识别页面，也许最好把id放在url中

喜欢http://www.example.com/page/123

其中123是id

Answer 6

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

基本上创建数据属性是为了向DOM元素添加额外的信息，这些信息不能用现有的属性（如类或旧的id）附加到它上面。

这主要影响基于网络的应用程序，或者更具体地说是Saas，对数据驱动属性的需求远远超过常规网站（即使背后有CMS）。

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

1. 将html属性用于我们不是的东西 最初创建或设计
2. 使用带有标记的html属性来解码它们 与客户端或服务器端功能（拆分，拼接，爆炸）

这种方法的问题在于，无论你如何看待它，你都不是 使用html属性，他们的意思是设计和使用。

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

我当时的基本情景是我想要一个单一的 jQuery Dialog加载所有数据输入表单（客户，产品，供应商等） 每种形式都有不同的宽度和高度。这样客户端脚本就可以了 要小得多，我需要为每个新表单添加一个新对话框 添加到客户要求的应用程序中。

这就是我在数据属性出现之前的过程：

点击添加新产品

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

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

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

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

这是我现在如何使用真棒数据属性：

单击以添加新产品

这样我就不需要令牌了，我可以得到每个属性的值 好旧的$（this）.attr（'data-form'）;, $（this）.attr（'data-dwith'）;等等。

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