Read jquery Six cache data features introduction _jquery

Source: Internet
Author: User
Tags uuid jquery library
Many students like to store data on htmlelement properties in projects, such as
Copy Code code as follows:

<div data= "Some data" >Test</div>
<script>
Div.getattribute (' data '); Some data
</script>

Add the custom Attribute "data" and the value "some data" to the div in the page. Subsequent JS code in the use of getattribute to obtain.
jquery provides a data/removedata method from 1.2.3 to store/delete data. 1.6.1 Code Fragment
Copy Code code as follows:

Jquery.extend ({
Cache: {},
Use with caution
uuid:0,
...
});

That is, add a static field/method to JQuery, there are jquery.cache/jquery.uuid/jquery.expando and so on. The following are described separately
Jquery.cache empty object, used for caching. Its structure is more complex.
Jquery.uuid a unique number.
Jquery.expando strings, using math.random generation, and eliminating non-numeric characters. It acts as the property name of the HtmlElement or JS object.
Copy Code code as follows:

expando: "JQuery" + (JQuery.fn.jquery + math.random ()). Replace (/\d/g, ""),

Jquery.nodata a JS object that disables the data method for the specified htmlelement. such as embed, applets.
Jquery.hasdata is used to determine whether htmlelement or JS objects have data. Returns TRUE or FALSE. That is, returns true if the Jquery.data method has been invoked to add a property.
Copy Code code as follows:

<div>aa</div>
<script>
var div = document.getelementsbytagname (' div ') [0];
$.hasdata (DIV); False
$.data (Div, ' name ', ' Jack ');
$.hasdata (DIV); True
</script>

Jquery.acceptdata is used to determine whether the element can accept data, return TRUE or false. Used in Jquery.data.
Jquery.data This is a method that is available to client programmers, and it is setter/getter.
1, passing a parameter that returns all the data appended to the specified element, that is, Thiscachejquery.data (EL); Thiscache
2, passing two parameters, returns the specified property value Jquery.data (el, ' name ');
3, pass three parameters, set properties and property values Jquery.data (el, ' name ', ' Jack '); Jquery.data (el, ' Uu ', {});
4, four parameters, the fourth parameter Pvt is only available to the jquery library itself. That is, the Jquery._data method returns True. Because the jquery event module relies heavily on jquery.data, to avoid artificially inadvertently rewriting it in this version.
Jquery.removedata Delete data.
The above is a comprehensive overview of the jquery data caching module, the Jquery.data method is described in detail below. Jquery.data provides caching for two kinds of objects: JS objects and HtmlElement
Copy Code code as follows:

Provides caching for JS objects
var myobj = {};
$.data (myobj, ' name ', ' Jack ');
$.data (myobj, ' name '); Jack
Providing caching 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 implementations,
1, for the JS object to provide caching, the data directly stored in the JS object. Cache for JS object. At this time will secretly to the JS object to add a property (similar to jQuery16101803968874529044), the property value is also a JS object. Give an example to explain
Copy Code code as follows:

var myobj = {};
$.data (myobj, ' name ', ' Jack ');
Console.log (myobj);

The structure of the myobj is as follows
Copy Code code as follows:

MyObj = {
jQuery16101803968874529044: {
Name: ' Jack '
}
}

The string "jQuery16101803968874529044" is named ID inside the data (note that it is not the ID of the htmlelement element), it is actually jquery.expando. It has been mentioned above that it was randomly generated after Jquery.js was introduced into the page.
2, when caching is provided for htmlelement, it is not stored directly on the htmlelement. Instead, it is kept on Jquery.cache. Cache for Jquery.cache. The htmlelement is added to the attribute (similar to jQuery16101803968874529044), and the property value is a number (1,2,3 increments). That is, only some numbers are saved on the htmlelement, and data is not placed directly into it. This is because there may be a memory leak risk in the older version of IE. And how does htmlelement establish contact with Jquery.cache? or an ID. Just mentioned the attribute value number is the ID. Give an example to explain
Copy Code code as follows:

<div id= "XX" ></div>
<script>
var el = document.getElementById (' xx ');
$.data (el, ' name ', ' Jack ');
Console.log (El[jquery.expando]); 1
Console.log (Jquery.cache); {1: {name: ' Jack '}}
</script>

Attribute Jquery.expando was added on El, with the value ID, which is incremented from 1. The ID is also used as the Jquery.cache property (key). In this way HtmlElement and Jquery.cache established contact. As shown in figure



I'm not aware of that, Jquery.data also has the fourth parameter Pvt, which is used only in Jquery._data.

Copy Code code as follows:

For internal.
_data:function (elem, name, data) {
Return Jquery.data (elem, name, data, true);
},

JQUERY._DATA specifies that it is private, and the client programmer using jquery should not call the method. It is not disclosed in JQuery's API documentation.
jquery's data caching module is changing from 1.2.3 to 1.6.1 almost every version. Jquery._data's proposal is to avoid client programmers overwriting/rewriting the dictation module. Use Jquery.data storage, such as event handler in the jquery event module, if the module is rewritten. Then the event module will be paralyzed. Therefore, PVT parameters and Jquery._data method have been deliberately added.
But if you deliberately want to destroy, then still can do. As follows
Copy Code code 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>

Click Div[id=xx] will not trigger the Click event.
The entire Jquery.data setting (set) data caching process is the case, understood by this. The process of fetching data (get) is well understood. Do not repeat.
Finally, I'll add the Zchain.data/removedata method to Zchian.js, because it's "mini" and just add the data cache to HtmlElement. Please note that.

Related:
http://msdn.microsoft.com/en-us/library/Bb250448
http://bugs.jquery.com/ticket/6807
Zchain-0.6.js

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.