jquery1.42 缓存系统分析

在实际应用中, 我们经常需要往节点中缓存一些数据. 这些数据往往和dom元素紧密相关. dom节点也是对象, 所以我们可以直接扩展dom节点的属性. 不过肆意污染dom节点是不良少年的行为. 我们需要一种低耦合的方式让dom和缓存数据能够联系起来.

jquery提供了一套非常巧妙的缓存办法.

我们先在jquery内部创建一个cache对象{}, 来保存缓存数据.

然后往需要进行缓存的dom节点上扩展一个值为expando的属性, 这里是”jquery” + (new Date).getTime().

接着把每个节点的dom[expando]的值都设为一个自增的变量id,保持全局唯一性.
这个id的值就作为cache的key用来关联dom节点和数据.
也就是说cache[id]就取到了这个节点上的所有缓存.

而每个元素的所有缓存都被放到了一个map里面,这样可以同时缓存多个数据.
比如有2个节点dom1和dom2, 它们的缓存数据在cache中的格式应该是这样


Java代码
   
cache = {  
    dom1[expando]: {  
        key1: value1,  
        key2: value2  
    },  
    dom2[expando]: {  
        key3: value3,  
        key4: value4  
     }  
} 

 
cache = {
     dom1[expando]: {
         key1: value1,
         key2: value2
     },
     dom2[expando]: {
         key3: value3,
         key4: value4
      }
}



expando的值等于”jquery”+当前时间, 元素本身具有这种属性而起冲突的情况是微乎其微的.

我们在看源码之前, 先根据上面的原理来自己实现一个简单的缓存系统.以便增强理解.



先把跟data相关的所有代码都封装到一个闭包里,通过返回的接口暴露给外界.
同时为了简便,我们拆分成setData和getData两个方法.



Java代码
  <div id="ddd">dddddd</div>  
<script>  
 
  var Data = function(){  
    var cache = {};  
    var expando = "zengtan" + +new Date;  
    var uuid = 1;  
      
    var setData = function(elem, key, value){  
            var id = elem[expando];  
            if (!id){   //第一次给元素设置缓存  
                id = ++uuid;  
                elem[expando] = id;  
            }  
            if (!cache[id]){   //这个元素第一次进行缓存或者缓存已被清空  
                cache[id] = {};  
            }  
            cache[id][key] = value;  
    };  
 
    var getData = function(elem, key){  
        var id = elem[expando];  //取得cache里跟dom节点关联的key  
        return cache[id] && cache[id][key] || null;  //如果缓存里没有, 返回null  
    }  
 
    return {  
        setData: setData,  
        getData: getData      
    }  
  }()  
 
</script>  
  var div = document.getElementById("ddd");  
  Data.setData(div, "name", "zengtan");  
  var value = Data.getData(div, "name");  
  alert (value) 

  <div id="ddd">dddddd</div>
<script>

  var Data = function(){
var cache = {};
var expando = "zengtan" + +new Date;
var uuid = 1;

var setData = function(elem, key, value){
var id = elem[expando];
if (!id){   //第一次给元素设置缓存
id = ++uuid;
elem[expando] = id;
}
if (!cache[id]){   //这个元素第一次进行缓存或者缓存已被清空
cache[id] = {};
}
cache[id][key] = value;
};

var getData = function(elem, key){
var id = elem[expando];  //取得cache里跟dom节点关联的key
return cache[id] && cache[id][key] || null;  //如果缓存里没有, 返回null
}

return {
setData: setData,
getData: getData
}
  }()

</script>
  var div = document.getElementById("ddd");
  Data.setData(div, "name", "zengtan");
  var value = Data.getData(div, "name");
  alert (value)





看看源码实现.

首先声明一些特殊的节点, 在它们身上存属性的时候可能会抛出异常.


Java代码
   
noData: {  
    embed: true,  
    object: true,  
    applet: true 
}  
 
jquery.data  
 
data: function( elem, name, data ) {          
if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) {     
//如果是上面几个noData的节点类型  
        return;  
    }  
 
    elem = elem == window ?    
        //处理elem是window的情况, 如果不单独处理的话, 等于增加了一个全局变量, windowData也是一个{}  
        windowData :  
        elem;  
 
        var id = elem[ expando ], cache = jQuery.cache, thisCache;     
                   /* 
                    因为存数据的时候, 会给elem[ expando ]设置一个全局唯一标志量.判断id是否为undefined,就                                          
                    知道已经有没有往这个元素上缓存过数据.  
                   */ 
        if ( !id && typeof name === "string" && data === undefined ) {     
                //如果没有缓存, 而现在又是get方式. 返回null  
            return null;  
        }  
 
        if ( !id ) {    
                //第一次进行缓存, 分配一个全局唯一标志id  
            id = ++uuid;  
        }  
 
        if ( typeof name === "object" ) {  //如果key是对象类型  
            elem[ expando ] = id;    //分配id  
            thisCache = cache[ id ] = jQuery.extend(true, {}, name);   
            /*把整个对象做为cache[ id ]的值储存, 比如 
                $('#ddd').data({ 
                "v2": "bbb", 
                "v3": "ccc"; 
                }); 
                相当于$('#ddd').data("v2", "bbb").data("v3":"ccc"); 
                不过这样会清空该元素以前的data, 不理解为什么要这样做. 
                觉得这样才是更好的处理 
                jQuery.extend(cache[ id ], name); 
            */ 
        } else if ( !cache[ id ] ) {   
                   //如果cache[ id ]中没有, 表示这个元素第一次进行缓存或者缓存已被清空  
            elem[ expando ] = id;  
            cache[ id ] = {};    
                        //把cache[ id ]设置为一个map.  
        }  
 
        thisCache = cache[ id ];  
 
        if ( data !== undefined ) {       
              /* 
              set操作, 也可以防止一些意外的情况下缓存被清空. 比如data未定义的情况下, 缓存操作是无效的. 
            var a = {}; 
            var b; 
            $(a).data("c";, 3); 
            $(a).data("c", b); b为undefined. 这句是无效的. 要移除缓存可以用removeData方法. 
               */ 
            thisCache[ name ] = data;    
               //即cache[ id ][ name ] = data, 把data设置进cache缓存对象中, 前面分配的自增id当做key来关联  
        }  
 
        return typeof name === "string" ? thisCache[ name ] : thisCache;    
               //如果key是string类型, 返回key对应的缓存, 否则返回整个元素上的缓存  
    } 


noData: {
    embed: true,
    object: true,
    applet: true
}

jquery.data

data: function( elem, name, data ) { 
if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) {  
//如果是上面几个noData的节点类型
return;
}

elem = elem == window ? 
        //处理elem是window的情况, 如果不单独处理的话, 等于增加了一个全局变量, windowData也是一个{}
windowData :
elem;

var id = elem[ expando ], cache = jQuery.cache, thisCache;  
                   /*
                    因为存数据的时候, 会给elem[ expando ]设置一个全局唯一标志量.判断id是否为undefined,就                                        
                    知道已经有没有往这个元素上缓存过数据.
                   */
if ( !id && typeof name === "string" && data === undefined ) {  
                //如果没有缓存, 而现在又是get方式. 返回null
return null;
}

if ( !id ) { 
                //第一次进行缓存, 分配一个全局唯一标志id
id = ++uuid;
}

if ( typeof name === "object" ) {  //如果key是对象类型
elem[ expando ] = id;    //分配id
thisCache = cache[ id ] = jQuery.extend(true, {}, name);
/*把整个对象做为cache[ id ]的值储存, 比如
    $('#ddd').data({
"v2": "bbb",
"v3": "ccc";
    });
    相当于$('#ddd').data("v2", "bbb").data("v3":"ccc");
    不过这样会清空该元素以前的data, 不理解为什么要这样做.
    觉得这样才是更好的处理
    jQuery.extend(cache[ id ], name);
*/
} else if ( !cache[ id ] ) {
                   //如果cache[ id ]中没有, 表示这个元素第一次进行缓存或者缓存已被清空
elem[ expando ] = id;
cache[ id ] = {}; 
                        //把cache[ id ]设置为一个map.
}

thisCache = cache[ id ];

if ( data !== undefined ) {    
              /*
              set操作, 也可以防止一些意外的情况下缓存被清空. 比如data未定义的情况下, 缓存操作是无效的.
var a = {};
var b;
$(a).data("c";, 3);
$(a).data("c", b); b为undefined. 这句是无效的. 要移除缓存可以用removeData方法.
               */
thisCache[ name ] = data; 
               //即cache[ id ][ name ] = data, 把data设置进cache缓存对象中, 前面分配的自增id当做key来关联
}

return typeof name === "string" ? thisCache[ name ] : thisCache; 
               //如果key是string类型, 返回key对应的缓存, 否则返回整个元素上的缓存
}


  理论上讲, data方法可以用于任何对象的缓存, 不过如果是本地对象, 在内存泄露和继承的问题上都会遇到麻烦, 这里不详述, 所以一般我们还是用于dom节点.

  我们用jquery缓存系统的时候, 一般调用的是prototype方法, prototype方法除了调用上面的静态方法之外. 还加入了对节点上自定义事件的处理, 留在event部分再讲.

  当然, 我们还需要删除缓存的方法. 现在看看removeData的代码


Java代码
jQuery.removeData  
 
removeData: function( elem, name ) {  
        if ( elem.nodeName && jQuery.noData[elem.nodeName.toLowerCase()] ) {      
                   //同data方法  
            return;  
        }  
 
        elem = elem == window ?  
            windowData :  
            elem;   //同data方法  
 
        var id = elem[ expando ], cache = jQuery.cache, thisCache = cache[ id ];  
 
        if ( name ) {         //如果有指定的key  
            if ( thisCache ) {  //如果元素有缓存  
                delete thisCache[ name ];  //直接delete掉  
                if ( jQuery.isEmptyObject(thisCache) ) {      
                       //如果thisCache是个空对象, 说明所有缓存的数据都已经被删掉了.  
                    jQuery.removeData( elem );    
                           /* 
                              重新调用一次removeData方法, 删掉缓存系统里已经无用的东西, 
                              防止内存泄露, 注意现在走的是下面else分支. 
                           */ 
                }  
            }  
 
        } else {  
            if ( jQuery.support.deleteExpando ) {    
                           //如果支持delete, 见特性检测部分.  
                delete elem[ jQuery.expando ];   //删掉元素的expando属性  
            } else if ( elem.removeAttribute ) {     
                           //如果支持removeAttribute  
                elem.removeAttribute( jQuery.expando );  
            }  
 
            delete cache[ id ];   //全局缓存里删除以这个id为key的对象  
        }  
    }  
});