From jquery cache to event monitor __jquery

A long time ago, I was in the cnblogs when I had to ask a question (just look for a half-day did not find). 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, the "1294122065250" in jQuery1294122065250 is actually a timestamp. Look at the source code for jquery.

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

Because a closure is used, each jquery object has a expando attribute.
The "1" of the property value jquery1294122065250= "1" is actually the cached key of jquery.

First, take a look at the related Api:data (name) of the jquery cache: Returns data (Name,value) of the corresponding name stored on the element: storing the data on the element and returning value. Jquery.data (Element,key,value): Holds the data on the element and returns the JQuery object. Note: This is a low-level 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 on the element is returned and returned as object. Note: This is a low-level method. You should use. Data () instead. Removedata (data): Removes the cache on an element.

The Jquery.data method is the underlying method, and the data method invokes the method. The best way to learn about query caching 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 the execution of $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 to New JQuery.fn.init (selector, context);
},

Map over jQuery into case of overwrite
_jquery = Window.jquery,

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

Jquery.data store all the cache keys is the value 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 through the Jquery.cache.

Caching is bound to have a clear cache, does not clear the cache means very likely IE memory leaks.
Prevent memory leaks in IE
Window isn ' t included so 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, #4280
try {
JQuery.event.remove (jquery.cache[ID].handle.elem);
catch (e) {}
}
}
});
When Window.unload, jquery deletes the elements in Jquery.cache.

jquery's event bindings also take advantage of the jquery cache. The above code listens to the #d1.click event, after debugging, can discover, in the cache key for "events" on the recording of the listening event.


Through the above debugging, found that the so-called event monitoring or binding bind, in fact, is in the cache to register the processing function, when the event is triggered, the DOM of the registered event to execute on it. This is actually a general event-handling mechanism, and event-handling mechanism is a typical observer design pattern.