将数据存储到DOM - 元素值与数据属性 [英] Storing data to DOM - Element value vs data attribute

问题描述

为了将值存储在DOM元素中，我们可以通过 data 属性来完成它。
$ b $ p $ <$ c $ （＃abc）。data（item，1），检索do $（＃abc）。data（item）

但今天我了解到，我们也可以这样做：

$（＃abc）[0] .item = 1 ，以检索 $（＃abc）[0] .item

$ b $哪一个更好？哪一个获得更广泛的兼容性？

$ b > $ b

1. 如果您将JS对象放入DOM对象的某个属性中，则某些（大多数较旧的）浏览器会发生内存泄漏问题，从而在DOM和JS世界之间创建了一个引用它们具有独立的垃圾收集器），这会导致问题并可能导致内存泄漏。通过使用 .data（）而不是DOM属性解决该问题，从而完全保留JS世界中的引用。 ID不要老老实实地知道现代浏览器仍然存在多少问题。很难测试，更容易使用已知安全的方法。
   

2. 历史上，一些主机对象不支持任意属性添加，直接属性语法如 obj.prop = 1; 。 .data（）使得它可以将数据与任何对象关联，无论它是否具有处理任何属性的能力。

$ b

3. 名称冲突。 .data（）在一个DOM对象上创建一个且只有一个定制属性，它只是一个id值（一个字符串）。然后，您可以随意使用任何您想要的键和 .data（），而不用担心与DOM对象上预先存在的属性名冲突。 .data（）本质上是自定义属性的名称空间。

阅读HTML5data- xxx属性。当您读取尚未写入实际jQuery数据存储的 .data（xxx）属性时，jQuery将读取数据-xxx属性。如果它找到该属性，它将返回该值并实际强制其类型，以便将false转换为Javascript false 。如果您然后编写 .data（xxx，foo），则该值不会覆盖到DOM对象上，而会写入jQuery存储器，并从此所有将来的读操作都来自jQuery .data（）存储。其中一个有用的原因是自定义属性（与自定义属性不同）只能是字符串，但 .data（xxx，yyy）可以编写和存储任何JS数据类型。

因此，如果您想使用不易发生内存泄漏的已知安全方法，即使在旧版浏览器中，也可以使用 .data（），而不是在DOM对象上创建自定义属性。

我怀疑在将来某个时候，浏览器可能会被认为是足够安全的，您可以将JS对象引用存储在自定义DOM属性中，而不必担心内存泄漏，此时可能会有更少的原因使用 .data（） - 尽管上面的问题＃3仍然存在。

---

使用 .data（）有一些缺点。
$ b

1. 如果您在 .data（）然后删除相应的DOM对象，而不使用jQuery的方法来删除它（例如直接使用 .removeChild（）或者只设置 .innerHTML 存储在 .data（）存储中的数据将是孤立的，并且从不清理，因为jQuery不会知道相应的DOM对象已被删除。这会导致JavaScript中的一些数据保存在您永远不会使用的数据结构中。虽然这在技术上不是泄漏（因为数据仍在使用中），但它具有与浪费一些内存大致相同的效果。如果使用 .data（），则应该只使用jQuery方法来删除或替换DOM对象，因为它们可以防止浪费的内存。

$ b

2. 由于上述问题，当您使用可导致删除DOM对象的jQuery方法时，jQuery必须做额外的工作以确保 .data（）在使用自己的方法时被清除。这会降低 .html（xxx）， .remove（）等的性能。

To store values in a DOM element, we can do it through data attribute

$("#abc").data("item", 1), to retrieve do $("#abc").data("item")

But today I learned that we can do it this way also:

$("#abc")[0].item = 1, to retrive do $("#abc)[0].item

What are the differences between them? Which one is better? Which one gets a wider compatibility?

解决方案

.data() exists for a couple reasons:

1. Some (mostly older) browsers had memory leak issues if you put a JS object into a property on a DOM object. This created a reference between the DOM and JS world (which have separate garbage collectors) which caused problems and could result in memory leaks. Keep references entirely in the JS world by using .data() instead of a DOM property solved that issue. I don't honestly know how much of an issue this still is in modern browsers. Hard to test, easier to just use the known-safe approach.

2. Historically, some host objects did not support arbitrary property addition with direct property syntax such as obj.prop = 1;. .data() made it so you could associate data with any object regardless of whether it had the ability to handle any arbitrary property.

3. Name collisions. .data() creates one and only one custom property on a DOM object which is just an id value (a string). You are then free to use any keys you want with .data() with zero worry about conflicting with a pre-existing property name on a DOM object. .data() is essentially it's own name space for custom properties.

4. Reading HTML5 "data-xxx" attributes. When you read a .data("xxx") property that has not yet been written to the actual jQuery data store, jQuery will read a "data-xxx" attribute on the DOM object. If it finds that attribute, it returns that value and actually coerces its type too so that "false" gets turned into the Javascript false. If you then write .data("xxx", "foo"), the value is not overwritten onto the DOM object, but is written to the jQuery storage and from then on all future reads writes are from the jQuery .data() store. One reason this is useful is that custom attributes (which are different than custom properties) can only be strings, but .data("xxx", yyy) can write and store any JS data type.

So, if you want to use a known-safe method that is not prone to memory leaks, even in older browsers, use .data() rather than making your own custom property on a DOM object.

I suspect it's possible that at some future time, browsers will be considered safe enough that you can store JS object references in custom DOM properties and not have to worry about memory leaks at which time there may be less reasons to use something like .data() - though issue #3 above will still exist.

---

There are some disadvantages to using .data().

1. If you store meaningful amounts of data in .data() and then you remove the corresponding DOM object without using jQuery's methods to remove it (such as you use .removeChild() directly or you just set .innerHTML on a parent), the data stored in the .data() store will be orphaned and never cleaned up because jQuery will not know the corresponding DOM object has been removed. This will result in some data in your javascript being kept in the data structure that you won't ever be using. While this isn't technically a leak (as the data is still there for use), it has much the same effect of wasting some memory. If you use .data(), you should only use jQuery methods for removing or replacing DOM objects because they prevent the wasted memory.

2. Because of the above issue, when you are using jQuery's methods that can result in the removal of DOM objects, jQuery has to do extra work to make sure .data() is cleaned up when using its own methods. This can slow down the performance of .html("xxx"), .remove(), etc...

这篇关于将数据存储到DOM - 元素值与数据属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！