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>