在实际应用中, 我们经常需要往节点中缓存一些数据. 这些数据往往和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的对象
}
}
});
分享到:
相关推荐
jquery 1.42 帮助文档jquery 1.42 帮助文档jquery 1.42 帮助文档
jquery1.42.js
Jquery1.42官方最新打包下载 Jquery1.42官方最新打包下载 Jquery1.42官方最新打包下载
内含 jquery1.42版本
最近找到一个好的jQuery文档,不知道大家有没。。有的看看。没的谢谢下载。
包括4个文件jquery-1.4.2.js(jquery普通),jquery-1.4.2.min.js (jquery-mini), jquery-1.4.2-vsdoc.js(jquery代码提示),jquery.cookie.js (jquery-cookie包)
jquery 1.42.js && 开发文档
Jquery API 1.4(中文)chm格式的 可以更新的 Jquery.js版本 1.42
清除Jquery缓存语句
本文分析了jQuery数据缓存用法。分享给大家供大家参考。具体如下: 在jQuery的API帮助文档中,jQuery这样描述数据缓存的作用:用于在一个元素上存取数据而避免了循环引用的风险。 一、定义缓存数据 使用$(selector)....
JQuery1.4.1,JQuery1.4.1帮助文档 JQuery1.4.2,JQuery1.4.2帮助文档 其功能强大,修复了以前老版本的Bug
jQuery缓存性能分析比较案例,根据案例了解缓存的重要性
jquery-1.4.2.js jquery-1.4.2.min.js jquery-1.4.2-vsdoc.js 中文版vsdoc jquery-1.4.2-vsdoc_en.js jquery.cookie.js
最新在做ActiveMQ Web端开发时,发现这个官方给出的ajax测试例子里用到这个js插件, 就在这里免积分贡献了。
jquery1.4中文手册,CHM格式,一个很不错的jQuery中文教程,包含jquery-1.4.1.min.js、jquery-1.4.1.js和jquery-ui-1.8rc1
静态html+Jquery+缓存实现日志存储记录和删除
本人亲测,本人网页有两个JS效果,用到了两个jQuery文件(一个是jquery.min.js,另一个是jquery.pack.js),可以两个冲突,只能保留一个。 但效果就只能有一个。我想两个都保留,于是就想了很多办法,查了很多资料,...
jQuery本地缓存添加记录列表特效.zip
jquery1.5 jquery1.5.1 jquery1.5.2 jquery1.6 jquery1.6.4 jquery1.9.1 jquery1.32 jquery1.42 jquery1.44 jquery1.7 jquery1.8 jquery1.8.1 jquery1.8.2 jquery1.8.3 jquery1.9 jquery1.71 jquery1.72 jquery2.0 ...