jQuery 之缓存

1.前言

       在后台中，某栏目添加多个单品，输入单片链接之后需要进行ajax请求该单品的详细数据，点击“保存”按钮，需要将所有的单品数据进行汇总为json并保存。

        给文本框的blur添加事件进行ajax请求后数据的存储成为一个问题，偶然看jquery源码时，发现.data是一个不错的实现。

2.使用

        jQuery.data可以为普通对象或是DOM element 附加及获取数据，分为以下三类：

        1）用name,value给普通对象赋值   $.data(obj,name,value)，获取数据$.data(obj,name)

        2）用另一个对象给普通对象赋值    $.data(obj,another), 获取数据$.data(obj,name)

        3）给DOM element元素赋值   $.data(element,name,value) ,获取数据$.data(element,name)

3.详细

       1》给普通对象赋值解析

        给对象赋值时，其实就是将一个“cache”附加到了对象上，并使用了一个特殊的属性名称

         

        如上图所示：obj多了一个属性名：jQuery112100953224126715213 在该属性下存放了数据。

        属性名的生成：var expando="jQuery"+("1.2"+Mah.random()).replace(/\D/g,'');  //jquery版本加随机数,特殊名称，并用于标识不同的页面，它是jQuery引入到页面后随即生成的。

         2》给DOM element元素赋值

         因为在一些浏览器中（IE6,7）不能有效回收DOM element上附加的对象引用，所以采用不同的方式来附加数据

使用了cache，并附加uid(唯一且递增)，不直接保存在DOM element上，保存于jQuery.cache上。uid附加在DOM Element 的 “expando” 属性中。 var id = obj[expando] = obj[expando] || ++uuid;

         

        另，有的Dom element具有其他的“事件”之类的。为防止被用户覆盖不能使用，缓存附加的属性不在jQuery164....该属性的下面。与其实兄弟平级。  

     

         如果想覆盖也是可以的,$.data中第四个参数为true(默认为false)此时修改的是expando内部的events

 

            

4.简单实现

         查了一下有网友对这部分内容的简单实现，敲了一下，附上代码：

$=function(){var globleCache={};var expando=jQuery+("1.6"+Math.random()).replace(/\D/,'');  //过滤非数字var uuid=0;function getcache(obj){  //根据对象的不同选择不同的存储位置if(obj.nodeType){  //DOM element var id=obj[expando]=obj[expando]||++uuid;  //uuid 自增globleCache[id]=globleCache[id]||{};return globleCache[id];}else{obj[expando]=obj[expando]||{};return obj[expando];}}function getdata(cache,name){  //获取缓存值                 return cache[name];}function setdata(cache,name,value){   //插入缓存值return cache[name]=value;}function setdatawithobject(cache,another){  //将对象向对象赋值              for(var name in another){        cache[name]=another[name];              }}return{data:function(obj,name,value){var cache=getcache(obj);if(name instanceof Object){  //值为另一个对象                                setdatawithobject(cache,name);}else if(value===undefined){getdata(cache,name);}else{setdata(cache,name,value);}}}   }