Read jquery's six (cache data)

Many users prefer to store data on the htmlelement attribute in projects, such

 
<Div DATA = "some data"> test </div> <SCRIPT> Div. getattribute ('data'); // some data </SCRIPT>
 

Added the custom property "data" and value "some data" to the DIV on the page ". Subsequent JSCodeGetattribute.

 

Jquery provides the data/removedata method from 1.2.3 to store/delete data. 1.6.1 code snippet

 
Jquery. Extend ({cache :{}, // please use with cautionuuid: 0 ,...});
 

That is, a static field/method is added to jquery, including jquery. Cache/jquery. UUID/jquery. expando. The following describes

Jquery. CacheEmpty object used for caching. Its structure is complex.

Jquery. UUIDThe unique auto-increment number.

Jquery. expandoString, which is generated using math. Random. Non-numeric characters are removed. It serves as the attribute name of the htmlelement or JS object.

Expando: "jquery" + (jquery. FN. jquery + math. Random (). Replace (/\ D/g ,""),
 

Jquery. nodataJS object. The data method is disabled for the specified htmlelement. Such as embed and applet.

Jquery. hasdataUsed to determine whether an htmlelement or JS object has data. Returns true or false. That is, if the jquery. Data method is called to add attributes, true is returned.

 
<Div> AA </div> <SCRIPT> var DIV = document. getelementsbytagname ('div ') [0]; $. hasdata (DIV); // false $. data (DIV, 'name', 'jack'); $. hasdata (DIV); // true </SCRIPT>
 

 

Jquery. acceptdataUsed to determine whether the element can accept data and return true or false. Used in jquery. Data.

 

Jquery. DataThis is provided to the clientProgramThe method used by the user. It is also setter/getter.

1. Pass a parameter to return all data appended to the specified element, that is, thiscachejquery. Data (EL); // thiscache
2. Two parameters are passed, and the specified property value jquery. Data (El, 'name') is returned ');
3. Upload three parameters to set the attributes and attribute values jquery. Data (El, 'name', 'jack'); jquery. Data (El, 'uu ',{});
4. Four parameters are passed. The fourth parameter PVT is only available for the jquery library. That is, true is passed in the jquery. _ data method. Because jquery's event module is heavily dependent on jquery. Data, to avoid manual overwrites

 

Jquery. removedataDelete data.

The above is the overall overview of the jquery data cache module. The following describes the jquery. Data method in detail. Jquery. Data provides cache for two types of objects: JS object and htmlelement

 
// Provide cache var myobj ={};$ for JS objects. data (myobj, 'name', 'jack'); $. data (myobj, 'name'); // Jack // provides cache for htmlelement <Div id = "XX"> </div> <SCRIPT> var El = document. getelementbyid ('xx'); $. data (El, 'name', 'jack'); $. data (El, 'name'); // Jack </SCRIPT>
 

 

There are also differences in internal implementation,

1. When cache is provided for JS objects, data is directly stored on JS objects.. Cache is a JS object. In this case, a property (similar to jquery1610180109874529044) is secretly added to the JS object, and the property value is also a JS object. Example

 
VaR myobj = {}; $. Data (myobj, 'name', 'jack'); console. Log (myobj );
 

The structure of myobj is as follows:

 
Myobj = {jquery1610180116874529044: {Name: 'jack '}}
 

The string "jquery1610180116874529044" is named as ID in data (note that it is not the ID of the htmlelement). It is actually jquery. expando. As mentioned above, it is randomly generated after jquery. JS is introduced to the page.

 

2. When cache is provided for htmlelement, it is not directly stored on htmlelement.. It is saved on jquery. cache. The cache is jquery. cache. Add an attribute (similar to jquery1610180109874529044) to htmlelement first. The attribute value is a number (1, 2, 3 ). That is, only some numbers are saved on htmlelement, and data is not directly placed. This is because there may be a risk of Memory leakage in older ie versions. How does htmlelement interact with jquery. cache? Or ID. The attribute value is ID. Example

<Div id = "XX"> </div> <SCRIPT> var El = document. getelementbyid ('xx'); $. data (El, 'name', 'jack'); console. log (El [jquery. expando]); // 1console. log (jquery. cache); // {1: {Name: 'jack' }}</SCRIPT>
 

The attribute jquery. expando is added to El and the value is ID. This ID increases progressively from 1. And ID is used as the property (key) of jquery. cache ). In this way, htmlelement is connected with jquery. cache.

I do not know whether this parameter exists. jquery. Data has the fourth PVT parameter, which is only used in jquery. _ data.

 
// For internal use only. _ DATA: function (ELEM, name, data) {return jquery. Data (ELEM, name, Data, true );},
 

Jquery. _ DATA specifies that it is private from the name. Client programmers using jquery should not call this method. Jquery's API documentation will not disclose it.

Almost every version of jquery's data cache module is changing from 1.2.3 to 1.6.1. Jquery. _ data is proposed to prevent the client programmer from overwriting/rewriting the write module. For example, the event handler in the jquery event module uses jquery. Data Storage. If this module is overwritten. The event module is paralyzed. Therefore, the PVT parameter and the jquery. _ data method are added.

But if you want to destroy it, you can still do it. As follows:

<Div id = "XX"> test </div> <SCRIPT> $ ('# xx '). click (function () {alert ('click') ;}); // Statement 1 $. data ($ ('# xx') [0], 'events', '', true); // Statement 2 // $. _ data ($ ('# xx') [0], 'events', ''); </SCRIPT>
 

Clicking Div [ID = XX] will not trigger the click event.

 

The entire process of jquery. Data setting (SET) data caching is like this. The process of getting data is easy to understand. No duplicates.

Finally, I will add the zchain. Data/removedata method to zchian. js. Because it is a "mini version", I only add data cache to htmlelement. Note.

 

Related:

Http://msdn.microsoft.com/en-us/library/Bb250448

Http://bugs.jquery.com/ticket/6807

ZChain-0.6.js