作为一名程序员,一提到“缓存”你很容易联想到“客户端(浏览器缓存)”和“服务器缓存”。客户端缓存是存在浏览者电脑硬盘上的,即浏览器临时文件夹,而服务器缓存是存在服务器内存中,当然在一些高级应用场合也有专门的缓存服务器,甚至有利用数据库进行缓存的实现。当然这些都不在本文的讨论范围,本文要讨论的是最流行的JavaScript框架jQuery的数据缓存实现原理,这是jQuery1.2.3版开始加入的新功能。
一、 jQuery数据缓存的作用
jQuery数据缓存的作用在中文API中是这样描述的:“用于在一个元素上存取数据而避免了循环引用的风险”。如何理解这句话呢,看看我下面的举例,不知道合不合适,如果你有更好的例子可以告诉我。
(1) 存在循环引用风险的例子(注意getDataByName(name)方法中的for in语句):
< a href ="javascript:void(0);" onclick ="showInfoByName(this.innerHTML);" > Mike </ a >
< script type ="text/javascript" >
var userInfo = [
{
" name " : " Tom " ,
" age " : 21 ,
" phone " : " 020-12345678 "
},
{
" name " : " Mike " ,
" age " : 23 ,
" phone " : " 020-87654321 "
}];
function getDataByName(name)
{
for ( var i in userInfo)
{
if (userInfo[i].name == name)
{
return userInfo[i];
break ;
}
}
}
function showInfoByName(name)
{
var info = getDataByName(name);
alert( ' name: ' + info.name + ' \n ' + ' age: ' + info.age + ' \n ' + ' phone: ' + info.phone);
}
</ script >
(2) 优化循环引用风险的例子(本例子其实与jQuery缓存实现原理差不多了,本例子重点在于改写了userInfo这个JSON结构,使name与对象key直接对应):
< a href ="javascript:void(0);" onclick ="showInfoByName(this.innerHTML);" > Mike </ a >
< script type ="text/javascript" >
var userInfo =
{
" Tom " :
{
" name " : " Tom " ,
" age " : 21 ,
" phone " : " 020-12345678 "
},
" Mike " :
{
" name " : " Mike " ,
" age " : 23 ,
" phone " : " 020-87654321 "
}
};
function showInfoByName(name)
{
var info = userInfo[name];
alert( ' name: ' + info.name + ' \n ' + ' age: ' + info.age + ' \n ' + ' phone: ' + info.phone);
}
</ script >
二、简单实现jQuery设置数据缓存方法
jQuery数据缓存的实现其实是很简单的,下面我来实现jQuery设置数据缓存方法,我让代码尽量的简单,这有助于你更容易了解data的实现原理。函数与测试代码如下:
< div id ="div2" > div2 </ div >
< script type ="text/javascript" >
// cache对象结构像这样{"uuid1":{"name1":value1,"name2":value2},"uuid2":{"name1":value1,"name2":value2}},每个uuid对应一个elem缓存数据,每个缓存对象是可以由多个name/value对组成的,而value是可以是任何数据类型的,比如可以像这样在elem下存一个JSON片段:$(elem).data('JSON':{"name":"Tom","age":23})
var cache = {};
// expando作为elem一个新加属性,为了防止与用户自己定义的产生冲突,这里采用可变后缀
var expando = ' jQuery ' + new Date().getTime();
var uuid = 0 ;
function data(elem, name, data)
{
// 至少保证要有elem和name两个参数才能进行取缓存或设置缓存操作
if (elem && name)
{
// 尝试取elem标签expando属性
var id = elem[expando];
if (data)
{
// 设置缓存数据
if ( ! id)
id = elem[expando] = ++ uuid;
// 如果cache中id键对象不存在(即这个elem没有设置过数据缓存),先创建一个空对象
if ( ! cache[id])
cache[id] = {};
cache[id][name] = data;
}
else
{
// 获取缓存数据
if ( ! id)
return ' Not set cache! ' ;
else
return cache[id][name];
}
}
}
var div = document.getElementById( ' div1 ' );
data(div, " tagName " , " div " );
data(div, " ID " , " div1 " );
alert(data(div, " tagName " )); // div
alert(data(div, " ID " )); // div1
var div2 = document.getElementById( ' div2 ' );
alert(data(div2, " tagName " )); // Not set cache!
</ script
三、使用jQuery数据缓存注意事项
(1)因为jQuery缓存对象是全局的,在AJAX应用中,由于页面刷新很少,这个对象将一直存在,随着你对data的不断操作,很有可能因为使用不当,使得这个对象不断变大,最终影响程序性能。所以我们要及时清理这个对象,jQuery也提供了相应方法:removeData(name),name就是你当初设置data值时使用的name参数。
另外,根据我对jQuery代码的了解,发现下面几种情况不需要手动清除数据缓存:
<1> 对elem执行remove()操作,jQuery会清除对象可能存在的缓存。jQuery相关源代码参考:
{
if ( ! selector || jQuery.filter(selector, [ this ]).length)
{
// Prevent memory leaks
jQuery( " * " , this ).add([ this ]).each( function ()
{
jQuery.event.remove( this );
jQuery.removeData( this );
});
if ( this .parentNode)
this .parentNode.removeChild( this );
}
}
<2> 对elem执行empty()操作,如果当前elem子元素存在数据缓存,jQuery也会清除子对象可能存在的数据缓存,因为jQuery的empty()实现其实是循环调用remove()删除子元素。jQuery相关源代码参考:
{
// Remove element nodes and prevent memory leaks
jQuery( this ).children().remove();
// Remove any remaining nodes
while ( this .firstChild)
this .removeChild( this .firstChild);
}
2、jQuery复制节点clone()方法不会复制data缓存,准确说jQuery不会在全局缓存对象中分配一个新节点存放新复制elem缓存。jQuery在clone()中把可能存在的缓存指向属性(elem的expando属性)替换成空。如果直接把这个属性复制,就会导致原先和新复制的elem都指向一个数据缓存,中间的互操作都将会影响到两个elem的缓存变量。以下jQuery代码就是把expando属性删除(jQuery1.3.2,较早版本不是这样处理,显然新版本的这个方法性能更好)。
把数据缓存一起复制有时候也是很有用的,比如在拖动操作中,我们点击源目标elem节点就会复制出一个半透明的elem副本开始拖动,并把data缓存复制到拖动层中,等到拖动结束,我们就可能取到当前拖动的elem相关信息。现在jQuery方法没有给我们提供这样的处理,怎么办法。第一个办法是改写jQuery代码,这个方法显然很傻,很不科学。正确做法是复制源目标的data,把这些data都重新设置到复制出来的elem中,这样在执行data(name, value)方法时,jQuery会在全局缓存对象中为我们开辟新空间。实现代码如下:
{
var elemData = $.cache[$.data(currentElement)];
for ( var k in elemData)
{
dragingDiv.data(k, elemData[k]);
}
}
在上面代码中,$.data(elem,name,data)包含三个参数,如果只有一个elem参数,这个方法返回它的缓存key(即uuid),利用这个key就可以得到整个缓存对象,然后把对象的数据都复制到新的对象。