Question

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

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

我更喜欢数字3，因为它没有设置任何HTML属性，如1和2的情况。这就像在对象上设置和获取任何属性一样。

使用setAttribute（'nonStandardDataProperty'）
使用HTMLElement对象的dataset属性，例如dataset.x 数据xattribute
HTMLElement是对象，因此定义任何属性，它将作为该元素的数据存储

Answer 1

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

Answer 2

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

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

Answer 3

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

Answer 4

我想最好的方法是使用HTML5 data- * Attributes和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- *属性

Answer 5

选项4：在DOMNode上存储一个标识符，您可以使用该标识符在分离的映射中查找内容（是的，这是jQuery的工作方式 - 当然，除了在init期间导入所有data- *属性）。

如果你注意你的属性名称，那么＃3就可以了。＃2应该只允许Integer和String值，＃1可能有同样的问题。

我会选择＃4，因为我不喜欢弹出新规格的可能性并声称我用于自己的数据的属性名称......

Answer 6

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>

与HTMLElement对象进行数据关联的最佳实践？

6 个答案: