From jquery cache to event snooping

A long time ago, I still in the cnblogs inside the time to ask a question (just looked for a half a 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, "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 jus     T 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 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, 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.

From jquery cache to event snooping