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

2020-05-17 06:25:53易采站长站整理

// 如果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”);