问jQuery数据()如何打破循环引用

EN

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

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

其中一个令人困惑的地方是，当您使用.data("key")读取并且在javascript .data()数据结构中找不到key时，jQuery就会在名为"data-key"的DOM对象上查找一个属性。但是，无论何时使用.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")的调用，并观察它是如何工作的。