jquery data

jquery data是一个数据缓存系统，通过key和value借助html dom进行缓存数据

1.方法有data,removeData和hasdata

//$(select).data(key,obj) obj为任意对象
$("body").data("name","lucy"); //在body上缓存数据
$("body").data("age",);

//$(select).data(key) 通过key在选择器上获取缓存数据
console.log($("body").data("name") + "已经" +  $("body").data("age") + "岁了")

//$.hasData(ele) 某个dom节点是否有缓存数据
console.log($.hasData(document.getElementsByTagName("body")[]));

//$(select).removeData([key]) 通过key在选择器上删除数据
$("body").removeData("name"); //单独key删除数据
console.log("name ? " + $("body").data("name")); //name ? undefine

$("body").data("name","lili"); 
console.log($("body").data("name") + "已经" +  $("body").data("age") + "岁了");

$("body").removeData(); //没有提供key，删除该节点上所有的数据

console.log("name ? " + $("body").data("name") + " age ? " +  $("body").data("age")); //name ? undefined age ? undefined

$("body").data("name","mem").data("age",); 
console.log($("body").data("name") + "已经" +  $("body").data("age") + "岁了");

$("body").removeData("name age");  //参数为数组，间隔为空格

console.log("name ? " + $("body").data("name") + " age ? " +  $("body").data("age")); //name ? undefined age ? undefined
           

2.原理

jq data通过建一个cache = ｛｝缓存对象，随机生成一个唯一的id作为key，再将整个cache附在dom节点上进行缓存数据，简单代码实现下原理如下：

var cache = cache || {
   /**
     * uuid唯一标识
     */
   id : jQuery.expando;
   /**
     * 设置数据
     */
   set : function(ele,key,value){
      var cache = ele[this.id];//判断该dom节点上是不是有缓存数据
      if(!value){ //没有缓存数据
          cache = {} ; //新建一个缓存json
      }
      cache[key] = value ;   //缓存数据
      ele[this.id] = cache;  //将缓存对象赋到dom节点上
   },

    /**
     * 获取数据
     */
   get : function(ele,key){
      var cache = ele[this.id];//判断该dom节点上是不是有缓存数据
      if(cache) return cache[key];
   },

   /**
     * 删除数据
     */
   remove : function(ele,key){

    var cache = ele[id];
    if(cache === undefined ) return ; //dom节点上没有该缓存对象，直接返回
    if(key === undefined || $.isEmptyObject( cache ) ) delete ele[this.id]; //没有传key或者缓存对象是空直接删除缓存

     // 支持数组或者是以空格间隔开的字符串
    if ( $.isArray( key ) ) { 
        name = key.concat( key.map( $.camelCase ) );//将key如my_name的格式转化成驼峰结构myName
    } else {
        camel = $.camelCase( key ); //转化驼峰结构
        if ( key in cache ) { //如果只是单个key
            name = [ key, camel ]; //转化成驼峰结构
        } else { //空格间隔开的字符串，转化成数组
            name = camel;
            name = name in cache ?
                [ name ] : ( name.match( rnotwhite ) || [] );
        }
    }

    i = name.length; //最终key转化成数组

    while ( i-- ) { //删除
        delete cache[ name[ i ] ];
    }
   },

   /**
     * dom中是否有缓存数据，如果有缓存数据，是不是有某个key的值
     */
   has : function(ele,key){
     var cache = ele[id];
     if(cache === undefined ) return false ;

     if(key === undefined){ //没有传key直接判断dom节点是否有缓存对象
        return true ;
     }else{ //有传key判断缓存对是否有key值
       return cache[key] ? true : false ;
     }
   }
} 
};
           

简单的实现jq的缓存系统原理，代码有些不合理，有些代码是直接从源代码里面贴的