摘要：我們簡(jiǎn)單測(cè)試下彳刂接下來我們要考慮一但緩存資源數(shù)超出了我們規(guī)定的時(shí)，我們要清理掉不常用的資源。是一個(gè)區(qū)塊管理框架，項(xiàng)目地址在這里區(qū)塊介紹在這里區(qū)塊介紹

轉(zhuǎn)載請(qǐng)注明出處：https://github.com/thx/magix/...

在前端開發(fā)過程中，我們經(jīng)常會(huì)在內(nèi)存中緩存一些數(shù)據(jù)，其實(shí)javascript的緩存比較簡(jiǎn)單，只需要聲明一個(gè)變量或把一些數(shù)據(jù)掛到某個(gè)對(duì)象上即可，比如我們要實(shí)現(xiàn)一個(gè)對(duì)所有的ajax請(qǐng)求緩存的方法，簡(jiǎn)單實(shí)現(xiàn)如下:

var cache={};
var request=function(url,callback){
    if(cache[url]){
        callback(cache[url]);
    }else{
        $.ajax({
            url:url,
            success:function(data){
                callback(cache[url]=data);
            }
        });
    }
};

注意
示例中僅做簡(jiǎn)單演示，未考慮同時(shí)對(duì)相同的url請(qǐng)求多次，比如

request("/a");
request("/a");

在上述代碼中仍然會(huì)發(fā)起2次對(duì)a的請(qǐng)求，這不是我們討論的重點(diǎn)，我們重點(diǎn)討論請(qǐng)求成功并緩存數(shù)據(jù)后，再請(qǐng)求該url的事情，所以這個(gè)問題略過不題

我們回頭看一下我們的request方法，會(huì)發(fā)現(xiàn)這樣的問題：

有些url在整個(gè)項(xiàng)目中或許只請(qǐng)求一次，我們?nèi)匀粚?duì)它的結(jié)果進(jìn)行緩存，造成資源被白白占用，如果應(yīng)用在移動(dòng)端，移動(dòng)端的內(nèi)存資源本身就比較寶貴，所以我們不能浪費(fèi)

所以針對(duì)request方法中的緩存做一些改進(jìn)，使它更智能些。我們需要一種算法，保證緩存的個(gè)數(shù)不能太多，同時(shí)緩存的資源數(shù)超多時(shí)，它能聰明的刪掉那些不常用的緩存數(shù)據(jù)

那我們看一下，當(dāng)我們要實(shí)現(xiàn)這樣一個(gè)算法有哪些關(guān)鍵點(diǎn)要考慮：

我們需要知道緩存中緩存了多少個(gè)資源

當(dāng)我們從緩存中獲取某個(gè)緩存資源時(shí)，獲取的算法復(fù)雜度應(yīng)該是o(1)，緩存模塊的作用是提高程序的效率，拿空間換時(shí)間，所以緩存模塊不應(yīng)該占用過多的CPU時(shí)間

明確目標(biāo)后，我們就需要尋找合適的對(duì)象來緩存我們的數(shù)據(jù)：

var obj={}

根據(jù)key從obj上查找某個(gè)對(duì)象，復(fù)雜度是o(1)，滿足我們的第2條要求，但obj上緩存了多少個(gè)資源需要我們自已維護(hù)

var obj=[]

根據(jù)key查找某個(gè)對(duì)象時(shí)，復(fù)雜度是o(n)，但數(shù)組有l(wèi)ength，可以自動(dòng)的幫我們維護(hù)當(dāng)前緩存了多少個(gè)資源

我們知道數(shù)組是特殊的對(duì)象，所以我們可以把數(shù)組當(dāng)成普通的對(duì)象來用。

當(dāng)我們把一個(gè)緩存對(duì)象push進(jìn)數(shù)組時(shí)，再根據(jù)緩存對(duì)象唯一的key，把它放到這個(gè)數(shù)組對(duì)象上

所以這時(shí)候我們第1版本的代碼可能類似這樣：

var Cache=function(){
    this.$cache=[];
};

Cache.prototype.set=function(key,item){
    var cache=this.$cache;
    var wrap={//包裝一次，方便我們放其它信息，同時(shí)利用對(duì)象引用傳遞
        key:key,
        item:item
    };
    cache.push(wrap);
    cache["cache_"+key]=wrap;//加上cache_的原因是：防止key是數(shù)字或可轉(zhuǎn)化為數(shù)字的字符串，這樣的話就變成了如 cache["2"] 通過下標(biāo)訪問數(shù)組里面的元素了。
};

Cache.prototype.get=function(key){
    var res=this.$cache["cache_"+key];
    return res.item;//返回放入的資源
};

使用示例如下：

var c=new Cache();
c.set("/api/userinfo",{
    name:"彳刂"
});

console.log(c.get("/api/userinfo"));

這時(shí)候我們就完成了初步要求，知道緩存?zhèn)€數(shù)，查找時(shí)復(fù)雜度是o(1)

不過我們?nèi)匀恍枰悄芤恍┑木彺妫?/p>

知道單個(gè)緩存資源的使用頻率

知道單個(gè)緩存資源的最后使用時(shí)間

緩存中最多能放多少個(gè)緩存資源

何時(shí)清理緩存資源

我們改造下剛才的代碼：

var Cache=function(max){
    this.$cache=[];
+   this.$max=max | 0 ||20;
};

Cache.prototype.set=function(key,item){
    var cache=this.$cache;
-   var wrap={//包裝一次，方便我們放其它信息，同時(shí)利用對(duì)象引用傳遞
-        key:key,
-        item:item
-    };
+   key="cache_"+key;
+   var wrap=cache[key];
+   if(!cache.hasOwnProperty(key){
+       wrap={};
+       cache.push(wrap);
+       cache[key]=wrap;
+   }
+   wrap.item=item;
+   wrap.fre=1;//初始使用頻率為1
+   wrap.key=key;
+   wrap.time=new Date().getTime();
};

Cache.prototype.get=function(key){
    var res=this.$cache["cache_"+key];
    if(res){
        res.fre++;//更新使用頻率
        res.time=new Date().getTime();
    }
    return res.item;//返回放入的資源
};

在我們第2版本的代碼中，我們添加了最多緩存資源數(shù)max，同時(shí)每個(gè)緩存資源加入了使用頻率fre及最后使用時(shí)間time，同時(shí)我們修改了set方法，考慮了相同key的多次set問題。

我們簡(jiǎn)單測(cè)試下：

var c=new Cache();
c.set("/api/userinfo",{
    name:"彳刂"
});

console.log(c.$cache[0].fre);//1
console.log(c.get("/api/userinfo"));
console.log(c.$cache[0].fre);//2

接下來我們要考慮一但緩存資源數(shù)超出了我們規(guī)定的max時(shí)，我們要清理掉不常用的資源。清理時(shí)我們根據(jù)頻率的使用fre標(biāo)志，fre最小的優(yōu)先清理，同時(shí)相同的fre，我們優(yōu)先清理time比較小的，這也是time設(shè)計(jì)的意義所在。

所以第3版我們的代碼如下：

var Cache=function(max){
    this.$cache=[];
    this.$max=max | 0 ||20;
};

Cache.prototype.set=function(key,item){
    var cache=this.$cache;
    key="cache_"+key;
    var wrap=cache[key];
    if(!cache.hasOwnProperty(key){
+       if(cache.length>=this.$max){
+           cache.sort(function(a,b){
+               return b.fre==a.fre?b.time-a.time:b.fre-a.fre;
+           });
+           var item=cache.pop();//刪除頻率使用最小，時(shí)間最早的1個(gè)
+           delete cache[item.key];//
+       }
        wrap={};
        cache.push(wrap);
        cache[key]=wrap;
    }
    wrap.item=item;
    wrap.fre=1;//初始使用頻率為1
    wrap.key=key;
    wrap.time=new Date().getTime();
};

Cache.prototype.get=function(key){
    var res=this.$cache["cache_"+key];
    if(res){
        res.fre++;//更新使用頻率
        res.time=new Date().getTime();
    }
    return res.item;//返回放入的資源
};

+Cache.prototype.has=funciton(key){
+   return this.$cache.hasOwnProperty("cache_"+key);
+};

OK，到這里我們就完成了想要的緩存，我們結(jié)合最開始的request方法來進(jìn)行實(shí)際測(cè)試：

var cache=new Cache(2);
var request=function(url,callback){
    if(cache.has(url)){
        callback(cache.get(url);
    }else{
        $.ajax({
            url:url,
            success:function(data){
                cache.set(url,data);
                callback(data);
            }
        });
    }

    })
};

//實(shí)際使用（假設(shè)下一個(gè)request方法被調(diào)用時(shí)，前面request的已經(jīng)完成請(qǐng)求并緩存好了數(shù)據(jù)）：
request("/api/item1");
request("/api/item2");
request("/api/item1");//命中緩存
request("/api/item3");//達(dá)到上限2，cache對(duì)象的內(nèi)部$cache排序一次，刪除/api/item2的緩存
request("/api/item4");//仍然達(dá)到上限2，cache對(duì)象的內(nèi)部$cache排序一次，刪除/api/item3的緩存

request("/api/item3");//接下來需要多次使用/api/item3，但在請(qǐng)求/api/item4時(shí)，它已經(jīng)被刪除了，所以我們需要重新請(qǐng)求。完成請(qǐng)求后，因?yàn)樯舷?依然滿足，所以cache對(duì)象內(nèi)部的$cache仍然需要排序一次，刪除/api/item4
request("/api/item3");//命中緩存

根據(jù)上述使用，我們發(fā)現(xiàn)，一但達(dá)到緩存的上限后，帶來的問題如下：

新的緩存資源進(jìn)來一個(gè)，就需要重新排序一次，性能不好

有可能誤刪除接下來可能頻率使用到的緩存資源

這時(shí)候我們就需要尋找突破。類比我們經(jīng)常使用的操作系統(tǒng)的緩存區(qū)，我們的緩存是否也可以加入一個(gè)緩沖區(qū)呢？當(dāng)整個(gè)緩存列表加上緩沖區(qū)都滿的時(shí)候，才清空一次緩存區(qū)，不但能解決頻繁排序的問題，也能很好的保留接下來程序中可能頻繁使用到的緩存資源

來，緩存的第4版：

var Cache=function(max,buffer){
    this.$cache=[];
    this.$max=max | 0 ||20;
+   this.$buffer=buffer | 0 ||5;
};

Cache.prototype.set=function(key,item){
    var cache=this.$cache;
    key="cache_"+key;
    var wrap=cache[key];
    if(!cache.hasOwnProperty(key){
-        if(cache.length>=this.$max){
+       if(cache.length>=this.$max+this.$buffer){
            cache.sort(function(a,b){
                return b.fre==a.fre?b.time-a.time:b.fre-a.fre;
            });
-            var item=cache.pop();//刪除頻率使用最小，時(shí)間最早的1個(gè)
-            delete cache[item.key];//
+           var buffer=this.$buffer;
+           while(buffer--){
+               var item=cache.pop();
+               delete cache[item.key];
+           }
        }
        wrap={};
        cache.push(wrap);
        cache[key]=wrap;
    }
    wrap.item=item;
    wrap.fre=1;//初始使用頻率為1
    wrap.key=key;
    wrap.time=new Date().getTime();
};

Cache.prototype.get=function(key){
    var res=this.$cache["cache_"+key];
    if(res){
        res.fre++;//更新使用頻率
        res.time=new Date().getTime();
    }
    return res.item;//返回放入的資源
};

Cache.prototype.has=funciton(key){
    return this.$cache.hasOwnProperty("cache_"+key);
};

這時(shí)候我們?cè)俳Y(jié)合request來測(cè)試一下：

var cache=new Cache(2,2);//最大2個(gè)，2個(gè)緩存區(qū)，真實(shí)可以緩存4個(gè)
var request=function(url,callback){
    if(cache.has(url)){
        callback(cache.get(url);
    }else{
        //$.ajax略
    }
};

request("/api/item1");
request("/api/item2");
request("/api/item3");//放在緩沖區(qū)
request("/api/item4");//放在緩沖區(qū)
request("/api/item5");//排序一次，清除/api/item2 /api/item1
request("/api/item6");//放在緩沖區(qū)
request("/api/item7");//放在緩沖區(qū)

至此我們就完成了比較完善的緩存模塊

當(dāng)然，后續(xù)我們?cè)黾泳彺尜Y源的生命期，比如20分鐘后清除，也是較容易的，不在這里詳解。

Magix的Cache模塊比這里稍微再?gòu)?fù)雜些，不過原理都是一樣的。

Magix是一個(gè)區(qū)塊管理框架，項(xiàng)目地址在這里magix

區(qū)塊介紹在這里magix區(qū)塊介紹