jquery Tutorial: Data () method to avoid memory leak problem

In the official jQuery document, it is a low-level method to prompt the user that the . Data () method should be used instead. $.data (element, key, value) can append any type of data to a DOM element, but avoid memory leaks caused by circular references as follows:

The Jquery.data () method allows us to attach data of any type to DOM elements in a way ' is safe from circular referenc ES and therefore from memory leaks. We can set several distinct values for a single element and retrieve them later:

But for this method, there is not only the problem. In the jquery forum, the problem is discussed in depth, robert.katic a solution is proposed. The $.data () method is applied to the host object, and the operation is optimized, but the method is used locally on the image, and the result may not be satisfactory. An element can normally be removed by using the. Remove () method and its data is purged. For local objects, however, this is not completely deleted, and the associated data continues until the window object closes. Again, these problems exist in the event object, because the event handler (handlers) is also stored with this method.

The easiest way to solve the problem, then, is to store the data in one of the new properties of the local object. That

// ...
if (Elem.nodetype) {
cache[id] = dataObject;
elem[expando] = ID;
} else {
elem[expando] = dataObject;
}
// ...

However, once inheritance issues are involved, there is no way to do that. Preview

var parent = {};
var Childa = object.create (parent);
var childb = object.create (parent);

$.data (Parent, "Foo", "Parent value");

This may even is intentional
$.data (Childa, "foo")
=> "Parent Value"
$.data (childb, "foo")
=> "Parent Value"

This May is intentional
$.data (Childa, "foo", "Childa value");
$.data (Parent, "foo")
=> "Childa value"
$.data (childb, "foo")
=> "Childa value"

At first, the object that stores the data does not exist, so an object is created to store the new value, as shown

Now, we're trying to modify the object Childa the same data.

Object Childa does not exist in this data, so it looks up along the prototype chain, and the parent object just owns the data, and its value is immediately overwritten. So, getting the value of "Foo" from both parent and childb will result in "Childa value" instead of "parent value".