JAvascriptキャッシュシステム

6775 ワード

jQueryを模倣してキャッシュシステムを設計した.jQueryのようにDataのようなものは、Prototypeやmootoolsにもあり、通常の関数が前回計算した結果ではなく、生成したデータをキャッシュするためのイベントシステムを支援することを目的としています.PrototypeはそのHashクラスを利用していますが、mootoolsは詳しく見ていません.内部はuuidをキャッシュするために使われているようです.1つの共通認識は、ページで使用される要素にuuidを設定することが非常に役立ち、要素を検索するときに重複検索を回避したり、イベントコールバック関数にバインドしたりすることができます.uuidは現在IEのみサポートされているため、uniqueIDと呼ばれ、フォーマットはms__である.idd+、後ろの数字にも名堂があり、uniqueNumberと呼ばれています.jQueryそれはuniqueNumberでしょう.そして、そのキャッシュシステムは非常に複雑で、単一のデータ(dataという読み書き方法を利用)と1組のデータ(queueを利用して、dequeueを削除する)のキャッシュをサポートしています.仕方ありません.それは素手で起業したので、Prototypeのようにカスタムデータ型を利用して職責を分担していません.本題に入って、私のキャッシュシステムについて話します.それは私のスーパー配列オブジェクトを利用して、queueとdequeueのように実現します.しかし、私のスーパー配列オブジェクトができることはもっと多く、filter、forEach、map、reduce、one、toObject、contains、removeなどがそろっています.

   dom.eventTypes = dom.array(String("abort blur change click contextmenu  \
                 dblclick error focus  keydown keypress keyup load mousedown  \
                 mouseenter mouseup mouseleave mousemove mouseover mouseout \
                 reset resize  select submit unload").match(/\w+/g));
    //******************************    ***********************
    dom.mixin({
        uuid : 0,
        storage: {},
        buildCache:function(item){
            var key,cache = dom.storage;
            //   window
            if ( item.setInterval && ( item !== window && !item.frameElement )) {
                key =  "dom-window"
            }else if(item.nodeType){
                if(!item.uuid){
                    item.uuid = "dom" + dom.uuid++
                    dom.cache("uuid","uuid-set",item);//       
                }//        uuid   ,              
                key =  item.uuid
            }else if(dom.isString(item)){
                key =  item;
            }else{
               throw "item must be element node ,window or string"
            }
            if(!cache[key]){
                cache[key] = {};
            }
            return cache[key]
        },
        cache:function(item,name,data){//    
            var cache = dom.buildCache(item);
            if(data !== undefined){
                if(dom.isFunction(data)){//    ,       uuid,      toString()     
                    var uuid = (data+"").replace(/\s+/g,'');
                    data.uuid = uuid;
                }
                if(!cache[name]){
                    //set list        ,
                    //      -set           ,list    
                    if(/-set$/.test(name)){//        
                        cache[name] = array(data);
                        cache[name].type = "set";
                    }else if(/-list$/.test(name)){//
                        cache[name] = array(data);
                        cache[name].type = "list";
                    }else{
                        cache[name] = data;
                    }
                }else{
                    var type = cache[name].type;
                    if(type && type === "set" ){
                        cache[name].ensure(data)
                    }else if(type && type === "list" ){
                        cache[name].push(data)
                    }else{
                        cache[name] = data;
                    }
                }
                return item;
            }else{
                return cache[name]
            }
        },
        //     1,2,3
        removeCache:function(item,name,data){
            if(!arguments.length) return;
            var cache = dom.buildCache(item),isDOM = !!item.nodeType;
            if(isDOM && dom.eventTypes.contains(name)){
                name = name + "-handlers-list";
            };
            if(arguments.length === 3){//     data 
                if(cache[name] instanceof dom.array && cache[name].length > 0){
                    //                ,                   uuid
                    //              uuid            uuid    
                    //           ,         remove     。
                    if(dom.isFunction(data)){
                        var uuid = (data+"").replace(/\s+/g,''),
                        fn = cache[name].one(function(fn){
                            return fn.uuid == uuid;
                        });
                        if(fn){
                            cache[name].remove(fn);
                        }
                    }else{
                        cache[name].remove(data);
                    }                  
                    if(cache[name].length === 0)
                        dom.removeCache(item,name);
                }else{
                    dom.removeCache(item,name);
                }
            }else if(arguments.length === 2){//    
                delete cache[name]
                if(!dom.isExtensible(cache)){
                    dom.removeCache(item);
                }
            }else {
                delete cache;
                if(isDOM){
                    dom.removeCache("uuid","uuid-set",item);
                    dom.removeAttr(item,"uuid");
                }
            }
        },
        clearCache:function(){
            var cache = dom.buildCache("uuid","uuid-set");
            if(!cache) return;//        
            cache.forEach(function(el){
                dom.removeAttr(el,"uuid");
            });
            dom.storage = null;
        }
    });

buildCacheはdomで使用する.storageにはネーミングスペースが開き、cacheはネーミングスペースに各種データを格納するために使用され、単一のデータ、1組のデータ、1組のデータはlistとsetの2種類に分けられ、要素が重複するかどうかを区別し、重複するlistはjQueryより重い.queue設定の配列.Windowsオブジェクトの処理について、jQueryは閉パッケージ内でwindowDataを作ったので、私はdomにいます.storageはdom-windowという空間を開いた.removeCacheはjQueryに相当する.removeDataとjQuery.unquereですが、入力パラメータの個数に応じて異なる機能を選択できる機能も強力です.clearCacheは、すべてのキャッシュを直接削除します.
IEでDOM要素にプライベート属性を設定するとメモリが漏洩し、ページunloadで手動で除去する必要があることに注意してください.各クラスライブラリもそうしましたdom.Cache(「uuid」,「uuid-set」,item)は、unload時にuuidが設定されているすべての要素を取り出し、uuidを削除するために使用されます.しかし実際にはclearCacheメソッドを呼び出せばよい.