JS設計模式-代理模式

馬龍駒發布于2019-08-21 16:54 / 2782人閱讀

摘要：代理模式的定義為其他對象提供一種代理以控制對這個對象的訪問。代理模式在客戶端和目標對象之間起到一個中介作用，這樣可以起到保護目標對象的作用。代理對象也可以對目標對象調用之前進行其他操作。

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

原文鏈接

虛擬代理

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

圖片懶加載

//圖片加載
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);
    }
})();

優缺點

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

缺點：增加了系統的復雜度

云服務器 GPU云服務器代理模式 Java設計模式之（五）——代理模式靜態代理模式 java代理模式用處

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/88893.html

js設計模式 --- 代理設計模式

摘要：代理設計模式代理模式為其他對象提供一種代理以控制對這個對象的訪問。代理模式是常見的設計模式之一是指不直接調用實際的對象，而是通過代理對象，來間接的調用實際的對象。對象類定義了代理對象所代表的目標對象。代理設計模式代理模式：為其他對象提供一種代理以控制對這個對象的訪問。代理模式是常見的設計模式之一,是指不直接調用實際的對象，而是通過代理對象，來間接的調用實際的對象。為什么要采用這種間...

Tonny 2019-08-26 11:46 評論0 收藏0
JS代理模式《JavaScript設計模式與開發實踐》閱讀筆記

摘要：保護代理和虛擬代理保護代理當有許多需求要向某對象發出一些請求時，可以設置保護代理，通過一些條件判斷對請求進行過濾。虛擬代理在程序中可以能有一些代價昂貴的操作。而虛擬代理是最常用的一種代理模式。代理模式代理模式是為一個對象提供一個代用品或占位符，以便控制對它的訪問。保護代理和虛擬代理保護代理：當有許多需求要向某對象發出一些請求時，可以設置保護代理，通過一些條件判斷對請求進行過濾。...

mist14 2019-08-22 17:57 評論0 收藏0
JS設計模式之代理模式

摘要：什么是代理模式代理模式，類似于明星的經紀人，想要拜訪明星，需要先通過經紀人的溝通。不同于裝飾器，那種動態加載一個對象，可以說在代理模式當中，代理是早已既定的。又稱單一功能原則，面向對象五個基本原則之一。什么是代理模式代理模式，類似于明星的經紀人，想要拜訪明星，需要先通過經紀人的溝通。而在JS當中，如果想訪問一個類，需要通過另一個類來間接訪問。不同于裝飾器，那種動態加載一個對象，可...

widuu 2019-08-22 11:04 評論0 收藏0
每天一個設計模式·代理模式

摘要：代理模式原文地址更多設計模式系列教程更多免費教程博主按每天一個設計模式旨在初步領會設計模式的精髓，目前采用靠這吃飯和純粹喜歡兩種語言實現。代理模式優缺點代理模式有高度解耦對象保護易修改等優點。代理模式·原文地址更多《設計模式系列教程》更多免費教程博主按：《每天一個設計模式》旨在初步領會設計模式的精髓，目前采用javascript（_靠這吃飯_）和python（_純粹喜歡_）...

XiNGRZ 2019-08-23 13:42 評論0 收藏0
每天一個設計模式·代理模式

摘要：代理模式原文地址更多設計模式系列教程更多免費教程博主按每天一個設計模式旨在初步領會設計模式的精髓，目前采用靠這吃飯和純粹喜歡兩種語言實現。代理模式優缺點代理模式有高度解耦對象保護易修改等優點。代理模式·原文地址更多《設計模式系列教程》更多免費教程博主按：《每天一個設計模式》旨在初步領會設計模式的精髓，目前采用javascript（_靠這吃飯_）和python（_純粹喜歡_）...

MasonEast 2019-07-30 18:34 評論0 收藏0