Preface
For jquery data caching, I believe that everyone is not unfamiliar, the jquery caching system is not only used in DOM elements, animation, events, etc. are useful to this caching system. So in peacetime applications, we often need to cache some of the elements of the data, and this data is often closely related to the DOM elements. Because DOM elements (nodes) are also objects, we can extend the properties of DOM elements directly, but if you add custom attributes and too much data to a DOM element that can cause a memory leak, you should try to avoid doing so. A better solution, therefore, is to use a low coupling method to connect the DOM to the cached data.
Also: for Jquery.data and Jquery.removedata static methods, and for the introduction and usage of the prototype extension methods based on these two methods, you can view the official API documentation.
realize the idea
jquery provides a set of flexible and powerful caching methods:
(1) First create a cache object {} inside jquery to hold the cached data. Then extend a property with a value of expando on the DOM node that needs to be cached, this is "jQuery" + (new Date). GetTime (). Note: The value of expando equals "jQuery" + current time, the element itself has very little likelihood of this attribute, so you can ignore the conflict.
(2) Then the value of each node's Dom[expando] is set to a self increasing variable ID, which remains globally unique. The value of this ID is used as the cache key to correlate the DOM node and the data. That is, Cache[id] takes all the caches on this node, that is, the ID is like a key to open a room (DOM node). All the caches of each element are placed in a map map so that multiple data can be cached at the same time.
(3) So the cache object structure should look like the following:
Copy Code code as follows:
var cache = {
"Uuid1": {//DOM node 1 cached data, "UUID1" equals Dom1[expando]
"Name1": value1,
"Name2": value2
},
"Uuid2": {//DOM node 2 cached data, "Uuid2" equals Dom2[expando]
"Name1": value1,
"Name2": value2
}
// ......
};
Each UUID corresponds to a elem cached data, and each cached object can be composed of multiple name/value (name-value pairs), and value can be of any data type.
Simple Simulation Implementation
Based on the above ideas, you can simply implement the Jquery.data and Jquery.removedate functions:
Copy Code code as follows:
(Function (window, undefined) {
var cachedata = {},//object used to store data
Win = window,//cache window to a variable
UUID = 0,
Declare random number (8-bit)
Note that the random number generated by the +new Date () is of type A, and the slice method can be used only after an empty string is concatenated (or transformed using the ToString method) into a string.
expando = "CacheData" + (+new Date () + ""). Slice (-8);
(+new Date ()). ToString (). Slice (-8) is equivalent to expando
Write Cache
var data = function (elem, name, value) {
Or use native method to validate string Object.prototype.toString.call (elem) = = "[Object String]"
If Elem is a string
if (typeof Elem = = "string") {
Write cache If the name parameter is passed in
if (name!== undefined) {
Cachedata[elem] = name;
}
Return cached data
return Cachedata[elem];
If Elem is a DOM node
else if (typeof Elem = = "Object") {
var ID,
Thiscache;
If the expando property is not present in Elem, add a expando property (first to set the cache for the element), otherwise get the existing expando and ID values directly
if (!elem[expando]) {
id = Elem[expando] = ++uuid;
Thiscache = Cachedata[id] = {};
} else {
id = Elem[expando];
Thiscache = Cachedata[id];
}
A random number is used as an attribute of the current cached object, and the cached object can be found by using the random number
if (!thiscache[expando]) {
Thiscache[expando] = {};
}
if (value!== undefined) {
To save data to a cached object
Thiscache[expando][name] = value;
}
Returns data stored by DOM elements
return Thiscache[expando][name];
}
};
Delete Cache
var removedata = function (elem, name) {
If Elem is a string, delete the property value directly
if (typeof Elem = = "string") {
Delete Cachedata[elem];
If the key is a DOM node
else if (typeof Elem = = "Object") {
If the expando property is not present in Elem, execution is terminated without deleting the cache
if (!elem[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 is a standard browser that can use Delete to delete a property
Delete Elem[expando];
catch (e) {
Ie6/ie7 use the RemoveAttribute method to delete a property
Elem.removeattribute (expando);
}
},
id = Elem[expando];
if (name) {
Delete only the specified data
Delete Cachedata[id][expando][name];
If the object is empty, the data object corresponding to the ID is deleted.
if (Isemptyobject (Cachedata[id][expando])) {
Delete Cachedata[id];
Removeattr ();
}
} else {
Remove all data that the DOM element is saved to the cache
Delete Cachedata[id];
Removeattr ();
}
}
};
Hang the data and removedata under the window global object so that you can access both functions externally
Win.expando = expando;
Win.data = data;
Win.removedata = Removedata;
}) (window, undefined);
Example:
HTML structure:
Copy Code code as follows:
<div id= "Demo" style= "height:100px; width:100px; Background: #ccc; Color: #fff; margin:20px; Text-align:center; line-height:100px; " >
Demo
</div>
JS Code:
Copy Code code as follows:
Window.onload = function () {
Test
var demo = document.getElementById ("demo");
Write Cache
Data (demo, "MyName", "homocysteine");
Console.log (Data (demo, "MyName")); Homocysteine
Data (demo, "MyBlog", "Http://www.cnblogs.com/cyStyle");
Console.log (Data (demo, "MyBlog")); Http://www.cnblogs.com/cyStyle
Delete a cache value for a DOM element
Removedata (demo, "MyBlog");
Console.log (Data (demo, "MyBlog")); Undefined
Console.log (Data (demo, "MyName")); Homocysteine
Console.log (Demo[expando]); 1
removing DOM elements
Removedata (demo);
Console.log (Demo[expando]); Undefined
};
Firefox Example results screenshot:
For the above example, a simple caching system for jquery: First add a randomly generated attribute expando to the DOM element, which holds the ID value of accessing the cached data, just as the DOM element has a key to the cache safe, which can be opened at any time with a key. The data that was originally stored in the DOM element is transferred to the cache, the DOM element itself simply stores a simple attribute, so that the risk of a memory leak caused by a DOM element (what the situation does not know, as everyone says ~) can be avoided to the minimum.
Conclusion
Confused and finally, there are some terms or explanations may be biased, look at the children's shoes and give some suggestions; In addition, the data and Removedata methods can be used in any object cache, in theory, but if applied to local objects or window objects, there is a memory leak, Issues such as circular references (^_^ seen from the web), so it is generally appropriate for DOM nodes, and can also combine events and animations to cache data for DOM nodes. Ps:cache is really important! Need to understand slowly ~
Because sharing, so simple, because of sharing, so happy.
