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的缓存系统原理,代码有些不合理,有些代码是直接从源代码里面贴的