这篇文章主要介绍了jQuery的缓存机制浅析,并且模拟jQuery自己写了一个简单的缓存系统实例,需要的朋友可以参考下

前不久在研究jQuery的动画队列的时候,发现jQuery的缓存系统也很强大,尽管以前也稍微接触过,但一直都没有深入研究过。jQuery的缓存系统在外部应用的时候都比较简单,比如要将某个URL数据存到缓存中只要这么写:


var val = "stylechen.com";
$("div").data( "url" ); // 返回undefined
$("div").data( "url", val ); // 返回"stylechen.com"
$("div").data( "url" ); // 返回"stylechen.com"

不光可以存储字符串,上面的val也可以是任意数据,对象、数组、函数等都可以存到里面。仅仅实现这种功能还是挺简单的,声明一个全局对象用来存储数据,然后使用data方法来存储或返回数据:


var cacheData = {}; // 用来存储数据的全局对象
var data = function( key, val ){
 if( val !== undefined ){
cacheData[key] = val;
 }

 return cacheData[key];
}; 

jQuery缓存系统的真正魅力在于其内部应用中,动画、事件等都有用到这个缓存系统。之前在写easyAnim的时候,我将动画的队列都存储到各DOM元素的自定义属性中,这样虽然可以方便的访问队列数据,但也同时带来了隐患。如果给DOM元素添加自定义的属性和过多的数据可能会引起内存泄漏,所以要尽量避免这么干。

如果是使用jQuery的缓存系统来存放DOM元素的数据,会先给该DOM元素添加一个随机生成的属性,这个属性用来存放访问缓存数据的索引值,就好比DOM元素都有一把开启缓存保险箱的钥匙,只要有了钥匙就可以随时开启缓存保险箱。将本来存放到DOM元素中的数据都转到了缓存中,而DOM元素本身只要存储一个简单的属性就可以了,这样就可以将由DOM元素引起的内存泄漏的风险规避到最小。下面是我模拟jQuery自己写的一个简单的缓存系统:


var cacheData = {}, // 用来存储数据的全局对象
 uuid = 0,
 // 声明随机数
 expando = "cacheData" ( new Date() "" ).slice( -8 );

var data = function( key, val, data ){
 if( typeof key === "string" ){
if( val !== undefined ){
 cacheData[key] = val;
}

return cacheData[key];
 }
 else if( typeof key === "object" ){
var index,
 thisCache;

if( !key[expando] ){
 // 添加一个DOM元素的属性
 // 随机数是属性名 索引值是属性值
 index = key[expando] = uuid;
 thisCache = cacheData[index] = {};
}
else{
 index = key[expando];
 thisCache = cacheData[index];
}


if( !thisCache[expando] ){
 thisCache[expando] = {};
}

if( <a href="http://lovean.com">gambling</a> data !== undefined ){
 // 将数据存到缓存对象中
 thisCache[expando][val] = data;
}

// 返回DOM元素存储的数据
return thisCache[expando][val];
 }
};

var removeData = function( key, val ){
 if( typeof key === "string" ){
delete cacheData[key];
 }
 else if( typeof key === "object" ){
if( !key[expando] ){
 return;
}
// 检测对象是否为空
var isEmptyObject = function( obj ) {
var name;
for ( name in obj ) {
 return false;
}
return true;
 },

 removeAttr = function(){
try{
 // IE8及标准浏览器可以直接使用delete来删除属性
 delete key[expando];
}
catch (e) {
 // IE6/IE7使用removeAttribute方法来删除属性
 key.removeAttribute(expando);
}
 },

 index = key[expando];

if( val ){
 // 只删除指定的数据
 delete cacheData[index][expando][val];
 // 如果是空对象 索性全部删除
 if( isEmptyObject( cacheData[index][expando] ) ){
delete cacheData[index];
removeAttr();
 }
}
else{
 // 删除DOM元素存到缓存中的所有数据
 delete cacheData[index];
 removeAttr();
}
 }
};


上面的代码值得注意的是IE6/IE7中用delete来删除自定义的属性会报错,只能使用removeAttribute来删除,标准的浏览器都可以使用delete来删除。下面是调用的结果:


var box = document.getElementById( "box" ),
 list = document.getElementById( "list" );

data( box, "myName", "chen" );
alert( data( box, "myName" ) ); // chen

data( box, "myBlog", "stylechen.com" );
alert( data( box, "myBlog" ) ); // stylechen.com

removeData( box, "myBlog" );

alert( data( box, "myBlog" ) ); // undefined
alert( data( box, "myName" ) ); // chen
alert( box[expando] ); // 1

removeData( box );
alert( box[expando] ); // undefined

当然,jQuery的缓存系统比我的这个要复杂些,不过核心原理还是一样的。easyAnim将会在后续的版本中引入这个缓存系统。

最新资讯
亚马逊旗下初创企业Zoox获许在加州测试自动驾驶汽车

亚马逊旗下初创企业Zo

初创公司Zoox周五获得了加利福尼亚州当局的许可,可在没
iPhone 12Pro新配色渲染图 “红蓝CP”会不会出现呢?

iPhone 12Pro新配色渲

脑洞大开地根据新款Apple Watch制作了一张iPhone 12 P
无刘海版iPhone机模曝光 虽然外观很好看但不真实

无刘海版iPhone机模曝

网上又有网友发布消息,向大家展示了这款无刘海iPhone的
三星5nm工艺 高通骁龙875曝光:八核心三丛集架构

三星5nm工艺 高通骁龙

毫无疑问,这颗5nm处理器便是即将在年底登场的高通骁龙8
新业务密集发布 App矩阵扩充 滴滴“阵变”

新业务密集发布 App矩

据相关媒体报道,目前滴滴货运在成都、杭州等地市场份额
中国信通院预测 今年网络安全产业规模约1702亿

中国信通院预测 今年

我国网络安全产业规模呈现持续高速增长态势。2019年我
最新文章
详解Vue的ref特性的使用

详解Vue的ref特性的使

这篇文章主要介绍了详解Vue的ref特性的使用,文中通过
vue学习笔记之slot插槽基本用法实例分析

vue学习笔记之slot插

这篇文章主要介绍了vue学习笔记之slot插槽基本用法,结
vue跳转方式(打开新页面)及传参操作示例

vue跳转方式(打开新页

这篇文章主要介绍了vue跳转方式(打开新页面)及传参操作,
vue学习笔记之过滤器的基本使用方法实例分析

vue学习笔记之过滤器

这篇文章主要介绍了vue学习笔记之过滤器的基本使用方
js获取本日、本周、本月的时间代码

js获取本日、本周、本

本篇文章给大家分享的内容是利用js如何获取本日、本周
node crawler如何添加promise支持

node crawler如何添加

这篇文章主要介绍了node crawler如何添加promise支持,