Read jquery VI (cache data)

Many students in the project like to store data on the HtmlElement property, such as

1234	<div data="some data">Test</div><script>    div.getAttribute(‘data‘); // some data</script>

Added the custom attribute "data" and the value "some data" to the div in the page. Subsequent JS code is obtained using GetAttribute.

jquery provides the Data/removedata method to store/delete data from 1.2.3. 1.6.1 Code Snippets

123456

jQuery.extend({    cache: {},    // Please use with caution    uuid: 0,    ...});

This adds static fields/methods to JQuery, Jquery.cache/jquery.uuid/jquery.expando, and so on. The following are respectively

Jquery.cache An empty object that is used for caching. Its structure is more complex.

Jquery.uuid The unique number from the increment.

The Jquery.expando string, generated using Math.random, is stripped of non-numeric characters. It acts as the property name of the HtmlElement or JS object.

1	expando: "jQuery"+ ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, ""),

jquery.nodata JS object, disables the data method for the specified htmlelement. such as embed, applets.

Jquery.hasdata is used to determine whether the HtmlElement or JS object has data. Returns TRUE or FALSE. That is, returns true if the property was added with the Jquery.data method called.

1234567

<div>aa</div><script>    vardiv = document.getElementsByTagName(‘div‘)[0];    $.hasData(div); // false    $.data(div, ‘name‘,‘jack‘);    $.hasData(div); // true</script>

The jquery.acceptdata is used to determine whether the element can accept data and return TRUE or false. Used in Jquery.data.

Jquery.data This is the method that is provided to the client programmer, and it is also a setter/getter.

1. Passes a parameter that returns all data appended to the specified element, that is, Thiscachejquery.data (EL); Thiscache
2. Pass two parameters, return the specified attribute value jquery.data (el, ' name ');
3. Pass three parameters, set the attribute and attribute value Jquery.data (el, ' name ', ' Jack '); Jquery.data (el, ' Uu ', {});
4. Pass four parameters, the fourth parameter Pvt is only available to the jquery library itself. That is, the Jquery._data method passes true. Because jquery's event module relies heavily on Jquery.data, in order to avoid the artificial careless rewriting of the added in this version

jquery.removedata Delete data.

Above is an overall overview of the jquery data cache module, which below details the Jquery.data method. Jquery.data provides caching for two types of objects: JS objects and HtmlElement

123456789101112

// 为JS对象提供缓存varmyObj = {};$.data(myObj, ‘name‘, ‘jack‘);$.data(myObj, ‘name‘); // jack // 为HTMLElement提供缓存<div id="xx"></div><script>    varel = document.getElementById(‘xx‘);    $.data(el, ‘name‘, ‘jack‘);    $.data(el, ‘name‘); // jack</script>

There are also differences in internal implementations,

1, when providing the cache for the JS object, save the data directly on the JS object . The cache is a JS object. This will secretly add a property to the JS object (similar to jQuery16101803968874529044), the property value is also a JS object. Examples Show

123	varmyObj = {};$.data(myObj, ‘name‘, ‘jack‘);console.log(myObj);

The structure of the myobj is as follows

12345

myObj = {    jQuery16101803968874529044 : {        name : ‘jack‘    }}

The string "jQuery16101803968874529044" is named ID within data (note not the ID of the htmlelement element), which is actually jquery.expando. As mentioned above, it was randomly generated after the jquery.js was introduced to the page.

2, when caching is provided for htmlelement, it is not stored directly on the HtmlElement . Instead, it is kept on Jquery.cache. The cache is Jquery.cache. At this point, you add a property (similar to jQuery16101803968874529044) to HtmlElement, and the value of the property is a number (incremented by zero). That is, only some numbers are saved on the HtmlElement, and the data is not placed directly into it. This is because there may be a risk of memory leaks in older versions of IE. And how does htmlelement establish contact with Jquery.cache? or an ID. Just mentioned that the attribute value number is the ID. Examples Show

1234567

<div id="xx"></div><script>    varel = document.getElementById(‘xx‘);    $.data(el, ‘name‘, ‘jack‘);    console.log(el[jQuery.expando]); // 1    console.log(jQuery.cache); // {1 : {name:‘jack‘}}</script>

　　

An attribute Jquery.expando is added to the El, and the value is the ID, which is incremented from 1. The ID is also used as the Jquery.cache attribute (key). In this way, HtmlElement has established a connection with Jquery.cache.

I don't know, jquery.data there is a fourth parameter Pvt, which is only used in Jquery._data.

1234	// For internal use only._data: function( elem, name, data ) {    returnjQuery.data( elem, name, data, true);},

　　

JQUERY._DATA specifies that it is private, and that the client programmer using jquery should not call the method. It is not exposed on JQuery's API documentation.

jquery's data cache module is changing from 1.2.3 to 1.6.1 in almost every version. Jquery._data is proposed to avoid the client programmer overwriting/rewriting the dictation module. such as event handler in the JQuery event module and so on are used jquery.data storage, if the module is rewritten. Then the event module will be paralyzed. Therefore, PVT parameters and Jquery._data methods are specially added.

But if you deliberately want to destroy, then you can still do. As follows

12345678910

<div id="xx">Test</div><script>    $(‘#xx‘).click(function(){        alert(‘click‘);    });    // 语句1    $.data($(‘#xx‘)[0], ‘events‘, ‘‘, true);    // 语句2    //$._data($(‘#xx‘)[0], ‘events‘, ‘‘);</script>

　　

Clicking on div[id=xx] will not trigger a click event.

The entire Jquery.data set (set) data caching process is so, understand 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-version" and only adds the data cache to HtmlElement. Please note that.

Related:

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

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

Z.js

Read jquery VI (cached data)