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

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

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

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

使用setAttribute（'nonStandardDataProperty'）

使用HtmleElement对象的dataset属性，例如 数据属性

HtmleElement是对象，所以定义任何属性，它将用作该元素的数据存储

---

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

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>

...

&时代；

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

---

然而，为了与jQuery的

.data（）

方法兼容，我会使用HTML5的

数据-

前缀作为这些自定义属性；另外，它允许您在HTML中设置这些属性，同时仍然保持有效的标记。这通常是我的偏好，但实际上，在您的情况下，它是最适合您的：如果它有效，就使用它。

我想最好的方法是使用HTML5 data-*属性和jQuery的.data（）函数。它可能有最好的方式将数据存储在内置的HTML元素中，并在将来更新到最新的技术，这样您就可以轻松地工作，提高效率

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

console.log（$（'#myDiv'）.data（'myvar'））

编辑： 就这样

$（'myDiv'）。数据（'myvar'，'mynewvar'）

在本例中，它还将更新data-*属性选项4：在DOMNode上存储一个标识符，您可以使用该标识符在分离的映射中查找内容（是的，jQuery就是这样做的——当然，除了在init期间导入所有data-*属性之外）

如果你不介意你的房产名称的话，选择#3是可以的#2应该只允许整数和字符串值，#1可能有相同的问题

我会选择#4，只是因为我不喜欢出现一个新规范并声明我用于我自己数据的属性名称的可能性…
1和3不是相同的吗？选项3是对象，只有在您获取它的引用后，才可以从服务器获取相关数据。@NilsH：不，只有在已灭绝的IEs中。Read@NilsH我认为选项1创建的HTML元素属性可以通过getAttribute方法进一步访问，而第3个与attributeBergi无关，谢谢澄清。虽然此链接可以回答问题，但最好在此处包含答案的基本部分，并提供链接供参考。如果链接页面发生更改，仅链接的答案可能会无效。谢谢您的建议。我修正了我的答案。我在你的html代码段中没有看到任何非标准的属性名。aria是标准的吗？好的，我知道了。我错了。现在我对选项1和选项2感到困惑。这种方法叫什么？@FelixKling如果你首先使用
.data
来写数据，我就不会这么认为。它将数据存储为属性而不是属性。@Alnitak:jQuery的
.date（）
方法不使用HTML，在HTML中只能存储字符串（与数据属性中一样）。我实际上指的是第一个选项，即使用
getAttribute
。很抱歉说得不够具体。@FelixKling这篇文章写得很好，有很好的理由，但遗憾的是我们不允许使用原型继承，这是JavaScript的真正功能。谢谢。请详细说明“在分离的映射中查找内容”好吗？请注意，这可能有垃圾收集问题。