Javascript学习之缓存详解
本文和大家分享的主要是javascript中的缓存相关内容，一起来看看吧，希望对大家学习javascript有所帮助。一.缓存（cache）
1.缓存的作用
就是将一些常用的数据，存储起来，提供使用，提升性能。
2.网站静态页面缓存机制
将网页静态化，存储在服务器端。
3.如何利用闭包实现缓存
①、写一个闭包在闭包中创建一个对象，用来做缓存的存储对象
②、在闭包中创建一个数组，用来存储换中的键
③、返回一个函数，这个函数需要两个参数，一个是key 一个是value
④、在返回的函数中,判断传入的value是否为undefined
⑤、如果为Undefined 则表示是获取值，就直接返回在第一步创建的缓存对象中指定的键对应的值
⑥、如果不为Undefined 则表示是设置值
⑦、在缓存对象中设置指定的key的值为value
⑧、把key加入存储key的数组
⑨、判断key数组是不是超出了缓存大小限制
⑩、如果超出限制，删除数组第一个元素（使用shift），获取到删除的key；使用删除的key删除缓存对象中存储的值（delete）
4.缓存的实例
a.分析递归解决斐波那契数列存在的性能问题
//f(n) = f(n-1) + f(n - 2)
var count = 0;
function fib(n){
count ++;
if(n <= 2){
return 1;
}
return fib(n - 1) + fib(n - 2);
}
fib(5);
console.log(count);
count = 0;
fib(6);
console.log(count);
count = 0;
fib(20);
console.log(count);
count = 0;
fib(21);
console.log(count);
count = 0;
//若不使用缓存，每次调用都要从1算起。
//使用数组存储数列，虽然可以提升性能，但是有局限性
//可以求5的 也可以求10的，但是要求100呢 100000呢
var arr = ;
arr;
arr;
arr;
b.解决递归斐波那契数列的性能问题
定义一个缓存数组，存储已经计算出来的斐波那契数.
计算的步骤
1.先从cache数组中去取想要获取的数字。
2.如果获取到了，直接使用。
3.如果没有获取到，就去计算，计算完之后，把计算结果存入cache，然后将结果返回。
function createCache(){
var cache = {};
return function (key, value) {
//如果传了值，就说名是设置值
if(value !== undefined){
cache = value;
return cache;
}
//如果没有传值，只传了键，那就是获取值
else{
return cache;
}
}
}
var count =0 ;
function createFib(){
var fibCache = createCache();
function fib(n){
count ++;
//1.从cache中获取数据
if(fibCache(n) !== undefined){
//如果缓存中有 直接返回
return fibCache(n) ;
}
//如果缓存中没有 就计算
if(n <= 2){
//把计算结果存入数组
fibCache(n , 1) ;
return 1;
}
var temp = fib(n - 1) + fib(n - 2);
//把计算结果存入数组
fibCache(n, temp) ;
return temp;
}
return fib;
}
var fib = createFib();
// console.log(fib(6));
fib(5);
console.log(count);
count = 0;
fib(6);
console.log(count);
count = 0;
fib(20);
console.log(count);
count = 0;
fib(21);
console.log(count);
count = 0;
5.jQuery缓存实现的分析
function createCache(){
//cache对象中以键值对的形式存储我们的缓存数据
var cache = {};
//index数组中该存储键，这个键是有顺序，可以方便我们做超出容量的处理
var index = [];
return function (key, value) {
//如果传了值，就说名是设置值
if(value !== undefined){
//将数据存入cache对象，做缓存
cache = value;
//将键存入index数组中，以和cache中的数据进行对应
index.push(key);
//判断缓存中的数据数量是不是超出了限制
if(index.length >= 50){
//如果超出了限制
//删除掉最早存储缓存的数据
//最早存入缓存的数据的键是在index数组的第一位
//使用数组的shift方法可以获取并删除掉数组的第一个元素
var tempKey = index.shift();
//获取到最早加入缓存的这个数据的键，可以使用它将数据从缓存各种删除
delete cache;
}
}
//如果没有传值，只穿了键，那就是获取值
else{
return cache;
}
return cache;
}
}
6.JQuery缓存源码分析
function createCache() {
var keys = [];
function cache( key, value ) {
// 使用(key + " ") 是为了避免和原生（本地）的原型中的属性冲突
if ( keys.push( key + " " ) > 3 ) {
// 只保留最新存入的数据
delete cache[ keys.shift() ];
}
// 1 给 cache 赋值
// 2 把值返回
return (cache[ key + " " ] = value);
}
return cache;
}
var typeCache = createCache();
typeCache("monitor");
console.log(typeCache["monitor" + " "]);
typeCache("monitor1","张学友");
console.log(typeCache["monitor1" + " "]);
typeCache("monitor2","刘德华");
console.log(typeCache["monitor2" + " "]);
typeCache("monitor3","彭于晏");
console.log(typeCache["monitor3 "]);
// console.log(typeCache["monitor "]);
来源：简书
页:
[1]