A brief analysis of jQuery's caching mechanism_jquery

When I was studying jQuery’s animation queue not long ago, I discovered that jQuery’s caching system is also very powerful. Although I have had some exposure to it before, I have never studied it in depth. jQuery's caching system is relatively simple when used externally. For example, to store a certain URL data in the cache, just write:

Copy code The code is as follows:

var val = "stylechen.com";
$("div").data( "url" ); // Return undefined
$ ("div").data( "url", val ); // Return "stylechen.com"
$("div").data( "url" ); // Return "stylechen.com"

Not only can it store strings, the val above can also be any data, and objects, arrays, functions, etc. can 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:

Copy code The code is as follows:

var cacheData = {}; // Used to store data Global object
var data = function( key, val ){
if( val !== undefined ){
cacheData[key] = val;
}

return cacheData[key];
};

The real charm of the jQuery caching system lies in its internal applications. Animations, events, etc. all use this caching system. When I was writing easyAnim before, I stored the animation queue in the custom attributes of each DOM element. Although this made it easy to access the queue data, it also brought hidden dangers. Adding custom attributes and too much data to DOM elements may cause memory leaks, so try to avoid doing this.

If you use jQuery's caching system to store the data of a DOM element, a randomly generated attribute will be added to the DOM element first. This attribute is used to store the index value for accessing the cached data, just like the DOM element has an open key. The key to the cache safe, you can open the cache safe at any time as long as you have the 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, so that the risk of memory leaks caused by the DOM element can be minimized. The following is a simple caching system I wrote to simulate jQuery:

Copy the code The code is as follows:

var cacheData = {}, // Global object used to store data
uuid = 0,
// Declare random numbers
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 an attribute of a DOM element
// The random number is the attribute name and the index value is the attribute value
index = key[expando] = uuid;
thisCache = cacheData[ index] = {};
}
else{
index = key[expando];
thisCache = cacheData[index];
}


if( !thisCache[expando] ){
thisCache[expando] = {};
}

if( gambling // Store data in the cache object
thisCache[expando][val] = data;
}

// Return the DOM element stored Data
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{
// IE8 and standard browsers can directly use delete to delete attributes
delete key[expando];
}
catch (e) {
// IE6/IE7 use removeAttribute method to delete attributes
key.removeAttribute(expando);
}
},

index = key[expando];

if( val ){
// Only delete the specified data
delete cacheData[index][expando][val];
// If it is an empty object, simply delete all objects
if( isEmptyObject( cacheData[index][expando] ) ){
delete cacheData[index];
removeAttr();
}
}
else{
// Delete all data stored in the cache for DOM elements
delete cacheData[index];
removeAttr();
}
}
};

What is worth noting about the above code is that using delete to delete a custom attribute in IE6/IE7 will report an error. It can only be deleted using removeAttribute. Standard browsers can use delete to delete. The following is the result of the call:

Copy code 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 caching system is more complicated than mine, but the core principle is still the same. easyAnim will introduce this caching system in subsequent versions.