7

我遇到了 3 种使用 HTMLElement 对象存储任何数据的方法。

有人可以建议将任何数据与元素对象相关联的最佳实践吗？

我更喜欢数字 3，因为它不像 1 和 2 那样设置任何 HTML 属性。这就像设置和获取对象的任何属性一样。

  1. 使用 setAttribute('nonStandardDataProperty')
  2. 使用 HTMLElement 对象的 dataset 属性，例如 dataset.x 用于 data-xattribute
  3. HTMLElement 是对象，所以定义任何属性，它将作为该元素的数据存储
4

6 回答 6

2

选项#2 在我看来是最“符合标准”的，如果那是你正在寻找的；另外，它允许您在 HTML 中设置这些属性，同时仍然保持有效的标记。这通常是我的偏好，但它确实是在你的情况下最适合你的方法：如果它有效，那就去吧。

于 2013-04-02T14:14:01.367 回答
1

我会使用选项#1，因为它是最便携的。

但是，为了与 jQuery 的方法兼容，我会data-为这些自定义属性使用 HTML5 的前缀。.data()

于 2013-04-02T14:12:04.687 回答
0

第三种选择是将数据存储在 DOM 中，如果数据不是很大，这可能不是一个坏主意。如果是，那么存储和检索数据可能会影响应用程序的性能。

于 2013-04-02T13:59:03.150 回答
0

我想最好的方法是使用 HTML5 data-* 属性和 jQuery 的 .data() 函数。它可能是在内置 HTML 元素中存储数据并在未来更新到最新技术的最佳方式，因此您可以向后倾斜并提高工作效率

<div id="myDiv" data-my-var="my-var-value"></div>

可以像这样在 JavaScript 中使用：（需要 jQuery）

console.log( $( '#myDiv' ).data( 'my-var' ) )

编辑：并像这样设置

$( '#myDiv' ).data( 'my-var', 'my-new-var-value' );

在这种情况下，这也将更新 data-* 属性

于 2013-04-02T14:16:36.060 回答
0

选项 4：在 DOMNode 上存储一个标识符，您可以使用它在分离的地图中查找内容（是的，这就是 jQuery 的做法——当然，除了在初始化期间导入所有 data-* 属性之外）。

如果您介意您的属性名称，则使用＃3 很好。#2 应该只允许 Integer 和 String 值，#1 可能有同样的问题。

我会选择#4，只是因为我不喜欢出现新规范并声称我用于我自己的数据的属性名称的可能性......</p>

于 2013-04-02T14:18:49.443 回答
-1

Twitter Bootstrap 使用选项一。

看一下Twitter Bootstrap文档，您会看到在非标准属性 html 元素中存储数据的大量用途。

例子

<ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
  ...
</ul>


<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
于 2013-04-02T14:07:50.903 回答