jQuery数据缓存功能的实现思路及简单模拟


Posted in Javascript onMay 27, 2013

前言
对于jQuery的数据缓存,相信大家都不会陌生,jQuery缓存系统不仅运用于DOM元素,动画、事件等都有用到这个缓存系统。所以在平时实际应用中, 我们经常需要给元素缓存一些数据,并且这些数据往往和DOM元素紧密相关。由于DOM元素(节点)也是对象, 所以我们可以直接扩展DOM元素的属性,但是如果给DOM元素添加自定义的属性和过多的数据可能会引起内存泄漏,所以应该要尽量避免这样做。 因此更好的解决方法是使用一种低耦合的方式让DOM和缓存数据能够联系起来。

另外:对于jQuery.data和jQuery.removeData静态方法、以及基于这两个方法的原型扩展方法的介绍和用法就不多说了,可以查看官方API文档。

实现思路
jQuery提供了一套灵活和强大的缓存方法:
(1)先在jQuery内部创建一个cache对象{}, 来保存缓存数据。 然后往需要进行缓存的DOM节点上扩展一个值为expando的属性, 这里是”jQuery” + (new Date).getTime()。 注:expando的值等于”jQuery”+当前时间, 元素本身具有这种属性的可能性很少,所以可以忽略冲突。
(2)接着把每个节点的dom[expando]的值都设为一个自增的变量id,保持全局唯一性。 这个id的值就作为cache的key用来关联DOM节点和数据。也就是说cache[id]就取到了这个节点上的所有缓存,即id就好比是打开一个房间(DOM节点)的钥匙。 而每个元素的所有缓存都被放到了一个map映射里面,这样可以同时缓存多个数据。
(3)所以cache对象结构应该像下面这样:

var cache = { 
"uuid1": { // DOM节点1缓存数据,"uuid1"相当于dom1[expando] 
"name1": value1, 
"name2": value2 
}, 
"uuid2": { // DOM节点2缓存数据,“uuid2"相当于dom2[expando] 
"name1": value1, 
"name2": value2 
} 
// ...... 
};

每个uuid对应一个elem缓存数据,每个缓存对象是可以由多个name/value(名值对)对组成的,而value是可以是任何数据类型的。

简单模拟实现
根据以上思路,就可以简单实现下jQuery.data和jQuery.removeDate的功能了:

(function(window, undefined) { 
var cacheData = {}, // 用来存储数据的对象 
win = window, // 把window缓存给一个变量 
uuid = 0, 
// 声明随机数(8位) 
// 注意+new Date()生成的随机数是Number类型,与一个空字符串连接后(或使用toString方法转型后)变成字符串,才可使用slice方法。 
expando = "cacheData" + (+new Date() + "").slice(-8); 
// (+new Date()).toString().slice(-8)等价于expando 
// 写入缓存 
var data = function(elem, name, value) { 
// 或使用原生方法验证字符串Object.prototype.toString.call(elem) === "[object String]" 
// 如果elem为字符串 
if (typeof elem === "string") { 
// 如果传入name参数,则为写入缓存 
if (name !== undefined) { 
cacheData[elem] = name; 
} 
// 返回缓存数据 
return cacheData[elem]; 
// 如果elem为DOM节点 
} else if (typeof elem === "object") { 
var id, 
thisCache; 
// 如果elem不存在expando属性,则添加一个expando属性(第一次给元素设置缓存),否则直接获取已有的expando和id值 
if (!elem[expando]) { 
id = elem[expando] = ++uuid; 
thisCache = cacheData[id] = {}; 
} else { 
id = elem[expando]; 
thisCache = cacheData[id]; 
} 
// 把一个随机数作为当前缓存对象的一个属性,利用该随机数就能找到该缓存对象 
if (!thisCache[expando]) { 
thisCache[expando] = {}; 
} 
if (value !== undefined) { 
// 将数据存到缓存对象中 
thisCache[expando][name] = value; 
} 
// 返回DOM元素存储的数据 
return thisCache[expando][name]; 
} 
}; 
// 删除缓存 
var removeData = function(elem, name) { 
// 如果elem为字符串,则直接删除该属性值 
if (typeof elem === "string") { 
delete cacheData[elem]; 
// 如果key为DOM节点 
} else if (typeof elem === "object") { 
// 如果elem不存在expando属性,则终止执行,不用删除缓存 
if (!elem[expando]) { 
return; 
} 
// 检测对象是否为空 
var isEmptyObject = function(obj) { 
var name; 
for (name in obj) { 
return false; 
} 
return true; 
} 
removeAttr = function() { 
try { 
// IE8即标准浏览器可以直接使用delete来删除属性 
delete elem[expando]; 
} catch (e) { 
// IE6/IE7使用removeAttribute方法来删除属性 
elem.removeAttribute(expando); 
} 
}, 
id = elem[expando]; 
if (name) { 
// 只删除指定的数据 
delete cacheData[id][expando][name]; 
// 如果是空对象,id所对应的数据对象全部删除 
if (isEmptyObject(cacheData[id][expando])) { 
delete cacheData[id]; 
removeAttr(); 
} 
} else { 
// 删除DOM元素存到缓存中的所有数据 
delete cacheData[id]; 
removeAttr(); 
} 
} 
}; 
// 把data和removeData挂在window全局对象下,这样在外部也能访问到这两个函数 
win.expando = expando; 
win.data = data; 
win.removeData = removeData; 
})(window, undefined);

例子:
HTML结构:
<div id="demo" style="height: 100px; width: 100px; background: #ccc; color: #fff; margin: 20px; text-align: center; line-height: 100px;"> 
demo 
</div>

js代码:
window.onload = function() { 
// 测试 
var demo = document.getElementById("demo"); 
// 写入缓存 
data(demo, "myName", "hcy"); 
console.log(data(demo, "myName")); // hcy 
data(demo, "myBlog", "http://www.cnblogs.com/cyStyle"); 
console.log(data(demo, "myBlog")); // http://www.cnblogs.com/cyStyle 
// 删除DOM元素的某个缓存值 
removeData(demo, "myBlog"); 
console.log(data(demo, "myBlog")); // undefined 
console.log(data(demo, "myName")); // hcy 
console.log(demo[expando]); // 1 
// 删除DOM元素 
removeData(demo); 
console.log(demo[expando]); // undefined 
};

firefox下例子结果截图:
jQuery数据缓存功能的实现思路及简单模拟 
对于上述例子实现jQuery的简单缓存系统:先给该DOM元素添加一个随机生成的属性expando,这个属性用来存放访问缓存数据的id值,就好比DOM元素都有一把开启缓存保险箱的钥匙,只要有了钥匙就可以随时开启缓存保险箱。 将本来存放到DOM元素中的数据都转到了缓存中,而DOM元素本身只要存储一个简单的属性就可以了,这样就可以将由DOM元素引起的内存泄漏(具体会发生什么状况不知道,大家都这么说~)的风险规避到最小。

结语
糊里糊涂地又到了最后,有一些术语或解释上可能存在偏差,望各位童鞋指正和给出一些建议;另外,从理论上讲, data和removeData方法可以用于任何对象的缓存, 不过如果运用于本地对象或window对象, 会存在内存泄露、循环引用等问题(^_^从网上看到的), 所以一般还是用于DOM节点比较适合,还可以结合事件、动画对DOM节点进行缓存数据的操作。ps:cache真的很重要!需要慢慢体会~
因为分享,所以简单;因为分享,所以快乐。

Javascript 相关文章推荐
javascript 全角转换实现代码
Jul 17 Javascript
js加减乘除丢失精度问题解决方法
May 16 Javascript
手机号码,密码正则验证
Sep 04 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
jQuery实现的仿select功能代码
Aug 19 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
vue 使用ref 让父组件调用子组件的方法
Feb 08 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
在移动端使用vue-router和keep-alive的方法示例
Dec 02 Javascript
VUE脚手架的下载和配置步骤详解
Apr 01 Javascript
jQuery函数的等价原生函数代码示例
May 27 #Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 #Javascript
jQuery动态地获取系统时间实现代码
May 24 #Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 #Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 #Javascript
js过滤HTML标签以及空格的思路及代码
May 24 #Javascript
jQuery实现表头固定效果的实例代码
May 24 #Javascript
You might like
国王的咖啡这么大来头,名字的由来是什么
2021/03/03 咖啡文化
Sorting Array Values in PHP(数组排序)
2011/09/15 PHP
探讨PHP中this,self,parent的区别详解
2013/06/08 PHP
ThinkPHP模板中判断volist循环的最后一条记录的验证方法
2014/07/01 PHP
php UNIX时间戳用法详解
2017/02/16 PHP
prototype 源码中文说明之 prototype.js
2006/09/22 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
JavaScript子类用Object.getPrototypeOf去调用父类方法解析
2013/12/05 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
IE6/IE7中JavaScript json提示缺少标识符、字符串或数字问题处理
2014/12/16 Javascript
Javascript基础教程之argument 详解
2015/01/18 Javascript
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
Vuejs在v-for中,利用index来对第一项添加class的方法
2018/03/03 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
Python实现的简单hangman游戏实例
2015/06/28 Python
Python编程中的文件操作攻略
2015/10/16 Python
Python爬虫抓取手机APP的传输数据
2016/01/22 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
对Python3中的print函数以及与python2的对比分析
2018/05/02 Python
python使用turtle绘制分形树
2018/06/22 Python
用python 实现在不确定行数情况下多行输入方法
2019/01/28 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
Jupyter安装拓展nbextensions及解决官网下载慢的问题
2021/03/03 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
毕业生自我鉴定
2013/11/05 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
幼儿园亲子活动通知
2015/04/24 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
《黄道婆》教学反思
2016/02/22 职场文书
CSS3实现模糊背景的三种效果示例
2021/03/30 HTML / CSS
oracle重置序列从0开始递增1
2022/02/28 Oracle