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

前言
对于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的简单缓存系统:先给该DOM元素添加一个随机生成的属性expando,这个属性用来存放访问缓存数据的id值,就好比DOM元素都有一把开启缓存保险箱的钥匙,只要有了钥匙就可以随时开启缓存保险箱。 将本来存放到DOM元素中的数据都转到了缓存中,而DOM元素本身只要存储一个简单的属性就可以了,这样就可以将由DOM元素引起的内存泄漏(具体会发生什么状况不知道,大家都这么说~)的风险规避到最小。

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

(0)

相关推荐

  • jQuery中数据缓存$.data的用法及源码完全解析

    一.实现原理: 对于DOM元素,通过分配一个唯一的关联id把DOM元素和该DOM元素的数据缓存对象关联起来,关联id被附加到以jQuery.expando的值命名的属性上,数据存储在全局缓存对象jQuery.cache中.在读取.设置.移除数据时,将通过关联id从全局缓存对象jQuery.cache中找到关联的数据缓存对象,然后在数据缓存对象上执行读取.设置.移除操作. 对于Javascript对象,数据则直接存储在该Javascript对象的属性jQuery.expando上.在读取.设置.移

  • 禁止JQuery中的load方法装载IE缓存中文件的方法

    使用方法如下: 复制代码 代码如下: $("#panel").load("test.asp"); //在页面装载时,在ID为#panel的DOM元素里test.asp的内容. 但是,当你修改test.asp文件的内容以后,在IE浏览器下,再利用以上方法重新装载该文件时,你会发现ID为#panel的DOM元素的内容并未发生变化,问题究竟出现在什么地方呢?原来是重新加载以后,IE浏览器并没有从服务器端重新下载修改以后的test.asp,而是直接从IE缓存中读取没有修改之

  • 关于jQuery对象数据缓存Cache原理以及jQuery.data详解

    网上有很多教你怎么使用jQuery.data(..)来实现数据缓存,但有两个用户经常使用的data([key],[value])和jQuery.data(element,[key],[value])几乎没有什么文章说清楚它们两的区别,所以我用到了,研究下分享给大家.$("").data([key],[value])与jQuery.data(element,[key],[value])的区别这两个函数都是用来在元素上存放数据也就平时所说的数据缓存,都返回jQuery对象,当时我分别在使用

  • jQuery中ajax的使用与缓存问题的解决方法

    1:GET访问 浏览器 认为 是等幂的就是 一个相同的URL 只有一个结果[相同是指 整个URL字符串完全匹配]所以 第二次访问的时候 如果 URL字符串没变化 浏览器是 直接拿出了第一次访问的结果 POST则 认为是一个 变动性 访问 (浏览器 认为 POST的提交 必定是 有改变的) 防止 GET 的 等幂 访问 就在URL后面加上 ?+new Date();,[总之就是使每次访问的URL字符串不一样的] 设计WEB页面的时候 也应该遵守这个原则 2:一.谈Ajax的Get和Post的区别

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

    作为一名程序员,一提到"缓存"你很容易联想到"客户端(浏览器缓存)"和"服务器缓存".客户端缓存是存在浏览者电脑硬盘上的,即浏览器临时文件夹,而服务器缓存是存在服务器内存中,当然在一些高级应用场合也有专门的缓存服务器,甚至有利用数据库进行缓存的实现.当然这些都不在本文的讨论范围,本文要讨论的是最流行的JavaScript框架jQuery的数据缓存实现原理,这是jQuery1.2.3版开始加入的新功能. 一. jQuery数据缓存的作用 jQuer

  • Jquery中Ajax 缓存带来的影响的解决方法

    使用jquery里load方法或者ajax调用页面的时候会存在cache的问题,清除cache的方法: 调用$.ajaxSetup ({cache:false}) 方法即可. 复制代码 代码如下: <script type="text/javascript"> $.ajaxSetup({ cache: false }); </script>

  • ie下jquery.getJSON的缓存问题的处理方法

    在项目中遇到一个问题,在火狐下,$.getJSON();请求数据一切正常,但是在IE下面,$.getJSON():只请求一次数据,第二次根本就不发送请求了,用fiddler抓取了才知道,第二次没有发送请求,改成了post就正常了 $.getJSON()存在缓存问题,如果其调用的url之前曾经调用过的话,回调函数就会直接在缓存里取得想要得值,而不是进入到后台 解决方法如下: 1.让每次调用的URL都不一样. 方法:在参数中加一个随机数 复制代码 代码如下: $.getJSON("/Member/G

  • jQuery ajax cache缓存问题

    在jquery里面用$.ajax 然后, 指定ajax属性的时候, 使用了:'false' . 可恶的javascript特性就在这里出现了. 在jquery里面, 大部分的时候, 属性要用''引起来. 否则容易变成变量名.比如red, 引不引都差不多.但是引起来也可以认. 所以习惯就全部引起来好了. 然而, false是个特例. 如果引起来, 导致的结果: 'false' 按true处理. 因为只有空字串才是true. 例如:在浏览器地址栏输入: javascript:alert('false

  • 读jQuery之六 缓存数据功能介绍

    很多同学在项目中都喜欢将数据存储在HTMLElement属性上,如 复制代码 代码如下: <div data="some data">Test</div> <script> div.getAttribute('data'); // some data </script> 给页面中div添加了自定义属性"data"及值"some data".后续JS代码中使用getAttribute获取. jQuer

  • jquery 缓存问题的几个解决方法

    .load方法没有设置 cache参数 默认true ,特别在IE浏览器下,一般的ajax的方法都是cache等于true的! 解决办法几个: 1.使用.ajax方法并设置 cache参数为false 复制代码 代码如下: $.ajaxSetup ({ cache: false }); $(fucntion({ $.ajaxSetup ({ cache: false }); })) 在每次执行load方法前执行,注意不能设置为全局属性 可以写一个方法每次打开页面都引用这个方法 2.修改jquer

  • jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍

    网上有很多教你怎么使用jQuery.data(..)来实现数据缓存,但有两个用户经常使用的data([key],[value])和jQuery.data(element,[key],[value])几乎没有什么文章说清楚它们两的区别,所以我用到了,研究下分享给大家. $("").data([key],[value])与jQuery.data(element,[key],[value])的区别 这两个函数都是用来在元素上存放数据也就平时所说的数据缓存,都返回jQuery对象,当时我分别在

  • IE下jquery ajax无法获得最新数据的问题解决(IE缓存)

    今天修改一个bug,利用ajax查询数据,在谷歌浏览器下可以获取到最新数据,而在IE中获得是旧数据,无法获得最新的数据,经查资料,才发现时IE缓存再作怪. 发现此ajax请求用的get方式,每次请求的URL一模一样,IE浏览器有个特殊的地方,如果每次请求的URL一样时,就会拿出缓存中已有的数据显示在页面上,并不会再次去查询数据库,所以每次显示的都是旧数据. 解决办法: 那就有思路了,我们可以让它每次请求的URL不一样,可以加一个参数,而且这个参数的值每次都不一样,时间戳最好不过了. 复制代码 代

随机推荐