Analysis of jQuery's caching mechanism

This article mainly introduces the caching mechanism of jQuery, and simulates jQuery to write a simple cache system instance. For more information about jQuery's animation queue, it is found that jQuery's cache system is also very powerful. Although I have been a little touched on it before, I have never studied it in depth. JQuery's cache system is relatively simple for external applications. For example, to save a URL data to the cache, you only need to write it like this:

The Code is as follows:

Var val = "stylechen.com ";
$ ("P"). data ("url"); // return undefined
$ ("P"). data ("url", val); // return "stylechen.com"
$ ("P"). data ("url"); // return "stylechen.com"

Not only can strings be stored, but the val above can also be any data. Objects, arrays, and functions can all be stored in it. It is quite simple to implement this function. Declare a global object to store data, and then use the data method to store or return data:

The Code is as follows:

Var cacheData ={}; // global object used to store data
Var data = function (key, val ){
If (val! = Undefined ){
CacheData [key] = val;
}

Return cacheData [key];
};

The true charm of the jQuery cache system lies in the fact that animations and events are useful in its internal applications. When I was writing easyAnim, I stored the animation queue to the custom attributes of various DOM elements. This allowed me to conveniently access the queue data, but also brought about potential risks. If you add custom attributes and excessive data to the DOM element, memory leakage may occur. Avoid doing so as much as possible.

If jQuery's cache system is used to store the data of a DOM element, a random attribute is added to the DOM element to store the index value for accessing the cache data, just like DOM elements all have a key to enable the cache safe, and you can enable the cache safe at any time if you have a key. The data originally stored in the DOM element is transferred to the cache, And the DOM element itself only needs to store a simple attribute, in this way, the risk of Memory leakage caused by DOM elements can be minimized. The following is a simple cache system I wrote by simulating jQuery:

The Code is as follows:

Var cacheData ={}, // global object used to store data
Uuid = 0,
// Declare a random number
Expando = "cacheData" (new Date () ""). slice (-8 );

Var data = function (key, val, data ){
If (typeof key = "string "){
If (val! = Undefined ){
CacheData [key] = val;
}

Return cacheData [key];
}
Else if (typeof key = "object "){
Var index,
ThisCache;

If (! Key [expando]) {
// Add attributes of a DOM Element
// Random number is attribute name index value is attribute value
Index = key [expando] = uuid;
ThisCache = cacheData [index] = {};
}
Else {
Index = key [expando];
ThisCache = cacheData [index];
}


If (! ThisCache [expando]) {
ThisCache [expando] = {};
}

If (gambling data! = Undefined ){
// Save the data to the cache object
ThisCache [expando] [val] = data;
}

// Return the data stored by the DOM Element
Return thisCache [expando] [val];
}
};

Var removeData = function (key, val ){
If (typeof key = "string "){
Delete cacheData [key];
}
Else if (typeof key = "object "){
If (! Key [expando]) {
Return;
}
// Check whether the object is empty
Var isEmptyObject = function (obj ){
Var name;
For (name in obj ){
Return false;
}
Return true;
},

RemoveAttr = function (){
Try {
// You can use delete to delete attributes in IE8 and standard browsers.
Delete key [expando];
}
Catch (e ){
// IE6/IE7 use removeAttribute to delete attributes
Key. removeAttribute (expando );
}
},

Index = key [expando];

If (val ){
// Only delete the specified data
Delete cacheData [index] [expando] [val];
// Delete All null objects
If (isEmptyObject (cacheData [index] [expando]) {
Delete cacheData [index];
RemoveAttr ();
}
}
Else {
// Delete all data stored in the cache by the DOM Element
Delete cacheData [index];
RemoveAttr ();
}
}
};

In the code above, it is worth noting that an error is returned when you use delete to delete a custom attribute in IE6/IE7. You can only use removeAttribute to delete the attribute. standard browsers can use delete to delete the attribute. The following is the result of the call:

The Code is as follows:

Var box = document. getElementById ("box "),
List = document. getElementById ("list ");

Data (box, "myName", "chen ");
Alert (data (box, "myName"); // chen

Data (box, "myBlog", "stylechen.com ");
Alert (data (box, "myBlog"); // stylechen.com

RemoveData (box, "myBlog ");

Alert (data (box, "myBlog"); // undefined
Alert (data (box, "myName"); // chen
Alert (box [expando]); // 1

RemoveData (box );
Alert (box [expando]); // undefined

Of course, jQuery's cache system is more complex than mine, but the core principle is the same. EasyAnim will introduce this cache system in later versions.