Analysis of the caching mechanism of jquery _jquery

In a recent study of the jquery animation queue, the discovery of jquery's cache system is also strong, although it has been a bit of contact before, but has not been thoroughly studied. jquery's caching system is simpler to use externally, such as saving a URL data to the cache as long as it is written:

Copy Code code as follows:

var val = "Stylechen.com";
$ ("div"). Data ("url"); Back to undefined
$ ("div"). Data ("url", Val); Return to "stylechen.com"
$ ("div"). Data ("url"); Return to "stylechen.com"

Not only can you store strings, the Val above can also be arbitrary data, objects, arrays, functions, etc. can be stored inside. Just implementing this functionality is fairly straightforward, declaring a global object to store data, and then using the data method to store or return it:

Copy Code code as follows:

var cachedata = {}; The global object used to store the data
var data = function (key, Val) {
if (val!== undefined) {
Cachedata[key] = val;
}

return Cachedata[key];
};

The real charm of the jquery caching system is that it is used in its internal applications, such as animations, events, and so on. Before I wrote Easyanim, I stored the animation queues in the custom properties of the DOM elements, which made it easy to access the queue data, but also caused pitfalls. If you add custom attributes and too much data to a DOM element that can cause a memory leak, try to avoid doing so.

If you are using jquery's caching system to store data for DOM elements, a randomly generated attribute is added to the DOM element to hold the indexed value of accessing the cached data, just as a DOM element has a key that opens the cache safe, and can be opened at any time with a key. The data that was originally stored in the DOM element is transferred to the cache, and the DOM element itself simply stores a simple attribute, which minimizes the risk of memory leaks caused by DOM elements. Here's a simple caching system I've modeled on jquery myself:

Copy Code code as follows:

var cachedata = {},//Global object used to store data
UUID = 0,
declaring 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 a property of a DOM element
   //random number is a property name index value is an attribute value
   index = Key[expando] = UUID;
   thiscache = Cachedata[index] = {};
  }
  else{
   index = Key[expando];
   thiscache = Cachedata[index];
  }

  
  if (!thiscache[expando]) {
   thiscache[expando] = {};
 &NBSP}

  if (<a href= "http://jb51.net" >gambling</a> data!== undefined) {
   //the data to the cached object
   thiscache[expando][val] = data;
&NBSP;&NBSP}

  //returns 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
}
Detects if an 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 use delete directly to remove attributes
Delete Key[expando];
}
catch (e) {
Ie6/ie7 use the RemoveAttribute method to delete a property
Key.removeattribute (expando);
}
},

index = Key[expando];

if (val) {
Delete only the specified data
Delete Cachedata[index][expando][val];
If it's an empty object, simply delete it all.
if (Isemptyobject (Cachedata[index][expando])) {
Delete Cachedata[index];
Removeattr ();
}
}
else{
Remove all data that the DOM element is saved to the cache
Delete Cachedata[index];
Removeattr ();
}
}
};

The above code is noteworthy is that the IE6/IE7 use Delete to delete the custom properties will be an error, you can only use RemoveAttribute to remove, the standard browser can use Delete to delete. The following is the result of the call:

Copy Code code 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, the jquery caching system is a bit more complicated than mine, but the core principle is the same. Easyanim will introduce this caching system in subsequent releases.