jQuery data(）如何破坏循环引用

How jQuery data() breaks circular reference

本文关键字：何破坏 循环 引用 data jQuery      更新时间：2023-09-26

我读过为什么它更好以及如何实现。但我真正不明白的是它是如何打破循环引用的。

它是如何打破参考圆的？

$(div1).data('item', div2);
$(div2).data('item', div1);

例如，上面的div相互指向，如何防止呢？我有预感，但我只是想确定我的预感是否正确。

在某些浏览器中，当您将对DOM对象的引用作为该DOM对象的属性时，会出现循环引用问题。然后，您有两个相互指向的DOM对象。删除具有自定义属性的DOM对象不会清除该自定义属性。一个不那么聪明的垃圾收集器没有意识到这个DOM引用不算数，所以它会被卡住，这可能会导致泄漏。

.data()解决了这个问题，因为.data()数据不在DOM对象上。它只是一个javascript数据结构，可以通过唯一的字符串ID与DOM对象关联。

其中一个令人困惑的部分是，当您使用.data("key")进行读取时，在javascript .data()数据结构中找不到key，然后jQuery将在DOM对象上查找一个名为"data-key"的属性。但是，无论何时使用.data("key", "myData")进行编写，它都不会写入DOM对象，只写入javascript数据结构。

因此，由于.data()从不将数据写入DOM对象，因此不可能存在某些浏览器遇到问题的这些类型的循环引用。

关于.data()数据结构，还有一些其他有用的信息需要了解。当您使用jQuery的.remove()从DOM中删除元素时，或者当您调用$(elem).html("new html")时，jQuery会清除任何已删除项上的.data()数据。在这种情况下，最好不要将jQuery与纯javascript混合使用。如果您使用的是.data()，那么您应该始终使用jQuery函数从DOM中删除项，以便适当地清理.data()。否则，您可以通过这种方式获得内存泄漏（.data()数据可能泄漏，.data()中引用的任何已删除的DOM对象都可能泄漏。但是，如果您只使用jQuery方法从DOM中删除项（包括替换innerHTML），那么jQuery将适当地清理，不会出现泄漏。

因此，例如，这将导致内存泄漏：

// suppose elem is a DOM element reference
// store some data in jQuery's data storage on behalf of a DOM element
$(elem).data("someKey", "someValue");
// remove DOM element with plain Javascript
elem.parentNode.removeChild(elem);

因为您使用纯Javascript删除了DOM元素，所以jQuery没有机会清理之前存储的数据。DOM元素本身将被垃圾收集，但您以前存储的.data()值现在在jQuery的存储中是孤立的，本质上是一个"泄漏"，因为它可能永远不会被清除。另一方面，如果你这样做：

$(elem).data("someKey", "someValue");
$(elem).remove();

然后，jQuery将看到您正在删除DOM元素，还将清除使用.data()存储的数据。

查看其工作原理的一个相当简单的方法是使用非最小化版本的jQuery创建一个两行脚本，然后在调试器中逐步调用$(elem).data("key", "whatever")并观察其工作原理。

相关文章：