将数据存储到DOM - 元素值与数据属性

Question

要将值存储在DOM元素中,我们可以通过data属性来完成

$("#abc").data("item", 1),检索做 $("#abc").data("item")

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

$("#abc")[0].item = 1,回头做 $("#abc)[0].item

它们之间有什么区别？哪一个更好？哪一个获得更广泛的兼容性？

Answer 1

.data() 存在有几个原因:

1. 如果将JS对象放入DOM对象的属性中,则某些(大多数较旧的)浏览器会出现内存泄漏问题.这在DOM和JS世界(具有单独的垃圾收集器)之间创建了一个引用,这引起了问题并可能导致内存泄漏.通过使用.data()而不是解决该问题的DOM属性来完全保留JS世界中的引用.我真的不知道现代浏览器中存在多少问题.难以测试,更容易使用已知安全的方法.

2. 从历史上看,某些宿主对象不支持使用直接属性语法添加任意属性,例如obj.prop = 1;. .data()这使得你可以将数据与任何对象相关联,无论它是否具有处理任何属性的能力.

3. 名称冲突. .data()在DOM对象上创建一个且只有一个自定义属性,它只是一个id值(一个字符串).然后,您可以随意使用所需的任何键,.data()而无需担心与DOM对象上的预先存在的属性名称冲突. .data()本质上它是自定义属性的自己的名称空间.

4. 阅读HTML5"data-xxx"属性.当您读取.data("xxx")尚未写入实际jQuery数据存储的"data-xxx"属性时,jQuery将读取DOM对象上的属性.如果它找到该属性,它将返回该值并实际强制其类型,以便"false"变为Javascript false.如果你再编写.data("xxx", "foo"),那么该值不会被覆盖到DOM对象上,而是写入jQuery存储,从那时起所有未来的读取都来自jQuery .data()存储.这很有用的一个原因是自定义属性(与自定义属性不同)只能是字符串,但.data("xxx", yyy)可以编写和存储任何JS数据类型.

因此,如果您想使用一种不易出现内存泄漏的已知安全方法,即使在较旧的浏览器中,也要使用.data()而不是在DOM对象上创建自己的自定义属性.

我怀疑在未来的某个时间,浏览器可能会被认为足够安全,你可以在自定义DOM属性中存储JS对象引用,而不必担心内存泄漏,此时可能没有理由使用类似的东西.data()- 尽管问题上面的#3仍然存在.

使用有一些缺点.data().

1. 如果您存储有意义数量的数据.data(),然后删除相应的DOM对象而不使用jQuery的方法将其删除(例如您.removeChild()直接使用或只是设置.innerHTML父项),存储在.data()商店中的数据将被孤立并且永远不会被清除因为jQuery不会知道相应的DOM对象已被删除.这将导致您的javascript中的某些数据保留在您永远不会使用的数据结构中.虽然这在技术上不是泄漏(因为数据仍在使用中),但它与浪费一些内存有很多相同的效果.如果使用.data(),则应该只使用jQuery方法来删除或替换DOM对象,因为它们可以防止浪费内存.

2. 由于上述问题,当您使用可能导致删除DOM对象的jQuery方法时,jQuery必须做额外的工作以确保.data()在使用自己的方法时进行清理.这可以减缓的性能.html("xxx"),.remove()等等...