jQuery 数据缓存data(name, value)详解及实现

2020-05-23 06:09:19易采站长站整理

}
</script>

二、简单实现jQuery设置数据缓存方法
jQuery数据缓存的实现其实是很简单的,下面我来实现jQuery设置数据缓存方法,我让代码尽量的简单,这有助于你更容易了解data的实现原理。函数与测试代码如下:

<div id=”div1″>div1</div><br/>
<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相关源代码参考:

remove:function(selector)
{
if (!selector || jQuery.filter(selector, [this]).length)