JS高级——缓存原理

缓存的原理

1、就是将常用的数据存储起来，提供便利，减少查询次数和所消耗的事件

2、利用作用的原理所产生的数据库：非关系型数据库（内存型数据库） MongoDB、Redis等

3、还有网站静态页面缓存机制，将网页静态化，存储在服务器端

缓存原理运用

1、之前我们递归的原理计算斐波那契数列，但是我们发现递归所消耗的运算量是很大的

<script>
    var count = 0;
    function fib(n){
        count ++;
        if(n <= 2){
            return 1;
        }
        return fib(n - 1) + fib(n - 2);
    }

    fib(5);
    console.log(count);//9
    count = 0;
    fib(6);
    console.log(count);//15
    count = 0;
    fib(20);
    console.log(count);//13529
    count = 0;
    fib(21);
    console.log(count);//21891
</script>

2、我们可以创建一个缓存容器，如果放入的数字之前存在，就直接拿出来；不存在就进入下一步的运算，每次都将计算的值存入到容器中

<script>
    //创建缓存容器
    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();
    fib(5);
    console.log(count);//7
    count = 0;
    fib(6);
    console.log(count);//3
    count = 0;
    fib(20);
    console.log(count);//29
    count = 0;
    fib(21);
    console.log(count);//3
</script>

jquery的缓存实现分析

1、jquery中扫描dom元素，扫描class，扫描id都是很费时间，每次查询元素都要全局扫描一次，必然很费时间，所以jquery也有自己的缓存机制

模拟jquery缓存

<script>
    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];
                }
            }
            return cache[key];
        }
    }

    var eleCache = createCache();
    eleCache("name","高金彪");
    console.log(eleCache("name"));
</script>

jquery源码：很简洁，为了减少变量的声明将函数当对象进行存储值，还有就是对象的添加属性，为了不与对象原生可能拥有的属性发生冲突，使用了[ key + " " ]的方式

<script>
    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("monitor","张学友");
    console.log(typeCache["monitor1" + " "]);

    typeCache("monitor","刘德华");
    console.log(typeCache["monitor2" + " "]);

    typeCache("monitor3","彭于晏");
    console.log(typeCache["monitor3 "]);
</script>