知识大全 jQuery数据缓存功能的实现思路

Posted 2022-07-14 知

篇首语：愿君学长松，慎勿作桃李。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 jQuery数据缓存功能的实现思路相关的知识，希望对你有一定的参考价值。

jQuery数据缓存功能的实现思路 以下文字资料是由(全榜网网www.cha138.com)小编为大家搜集整理后发布的内容，让我们赶快一起来看一下吧！

　　前言对于jQuery的数据缓存相信大家都不会陌生 jQuery缓存系统不仅运用于DOM元素动画事件等都有用到这个缓存系统所以在平时实际应用中我们经常需要给元素缓存一些数据并且这些数据往往和DOM元素紧密相关由于DOM元素(节点)也是对象所以我们可以直接扩展DOM元素的属性但是如果给DOM元素添加自定义的属性和过多的数据可能会引起内存泄漏所以应该要尽量避免这样做因此更好的解决方法是使用一种低耦合的方式让DOM和缓存数据能够联系起来另外对于jQuery data和jQuery removeData静态方法以及基于这两个方法的原型扩展方法的介绍和用法就不多说了可以查看官方API文档实现思路 jQuery提供了一套灵活和强大的缓存方法（）先在jQuery内部创建一个cache对象来保存缓存数据然后往需要进行缓存的DOM节点上扩展一个值为expando的属性这里是”jQuery” + (new Date) getTime() 注 expando的值等于”jQuery”+当前时间元素本身具有这种属性的可能性很少所以可以忽略冲突（）接着把每个节点的dom[expando]的值都设为一个自增的变量id 保持全局唯一性这个id的值就作为cache的key用来关联DOM节点和数据也就是说cache[id]就取到了这个节点上的所有缓存即id就好比是打开一个房间(DOM节点)的钥匙而每个元素的所有缓存都被放到了一个map映射里面这样可以同时缓存多个数据（）所以cache对象结构应该像下面这样

复制代码代码如下: var cache = "uuid ": // DOM节点缓存数据 "uuid "相当于dom [expando] "name ": value "name ": value "uuid ": // DOM节点缓存数据 “uuid "相当于dom [expando] "name ": value "name ": value // ;

　　每个uuid对应一个elem缓存数据每个缓存对象是可以由多个name/value(名值对)对组成的而value是可以是任何数据类型的简单模拟实现根据以上思路就可以简单实现下jQuery data和jQuery removeDate的功能了

复制代码代码如下: (function(window undefined) var cacheData = // 用来存储数据的对象 win = window // 把window缓存给一个变量 uuid = // 声明随机数( 位) // 注意+new Date()生成的随机数是Number类型与一个空字符串连接后(或使用toString方法转型后)变成字符串才可使用slice方法 expando = "cacheData" + (+new Date() + "") slice( ); // (+new Date()) toString() slice( )等价于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 // IE 即标准浏览器可以直接使用delete来删除属性 delete elem[expando]; catch (e) // IE /IE 使用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" > demo </div>

　　 js代码

复制代码代码如下: window onload = function() // 测试 var demo = document getElementById("demo"); // 写入缓存 data(demo "myName" "hcy"); console log(data(demo "myName")); // hcy data(demo "myBlog" " console log(data(demo "myBlog")); // // 删除DOM元素的某个缓存值 removeData(demo "myBlog"); console log(data(demo "myBlog")); // undefined console log(data(demo "myName")); // hcy console log(demo[expando]); // // 删除DOM元素 removeData(demo); console log(demo[expando]); // undefined ; cha138/Article/program/Java/JSP/201311/20545