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的緩存系統原理，代碼有些不合理，有些代碼是直接從源代碼裡面貼的