JS設計模式-代理模式

代理模式的定義：爲其他對象提供一種代理以控制對這個對象的訪問。在某些情況下，一個對象不適合或者不能直接引用另一個對象，而代理對象可以在客戶端和目標對象之間起到中介的作用。


原文鏈接

虛擬代理

虛擬代理是把一些開銷很大的對象，延遲到真正需要它的時候纔去創建執行

圖片懶加載

//圖片加載
let imageEle = (function(){
    let node = document.createElement('img');
    document.body.appendChild(node);
    return {
        setSrc:function(src){
            node.src = src;
        }
    }
})();

//代理對象
let proxy = (function(){
    let img = new Image();
    img.onload = function(){
        imageEle.setSrc(this.src);
    };
    return {
        setSrc:function(src){
            img.src = src;
            imageEle.setSrc('loading.gif');
        }
    }
})();

proxy.setSrc('example.png');

合併http請求

如果有一個功能需要頻繁進行請求操作，這樣開銷比較大，可以通過一個代理函數收集一段時間內請求數據，一次性發出

//上傳請求
let upload = function(ids){
    $.ajax({
        data: {
            id:ids
        }
    })
}

//代理合並請求
let proxy = (function(){
    let cache = [],
        timer = null;
    return function(id){
        cache[cache.length] = id;
        if(timer) return false;
        timer = setTimeout(function(){
            upload(cache.join(','));
            clearTimeout(timer);
            timer = null;
            cache = [];
        },2000);
    }    
})();

// 綁定點擊事件
let checkbox = document.getElementsByTagName( "input" );
for(var i= 0, c; c = checkbox[i++];){
    c.onclick = function(){
        if(this.checked === true){
            proxy(this.id);
        }
    }
}

緩存代理

緩存代理可以作爲一些開銷大的運算結果提供暫時的存儲，下次運算時，如果傳遞進來的參數跟之前一致，則可以直接返回前面存儲的運算結果

//計算乘積
let mult = function(){
    let result = 1;
    for(let i = 0,len = arguments.length;i < len;i++){
        result*= arguments[i];
    }
    return result;
}

//緩存代理
let proxy = (function(){
    let cache = {};
    reutrn function(){
        let args = Array.prototype.join.call(arguments,',');
        if(args in cache){
            return cache[args];
        }
        return cache[args] = mult.apply(this,arguments);
    }
})();

優缺點

• 優點：代理模式能將代理對象與被調用對象分離，降低了系統的耦合度。代理模式在客戶端和目標對象之間起到一箇中介作用，這樣可以起到保護目標對象的作用。代理對象也可以對目標對象調用之前進行其他操作。
• 缺點：增加了系統的複雜度