From jquery cache to event snooping

I wonder if anyone has found that the jquery********* attribute is added to the DOM after "select" with the jquery selector.

<div id=d1 jquery1294122065250= "1" >abc </DIV>

First of all, "1294122065250" in jQuery1294122065250 is actually a time stamp. Look at the source code for jquery.

var expando = "JQuery" + Now (), uuid = 0, windowdata = {};

Since closures are used, each jquery object has a expando property.
The attribute value jquery1294122065250= "1" of "1" is actually the cache key of jquery.

First look at the relevant API for the jquery cache:

• Data (name): Returns the corresponding name stored on the element
• Data (Name,value): The element is stored and the value is returned.
• Jquery.data (Element,key,value): stores data on an element and returns a jquery object. Note: This is an underlying method. You should use. Data () instead.
• Jquery.data ([Element],[key]): Queries the data stored on the element. If you do not specify a parameter, all data stored above the element is returned as an object. Note: This is an underlying method. You should use. Data () instead.
• Removedata (data): Removes the cache on the element.

The Jquery.data method is the underlying method, and the data method calls the method. The best way to understand the cache of query is to debug the jquery code.

<script type= "Text/javascript" >
$ (function () {
var $d 1= $ ("#d1");
$d 1.data ("Key", "value");
var v = $d 1.data ("key");

$d 1.click (function () {
Alert ("click");
});
For (var k in Jquery.cache) {
Alert (k + "\ n" +jquery.cache[k]);
}
Debugger
});
</script>
<div id= "D1" class= "" >
Abc
</div>

The above is a simple jquery code. After executing the $d1.data ("key", "value"); After debugging, you can find

jquery is a global variable:

Define a local copy of JQuery
var jQuery = function (selector, context) {
The JQuery object is actually just the Init constructor ' enhanced '
return new JQuery.fn.init (selector, context);
},

Map over JQuery in case of overwrite
_jquery = Window.jquery,

Map over the $ in case of overwrite
_$ = window.$,

Jquery.data stores all cache keys as the values of the DOM attribute jquery********* mentioned above.
Here is the key code to read the cached data function:

Data:function (elem, name, data) {
var id = elem[expando], cache = Jquery.cache, thiscache;

Thiscache = cache[ID];

return typeof name = = = "string"? thiscache[name]: Thiscache;
},

The debug ID is consistent with the jquery******** property. Gets the cached value directly from the Jquery.cache.

Having a cache will inevitably have a clear cache, and not clearing the cache means there is a good chance of IE memory leaks.

Prevent memory leaks in IE
Window isn ' t included as not to unbind existing unload events
More info:
-http://isaacschlueter.com/2006/10/msie-memory-leaks/
if (window.attachevent &&!window.addeventlistener) {
Window.attachevent ("OnUnload", function () {
for (Var ID in Jquery.cache) {
if (jquery.cache[ID].handle) {
Try/catch is to handle iframes being unloaded, see #4280
try {
JQuery.event.remove (jquery.cache[ID].handle.elem);
} catch (e) {}
}
}
});
}

When Window.unload, jquery will delete the elements in the Jquery.cache.

jquery's event bindings also take advantage of jquery's cache. After the above code listens to the #d1.click event, after debugging, it can be found that the listener event is recorded on the cache key for "events".


Through the above debugging, found that the so-called event monitoring or binding bind, in fact, is in the cache register the processing function, when the event is triggered, the DOM's registered events are executed one by one. This is actually a general event handling mechanism, and event handling mechanism is a typical observer design pattern.