Read jQuery Part 6: Introduction to cache data function_jquery

Many students like to store data in HTMLElement attributes in projects, such as

Copy code The code is as follows:

Test

<script> <br>div.getAttribute('data'); // some data <br></script&gt ; <BR></div> <BR>Add custom attribute "data" and value "some data" to the div on the page. Use getAttribute to obtain it in subsequent JS code. <BR>jQuery has provided the data/removeData method since 1.2.3 to store/delete data. 1.6.1 Code snippet <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="38220" class="copybut" id="copybut38220" onclick="doCopy('code38220')"><U>Copy code </U></a></span> The code is as follows: </div><div class="codebody" id="code38220"> <BR>jQuery.extend({ <BR>cache: {}, <BR>// Please use with caution <BR>uuid: 0, <BR>... <BR>}); <BR></div> <BR> adds a static field to jQuery /Methods, including jQuery.cache/jQuery.uuid/jQuery.expando, etc. The following introduces the <BR>jQuery.cache empty object, used for caching. Its structure is more complex. <BR>jQuery.uuid increments a unique number. <BR>jQuery.expando string, generated using Math.random, with non-numeric characters removed. It serves as the property name of an HTMLElement or JS object. <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="16194" class="copybut" id="copybut16194" onclick="doCopy('code16194')"><U>Copy code</U></a></span> The code is as follows:</div><div class="codebody" id="code16194"> <BR>expando: "jQuery" ( jQuery.fn.jquery Math .random() ).replace( /D/g, "" ), <BR></div> <BR>jQuery.noData JS object, disables the data method for the specified HTMLElement. Such as embed, applet. <BR>jQuery.hasData is used to determine whether the HTMLElement or JS object has data. Return true or false. That is, if the jQuery.data method is called to add attributes, it returns true. <BR><div class="codetitle"><span><a style="CURSOR: pointer" data="55715" class="copybut" id="copybut55715" onclick="doCopy('code55715')"><U>Copy code</U></a></span> The code is as follows:</div><div class="codebody" id="code55715"> <BR><div>aa</div> <br> <script> <br>var div = document.getElementsByTagName('div')[0]; <br>$.hasData(div); // false <br>$.data(div, 'name','jack '); <br>$.hasData(div); // true <br></script>

jQuery.acceptData is used to determine whether the element can accept data, returning true or false . Used in jQuery.data.
jQuery.data This is a method provided to client programmers. It is also a setter/getter.
1, pass one parameter, return all the data attached to the specified element, that is, thisCache jQuery.data(el); // thisCache
2, pass two parameters, return the specified attribute value jQuery.data(el, 'name');
3, pass three parameters, set attributes and attribute values ​​jQuery.data(el, 'name', 'jack');jQuery.data(el, 'uu', {});
4, pass four parameters, the fourth parameter pvt is only provided to the jQuery library itself. That is, pass true in the jQuery._data method. Because jQuery's event module relies heavily on jQuery.data, it was added in this version to avoid accidental rewriting.
jQuery.removeData deletes data.
The above is an overall overview of the jQuery data caching module. The following is a detailed description of the jQuery.data method. jQuery.data provides caching for two types of objects: JS objects and HTMLElement

Copy code The code is as follows:

// Provide cache for JS objects
var myObj = {};
$.data(myObj, 'name', 'jack');
$.data(myObj, 'name'); // jack
// Provide cache for HTMLElement

<script> <br>var el = document.getElementById('xx' ); <br>$.data(el, 'name', 'jack'); <br>$.data(el, 'name'); // jack <br></script>

There are also differences in the internal implementation.
1. When providing cache for JS objects, the data is saved directly on the JS object. cache is a JS object. At this time, an attribute will be secretly added to the JS object (similar to jQuery16101803968874529044), and the attribute value is also a JS object. For example

Copy code The code is as follows:

var myObj = {};
$ .data(myObj, 'name', 'jack');
console.log(myObj);

The structure of myObj is as follows

Copy code The code is as follows:

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

The string "jQuery16101803968874529044" is named id inside data (note that it is not the id of the HTMLElement element). It is actually jQuery.expando. As mentioned above, it is randomly generated after jQuery.js is introduced to the page.
2. When caching is provided for HTMLElement, it will not be directly saved on HTMLElement. Instead it is saved on jQuery.cache. The cache is jQuery.cache. At this time, first add attributes to HTMLElement (similar to jQuery16101803968874529044), and the attribute values ​​​​are numbers (1, 2, 3 increase). That is, only some numbers are saved on the HTMLElement, and the data is not directly inserted. This is because there may be a risk of memory leaks in older versions of IE. And how does HTMLElement connect with jQuery.cache? Or ID. I just mentioned that the attribute value number is the id. For example

Copy code The code is as follows:

<script> <br>var el = document.getElementById('xx'); <br>$.data(el, 'name', 'jack'); <br>console. log(el[jQuery.expando]); // 1 <br>console.log(jQuery.cache); // {1 : {name:'jack'}} <br></script>

el is added with the attribute jQuery.expando, the value is id, and this id is incremented from 1. The id is used as the attribute (key) of jQuery.cache. In this way, HTMLElement is connected to jQuery.cache. As shown in the picture

Have you noticed that jQuery.data also has a fourth parameter pvt, which is only used in jQuery._data.

Copy code The code is as follows:

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

jQuery._data specifies from the naming that it is Private, client programmers using jQuery should not call this method. jQuery's API documentation doesn't expose it either.
jQuery’s data caching module changes in almost every version from 1.2.3 to 1.6.1. jQuery._data was proposed to prevent client programmers from overwriting/rewriting the default module. For example, the event handler in the jQuery event module is stored using jQuery.data, if the module is rewritten. Then the event module will be paralyzed. Therefore, the pvt parameter and jQuery._data method were specially added.
But if you deliberately want to destroy it, you can still do it. As follows

Copy the code The code is as follows:

Test< ;/div>
<script> <br>$('#xx').click(function(){ <br>alert('click'); <br>}); <br>// statement 1 <br>$.data($('#xx')[0], 'events', '', true); <br>// Statement 2 <br>//$._data($('#xx ')[0], 'events', ''); <br></script>

Clicking on div[id=xx] will not trigger the click event.
The entire jQuery.data setting (set) data cache process is like this, understand this. The process of getting data is easy to understand. Not repeated.
Finally, I will add the zChain.data/removeData method to zChian.js, because it is a "mini version" and only adds data caching to HTMLElement. Please note.

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn