版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/tengdazhang770960436/article/details/81989652
1.单独在一个页面中使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/jquery.js"></script>
<div id="id" class="id">缓存测试</div>
<script>
function getValue(id) {
document.writeln('为：' + id + '创建值');
document.writeln('<br>')
document.writeln('<br>')
return "value is "+ id;
}
var CacheSearchBox = (function () {
var cache = {}, count = [];
return {
// 缓存中搜索方法
search: function (searchId) {
// 如果在缓存中，直接返回缓存中对象
if(searchId in cache) {
document.writeln('从缓存中取数据');
document.writeln('<br>')
return cache[searchId];
}
document.writeln('缓存中无此数据');
document.writeln('<br>')
var value = getValue(searchId);
cache[searchId] = value;
count.push(searchId)
// 保证缓存大小为2
if(count.length > 2) {
document.writeln('缓存量超过最大值，删除最后一个元素');
document.writeln('<br>')
// count.pop() 删除并返回第一个元素
delete cache[count.shift()];
}
document.writeln('当前缓存对象内容：' + JSON.stringify(cache));
document.writeln('<br>')
document.writeln('当前缓存数组内容：' + JSON.stringify(count));
document.writeln('<br>')
},
// 清除缓存方法
clear: function (searchId) {
if(searchId in cache) {
// 删除缓存中的对象
delete cache[searchId];
// 删除缓存数组中的数据
count.splice(count.indexOf(9), 1)
document.writeln('清除缓存对象：' + searchId);
document.writeln('<br>')
document.writeln('当前缓存对象内容：' + JSON.stringify(cache));
document.writeln('<br>')
}
}
};
})();
CacheSearchBox.search('1');
CacheSearchBox.search('1');
CacheSearchBox.search('2');
CacheSearchBox.search('2');
CacheSearchBox.search('3');
CacheSearchBox.clear('3')
</script>
</body>
</html>
2.将闭包放到一个单独js文件中使用
2.1.创建 cache.js 文件
// 使用闭包的方式把当前缓存对象加入到window对象中，成为它的属性CacheSearchBox，
// 以便在所有需要使用缓存的地方直接通过CacheSearchBox名字就可以直接调用方法了
;(function (window) {
function getValue(id) {
document.writeln('为：' + id + '创建值');
document.writeln('<br>')
document.writeln('<br>')
return "value is "+ id;
}
var CacheSearchBox = (function () {
var cache = {}, count = [];
return {
// 缓存中搜索方法
search: function (searchId) {
// 如果在缓存中，直接返回缓存中对象
if(searchId in cache) {
document.writeln('从缓存中取数据');
document.writeln('<br>')
return cache[searchId];
}
document.writeln('缓存中无此数据');
document.writeln('<br>')
var value = getValue(searchId);
cache[searchId] = value;
count.push(searchId)
// 保证缓存大小为2
if(count.length > 2) {
document.writeln('缓存量超过最大值，删除最后一个元素');
document.writeln('<br>')
// count.pop() 删除并返回第一个元素
delete cache[count.shift()];
}
document.writeln('当前缓存对象内容：' + JSON.stringify(cache));
document.writeln('<br>')
document.writeln('当前缓存数组内容：' + JSON.stringify(count));
document.writeln('<br>')
},
// 清除缓存方法
clear: function (searchId) {
if(searchId in cache) {
// 删除缓存中的对象
delete cache[searchId];
// 删除缓存数组中的数据
count.splice(count.indexOf(9), 1)
document.writeln('清除缓存对象：' + searchId);
document.writeln('<br>')
document.writeln('当前缓存对象内容：' + JSON.stringify(cache));
document.writeln('<br>')
}
}
};
})();
window.CacheSearchBox = CacheSearchBox;
})(window);2.2.在需要的地方引用 cache.js 文件并使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script src="js/jquery.js"></script>
<script src="js/cache.js"></script>
<div id="id" class="id">缓存测试</div>
<script>
CacheSearchBox.search('1');
CacheSearchBox.search('1');
CacheSearchBox.search('2');
CacheSearchBox.search('2');
CacheSearchBox.search('3');
CacheSearchBox.clear('3')
</script>
</body>
</html>