要将值存储在 DOM 元素中，我们可以通过data属性
$("#abc").data("item", 1)，检索做$("#abc").data("item")
但今天我了解到我们也可以这样做：
$("#abc")[0].item = 1，检索做$("#abc)[0].item
它们之间有什么区别？
哪一个更好？哪一个具有更广泛的兼容性？
.data()存在有几个原因：
如果将 JS 对象放入 DOM 对象的属性中，某些（大多数是较旧的）浏览器会出现内存泄漏问题。这在 DOM 和 JS 世界（具有单独的垃圾收集器）之间创建了引用，这会导致问题并可能导致内存泄漏。通过使用将引用完全保留在 JS 世界中.data()而不是 DOM 属性解决了这个问题。老实说，我不知道这在现代浏览器中仍然是一个多大的问题。很难测试，使用已知安全的方法更容易。
从历史上看，某些宿主对象不支持使用直接属性语法添加任意属性，例如obj.prop = 1;. .data()这样您就可以将数据与任何对象关联起来，无论它是否有能力处理任意属性。
名称冲突。.data()在 DOM 对象上创建一个且唯一一个自定义属性，该属性只是一个 id 值（字符串）。然后您可以随意使用任何您想要的键.data()零担心与 DOM 对象上预先存在的属性名称发生冲突。.data()本质上是它自己的自定义属性的命名空间。
读取 HTML5“data-xxx”属性。当你读到一个.data("xxx")尚未写入实际 jQuery 数据存储的属性，jQuery 将读取"data-xxx"DOM 对象上的属性。如果它找到该属性，它会返回该值，并且实际上也会强制其类型，以便“false”变成 Javascriptfalse。如果你然后写.data("xxx", "foo")，该值不会覆盖到 DOM 对象上，而是写入 jQuery 存储，从那时起，所有未来的读写都来自 jQuery.data()店铺。这很有用的原因之一是自定义属性（与自定义属性不同）只能是字符串，但是.data("xxx", yyy)可以编写和存储任何JS数据类型。
因此，如果您想使用已知安全的方法，即使在较旧的浏览器中也不易发生内存泄漏，请使用.data()而不是在 DOM 对象上创建您自己的自定义属性。
我怀疑在未来的某个时候，浏览器可能会被认为足够安全，您可以将 JS 对象引用存储在自定义 DOM 属性中，而不必担心内存泄漏，此时可能没有太多理由使用类似的东西.data()- 尽管上面的问题 #3 仍然存在。
使用时有一些缺点.data().
如果您将大量数据存储在.data()然后你删除相应的 DOM 对象而不使用 jQuery 的方法来删除它（比如你使用.removeChild()直接或您只需设置.innerHTML在父级），数据存储在.data()store 将被孤立并且永远不会被清理，因为 jQuery 不知道相应的 DOM 对象已被删除。这将导致 javascript 中的一些数据保留在您永远不会使用的数据结构中。虽然从技术上讲这并不是泄漏（因为数据仍然可供使用），但它与浪费一些内存具有大致相同的效果。如果你使用.data()，您应该只使用 jQuery 方法来删除或替换 DOM 对象，因为它们可以防止浪费内存。
由于上述问题，当您使用 jQuery 的方法可能导致 DOM 对象被删除时，jQuery 必须做额外的工作来确保.data()使用自己的方法时会被清理。这会降低性能.html("xxx"), .remove(), etc...
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
