javascript – jQuery data()如何打破循环引用

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

当将DOM对象上的DOM对象引用作为DOM对象上的属性时,循环引用问题发生在某些浏览器中.然后,您有两个DOM对象指向对方.使用自定义属性删除DOM对象并不会清除该自定义属性.一个不那么聪明的垃圾收集器没有意识到这个DOM引用不会被计数,所以它被卡住,有几种方法会导致泄漏.

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

一个令人困惑的部分是,当用.data(“key”)读取并且在.data()数据结构中找不到键时,那么只有这样,jQuery才会在DOM上寻找一个属性对象称为“数据密钥”.但是每当用.data(“key”,“myData”)编写它时,它都不会写入到DOM对象中,而只能写入到javascript数据结构中.

因此,由于.data()不会将数据写入DOM对象,因此某些浏览器无法使用这些类型的循环引用.

还有一些有用的东西要了解.data()数据结构.当您使用jQuery的.remove()从DOM中删除元素时,或者当您调用$(elem).html(“new html”)时,jQuery会清除任何已删除项目上的.data()数据.这是一个很好的不要混合jQuery和纯Java的一种情况.如果你使用.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”)并观察它是如何工作的.