jQuery data（）如何打破循环引用 [英] How jQuery data() breaks circular reference

问题描述

我已阅读 为何更好 和如何实施 。但我真正理解的是 它如何打破循环引用？ 。

I have read an why it's better and how it's implemented. But what i don't really understand is how does it break the circular reference?.

它是怎么回事打破参考圈？

how does it break the reference circle?

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

例如，上面的div指向对方，它是如何被阻止的？我有预感，但我只是想确定我的预感是否正确。

like example, the divs above point to each other, how is it prevented? I have a hunch, but i just want to make sure if my hunch is right.

推荐答案

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

The circular reference problem happens in some browsers when you put a reference to a DOM object on a DOM object as a property on that DOM object. Then, you have two DOM objects pointing at each other. Removing a DOM object with a custom property on it doesn't clear that custom property. A garbage collector that isn't that smart doesn't realize that this DOM reference doesn't count so it gets stuck and there are several ways that this can lead to leaks.

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

.data() solves this problem because the .data() data is NOT on the DOM object. It's just a javascript data structure that can be associated with the DOM object via a unique string ID.

这个令人困惑的部分是当你用<$ c阅读时$ c> .data（key）并且在javascript .data（）中找不到键 数据结构，然后，只有这样，jQuery才会在DOM对象上查找名为data-key的属性。但无论何时使用 .data（key，myData）进行编写，它都不会写入DOM对象，只会写入javascript数据结构。

The one confusing part of this is that when you read with .data("key") and the key isn't found in the javascript .data() data structure, then and only then, jQuery will look for an attribute on the DOM object called "data-key". But whenever you write with .data("key", "myData"), it never writes to the DOM object, only to the javascript data structure.

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

Thus, since .data() never writes the data to the DOM object, there can't be any of these types of circular references that some browsers have trouble with.

关于 .data（）还有一些其他有用的东西需要了解。数据结构。当你使用jQuery的 .remove（）从DOM中删除元素或者当你调用 $（elem）.html（new html），jQuery清除任何已删除项目的 .data（）数据。这是一个不将jQuery与普通javascript混合的好例子。如果你正在使用 .data（），那么你应该总是使用jQuery函数从DOM中删除项目，所以 .data（）被适当清理。否则，您可以通过这种方式获取内存泄漏（ .data（）数据可能会泄漏，并且 .data中引用的任何已删除的DOM对象都会泄漏（）可以泄漏。但是，如果你只使用jQuery方法从DOM中删除项目（包括替换innerHTML），那么jQuery将适当地清理东西并且不会有泄漏。

There are some other useful things to know about the .data() data structure. When you use jQuery's .remove() to remove elements from the DOM or when you call $(elem).html("new html"), jQuery clears the .data() data on any removed items. This is one case where it's good not to mix jQuery with plain javascript. If you're using .data(), then you should always remove items from the DOM using jQuery functions so .data() is cleaned up appropriately. Otherwise, you can get memory leaks this way (both the .data() data can leak and any removed DOM objects that are referenced in the .data() can leak. But, if you only use jQuery methods for removing items from the DOM (including the replacing of innerHTML), then jQuery will clean things up appropriately and there will be no leaks.

因此，例如，这会造成内存泄漏：

So, for example, this will create a memory leak:

// 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的存储中孤立，并且本质上是一个泄密，因为它可能永远不会被清除。另一方面，如果你这样做：

Because you removed the DOM element with plain Javascript, jQuery did not have a chance to clean up the data you previously stored. The DOM element itself will be garbage collected, but the .data() value you previously stored is now orphaned in jQuery's storage and is essentially a "leak" as it will likely never be cleared. On the other hand, if you do this:

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

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

Then, jQuery will see that you're removing the DOM element and will also clear the data you stored with .data().

查看其工作原理的一种相当简单的方法是创建一对行脚本使用非最小化版本的jQuery，然后在调试器中逐步调用 $（elem）.data（key，whatever）并观察如何它有效。

A fairly simple way to see how it works is to create a couple line script with a non-minimized version of jQuery and then just step through a call to $(elem).data("key", "whatever") in the debugger and watch how it works.

这篇关于jQuery data（）如何打破循环引用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！