jquery之缓存

偏执的太偏执、 2022-07-11 08:56 307阅读 0赞

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][https_segmentfault.com_a_1190000000626031]

[https_segmentfault.com_a_1190000000626031]: https://segmentfault.com/a/1190000000626031