jquery之缓存

jquery中封装了缓存的所有方法，这自不必说，相信许多像我一样的小白也在经常使用。不过一般情况下很少用缓存的。
之前在项目中正好需要先将数据缓存500条到页面上，然后分页拿（具体原因就是不说了），总之有这个需求。然后突然就冒出个想法，我定义一个全局变量，然后将数据放进去，然后挨个拿和操作不就OK了吗，为什么非得用jquery封装好的方法呢？
一直都没想明白这个问题，今天突然翻出来了，就说说我写理解吧。
个人感觉，其实用全局变量来和jquery的缓存都是没有问题的。只是因为全局变量直接保存数据存在许多不合理的地方（最初始的js应该就是用这种方法来缓存的），才导致jquery需要封装缓存的方法实现这一目的。
优点：
1.不会像全局变量似得造成变量随意污染
2.jquery的结构定义明确存取方便
3.jquery的存取效率更高

这就导致js的进化，jquery封装了数据的缓存接口。即对js对象的缓存和对元素element的缓存。下面简单介绍一下这一api的用法吧。
一、首先讲讲jquery缓存的原理吧。
1.对于DOM元素，通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来，关联id被附加到以jQuery.expando的值命名的属性上，数据存储在全局缓存对象jQuery.cache中。在读取、设置、移除数据时，将通过关联id从全局缓存对象jQuery.cache中找到关联的数据缓存对象，然后在数据缓存对象上执行读取、设置、移除操作。

为HTMLElement提供缓存时，却不会直接保存在HTMLElement上。而是保存在jQuery.cache上。cache为jQuery.cache。此时先给HTMLElement添加属性（类似于jQuery16101803968874529044），属性值为数字（1,2,3递增）。即只将一些数字保存在了HTMLElement上，不会直接将数据置入。而HTMLElement如何与jQuery.cache建立联系呢？ 还是id。刚刚提到属性值数字就是id。举例说明

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

el 上添加了属性jQuery.expando，值为id，这个id是从1开始递增的。而id又作为jQuery.cache的属性（key）。这样就HTMLElement就与jQuery.cache建立了联系。

2.对于Javascript对象，数据则直接存储在该Javascript对象的属性jQuery.expando上。在读取、设置、移除数据时，实际上是对Javascript对象的数据缓存对象执行读取、设置、移除操作。

为JS对象提供缓存时，直接将数据保存在JS对象上。cache为JS对象。此时会偷偷的给JS对象添加个属性（类似于jQuery16101803968874529044），属性值也是个JS对象。举例说明

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

myObj的结构如下

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

“jQuery16101803968874529044”这个字符串在data内部命名为id（注意并非HTMLElement元素的id），它实际就是jQuery.expando。上面已经提到它是在jQuery.js引入到页面后随机生成的。

二、用法
好了，原理大家了解一下就好了，一般情况下也用不到的，大家关注的主要还是用法。
先看jquery封装的结构

// 数据缓存 Data
jQuery.extend({
     // 全局缓存对象
     cache: {},
     // 唯一 id种子
     uuid:0,
     // 页面中每个jQuery副本的唯一标识
     expando: "jQuery" + ( jQuery.fn.jquery + Math.random() ).replace( /\D/g, "" ),
     // 是否有关联的数据
     hasData: function(){},
     // 设置、读取自定数据或内部数据
     data: function(elem, name, data, pvt) {},
     // 移除自定义数据或内部数据
     removeData: function(elem, name, pvt) {},
     // 设置、读取内部数据
     _data: function(elem, name, data) {},
     // 是否可以设置数据
     acceptData: function(elem){}
});
jQuery.fn.extend({
     // 设置、读取自定义数据，解析HTML5属性data-
     data: function(key,value){},
     // 移除自定义数据
     removeData: function(key){}
});
// 解析HTML5属性 data-
function dataAttr(elem,key,data){}
// 检查数据缓存对象是否为空
function isEmptyDataObject(obj){}
jQuery.extend({
     // 清空数据缓存对象


cleanData: function(elems){}
});

操作数据的例子就不详细讲了，这儿有篇博客写的很详细了：https://segmentfault.com/a/1190000000626031