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

相信大家都很熟悉jQuery的数据缓存。jQuery缓存系统不仅用于DOM元素，还用于动画和事件。因此，在日常的实际应用中，我们经常需要为元素缓存一些数据，而这些数据往往与DOM元素密切相关。因为DOM元素(节点)也是对象，所以我们可以直接扩展DOM元素的属性。但是，在DOM元素中添加自定义属性和过多的数据可能会导致内存泄漏，所以我们应该尽量避免这样做。因此，更好的解决方案是使用低耦合的方式使DOM和缓存数据相关。另外，jQuery.data和jQuery.removeData的静态方法，以及基于这两种方法的原型扩展方法就不介绍使用了。可以查看官方API文档。实现思路jQuery提供了一套灵活强大的缓存方法：(1)首先在jQuery内部创建一个cache对象{}，保存缓存的数据。然后将一个带有expando值的属性扩展到要缓存的DOM节点，这里是“jquery”(新日期)。gettime()。注意：expando的值等于“jQuery”的当前时间。元素本身不太可能有这个属性，所以冲突可以忽略。(2)然后，将每个节点的dom[expando]值设置为自增变量id，以保持全局唯一性。该id的值被用作缓存的键，以将DOM节点与数据相关联。也就是说，cache[id]获取这个节点上的所有缓存，也就是说，id就像打开一个房间的钥匙(DOM节点)。每个元素的所有缓存都放在一个地图中，这样就可以同时缓存多个数据。(3)因此缓存对象的结构应该如下：复制的代码如下： varcache={ ' uuid1 ' 3360 {//DOM节点1缓存数据，' uuid 1 '相当于DOM 1[expando]' name 1 ' : value 1，' Name2' :Value2}。Uuid2': {//DOM节点2缓存数据，“Uuid2”相当于DOM 2[expando]“name 1”: value 1，“name 2”: value 2 }//.};每个uuid对应一个elem缓存数据，每个缓存对象可以由多个名称/值对组成，值可以是任何数据类型。按照上面的思路，我们可以简单实现jQuery.data和jQuery.removeDate的功能：复制代码如下： (function (window，undefined){ var cache data={ }，//用来存储数据的对象win=window，//cache window到一个变量uuid=0。//声明随机数(8位)。//注意新Date()生成的随机数是数字类型的，用空字符串连接(或者用toString方法转换)后，在使用slice方法之前会变成字符串。

expando='cacheData '(新日期()' ')。切片(-8);//(新日期())。toString().切片(-8)等价于expando /写入缓存定义变量数据=函数(elem，name，value) { //或使用原生方法验证字符串对象。原型。ToString。call(elem)==='[对象字符串]' //如果elem为字符串if(elem==' string '){//如果传入名字参数，则为写入缓存如果（姓名！==未定义){ cacheData[elem]=name；} //返回缓存数据返回cache DATa[elem]；//如果elem为数字正射影像图节点} else if(elem==' object '){ var id，thisCache//如果elem不存在扩展属性，则添加一个扩展属性（第一次给元素设置缓存),否则直接获取已有的扩展和编号值if(！elem[expando]){ id=elem[expando]=uuid；this CACHE=CACHE DATa[id]={ }；} else { id=elem[expando]；this CACHE=CACHE DATa[id]；} //把一个随机数作为当前缓存对象的一个属性，利用该随机数就能找到该缓存对象if(！此缓存[expando]){此缓存[expando]={ }；}如果(值！==未定义){ //将数据存到缓存对象中此缓存[expando][name]=值；} //返回数字正射影像图元素存储的数据返回此CACHE[expando][name]；} };//删除缓存var removeData=function(elem，name) { //如果elem为字符串，则直接删除该属性值if(elem==' string '){ delete cacheData[elem]；//如果键为数字正射影像图节点} else if(elem==' object '){//如果elem不存在扩展属性，则终止执行，不用删除缓存if(！elem[expando]){ return；} //检测对象是否为空var isEmptyObject=function(obj){ var name；for(obj中的名称){ return false}返回true } remove attr=function(){ try {//IE8即标准浏览器可以直接使用删除来删除属性删除elem[expando]；}渔获量{ //IE6/IE7)使用removeAttribute方法来删除属性艾伦。移除属性(expando)；} }，id=elem[expando]；if (name) { //只删除指定的数据删除cacheData[id][expando][name]；//如果是空对象，id所对应的数据对象全部删除if(isEmptyObject(cacheData[id][expando]){ delete cacheData[id]；移除attr()；} } else { //删除数字正射影像图元素存到缓存中的所有数据删除缓存数据[id]；移除attr()；} } };//把数据和移除数据挂在窗户全局对象下，这样在外部也能访问到这两个函数win.expando=expandowin.data=数据；赢了。移除数据=移除数据；})(窗口，未定义);例子：HTML结构：复制代码代码如下： div id=' demo ' style=' height : 100px；宽度： 100像素；背景# CCC color : # fffmargin : 20px文本对齐：中心；线高： 100像素；演示/div js代码：复制代码代码如下：窗口。onload=function(){//测试var demo=文档。getelementbyid(' demo ')；//写入缓存数据（演示，‘我的名字’，‘Hcy’；console.log(数据（演示，‘我的名字’)；//hcy数据(演示，‘我的博客’，http://www。cn博客。com/胱style’)；console.log(数据（演示，' my BLog ')；//http://www . cn bloggs.com/胱太/删除数字正射影像图元素的某个缓存值移除数据(演示，'我的博客');console.log(数据（演示，' my BLog ')；//未定义的console.log(数据(演示，‘my name’)；//Hcy控制台。日志(演示[expando])；//1 //删除数字正射影像图元素移除数据(演示);控制台。日志(演示[expando])；//未定义};火狐浏览器下例子结果截图

实现上例中jQuery的简单缓存系统：首先，在DOM元素中添加一个随机生成的属性expando，用来存储访问缓存数据的id值，就像DOM元素有一个打开缓存保险箱的密钥一样，只要密钥可用，缓存保险箱就可以随时打开。原本存储在DOM元素中的数据全部转移到缓存中，而DOM元素本身只需要存储一个简单的属性，这样就可以最大限度地避免DOM元素带来的内存泄漏风险(具体会发生什么我也不清楚，所以大家都说~)。在结语的最后，可能会有一些术语或解释上的偏差。希望你能纠正一下你的童鞋，给点建议。此外，理论上data和removeData方法可以用于缓存任何对象，但如果用于本地对象或窗口对象，则会出现内存泄漏和循环引用等问题(_ _见互联网)，因此一般适用于DOM节点，也可以结合事件和动画为DOM节点缓存数据。PS:缓存真的很重要！需要慢慢体会~因为分享，所以简单；因为分享，所以快乐。