Javascript学习之缓存详解

w8484855@qq.com

本文和大家分享的主要是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 = [1, 1, 2, 3, 5, 8, 13, 21, 34];

        arr[0];
        arr[1];
        arr[100];
b.解决递归斐波那契数列的性能问题

定义一个缓存数组，存储已经计算出来的斐波那契数.

计算的步骤

1.先从cache数组中去取想要获取的数字。

2.如果获取到了，直接使用。

3.如果没有获取到，就去计算，计算完之后，把计算结果存入cache，然后将结果返回。

function createCache(){
            var cache = {};
            return function (key, value) {
                //如果传了值，就说名是设置值
                if(value !== undefined){
                    cache[key] = value;
                    return cache[key];
                }
                //如果没有传值，只传了键，那就是获取值
                else{
                    return cache[key];
                }
            }
        }
        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[key] = value;
                    //将键存入index数组中，以和cache中的数据进行对应
                    index.push(key);

                    //判断缓存中的数据数量是不是超出了限制
                    if(index.length >= 50){
                        //如果超出了限制
                        //删除掉最早存储缓存的数据
                        //最早存入缓存的数据的键是在index数组的第一位
                        //使用数组的shift方法可以获取并删除掉数组的第一个元素
                        var tempKey = index.shift();
                        //获取到最早加入缓存的这个数据的键，可以使用它将数据从缓存各种删除
                        delete cache[tempKey];
                    }
                }
                //如果没有传值，只穿了键，那就是获取值
                else{
                    return cache[key];
                }
                return cache[key];
            }
        }

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 "]);


来源：简书