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",34);

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

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

//$(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",35);
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的缓存系统原理，代码有些不合理，有些代码是直接从源代码里面贴的