The caching of jquery

jquery encapsulates all the methods of caching, which I don't have to say, and I believe that many of the same little white as me are often used. In general, however, caching is rarely used.
Previously in the project just need to cache data 500 to the page, and then paging (the specific reason is not said), in short, this demand. And then suddenly came up with an idea, I defined a global variable, and then put the data in, and then take and operate it all OK, why do you have to use jquery encapsulation good method.
Have never thought to understand this problem, today suddenly turned out, say I write understand it.
Personal feeling, in fact, with global variables and jquery cache is not a problem. Just because the global variables directly save the data there are a lot of unreasonable places (the most initial JS should be cached in this way), which leads to jquery need to encapsulate the caching method to achieve this.
Advantages:
1. Do not like the global variable seems to cause variable random pollution
2.jquery structure definition Clear access convenience
3.jquery access efficiency is higher

This leads to the evolution of JS, jquery encapsulates the data cache interface. That is, the caching of JS objects and the caching of element elements. Here is a brief introduction to the usage of this API.
First, let's talk about the principle of jquery caching.
1. For DOM elements, the DOM element is associated with the data cache object of the DOM element by assigning a unique association ID, and the association ID is appended to the attribute named with the Jquery.expando value, and the data is stored in the global cache object Jquery.cache. When reading, setting, and removing data, the associated data cache object is found from the global cache object Jquery.cache through the association ID, and then the read, set, and remove operations are performed on the data cache object.

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. and htmlelement how to establish contact with Jquery.cache. or an ID. Just mentioned the attribute value number is the ID. Give an example to explain

<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.

2. For JavaScript objects, the data is stored directly on the property Jquery.expando of the JavaScript object. When you read, set, and remove data, you are actually reading, setting, and removing the data cache object for the JavaScript object.

When the JS object is provided with caching, the data is stored directly on 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

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

The structure of the myobj is 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.

Second, use
Well, the principle of everyone to understand the good, under normal circumstances also can not be used, we pay attention to the main or usage.
First look at the structure of the jquery package

Data cache
Jquery.extend ({
     //Global Cached Object Cache
     : {},//
     unique ID seed
     uuid:0,
     //Unique identification of each jQuery copy in the page
     expando: "JQuery" + (JQuery.fn.jquery + math.random ()). Replace (/\d/g, ""),
     //whether there is an associated data
     hasdata:function ( {},
     //set, read custom data or internal data
     data:function (elem, name, data, pvt) {},
     //Remove custom data or internal data
     Removedata: function (Elem, name, pvt) {},
     //setting, reading internal data
     _data:function (elem, name, data) {},//
     whether data
     can be set Acceptdata:function (elem) {}
});
JQuery.fn.extend ({
     //set, read from definition data, parse HTML5 attribute data-
     data:function (key,value) {},
     //Remove Custom data
     Removedata:function (key) {}
});
Resolves the HTML5 property data-
function dataattr (elem,key,data) {}
//Check that the data cache object is an empty
function isemptydataobject (obj {}
jquery.extend ({
     //Empty data cache object


cleandata:function (elems) {}
});

The example of manipulating the data is not detailed, here is a blog written in detail: https://segmentfault.com/a/1190000000626031