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

前端之家收集整理的这篇文章主要介绍了javascript – jQuery data()如何打破循环引用前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经读了 why it’s betterhow it’s implemented.但是我不太明白的是,它是如何破坏循环引用的?

它如何打破参考圈?

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

像例子,上面的div指向对方,怎么防止?我有一个预感,但我只是想确定我的预感是正确的.

解决方法

当将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”)并观察它是如何工作的.

猜你在找的jQuery相关文章