設計模式之代理模式

zr_hebo 發(fā)布于2019-08-21 17:45 / 2488人閱讀

摘要：要解決的問題代理模式主要解決的問題是將復雜的操作邏輯隱藏起來，讓方法的使用者只使用幾個固定的和類方法就可以簡單的實現(xiàn)一些功能。可以看出代理模式是將復雜的邏輯一步一步的封裝到每個類中，而且每個類都有自己唯一的職責。

要解決的問題

代理模式主要解決的問題是將復雜的操作邏輯隱藏起來，讓方法的使用者只使用幾個固定的set和get類方法就可以簡單的實現(xiàn)一些功能。而且代碼還不失擴展性和維護性。

能解決的常見問題

圖片預加載

一般網(wǎng)頁上顯示圖片如果直接img標簽中寫上src，在用戶訪問網(wǎng)頁時可能因為網(wǎng)速的原因，會顯示一大片空白的區(qū)域，這樣容易引起不明真相的用戶的困惑。所以目前一般的網(wǎng)站都會有圖片預加載機制，也就是在真正的圖片在被加載完成之前用一張菊花圖（轉圈的gif圖片）表示正在加載圖片。


    這是一張圖片標題

TS代碼

/* 生成一張圖片 */
class myImg{
    imgNode = document.createElement("img");
    constructor(where:HTMLElement){
        this.appendTo(where);
    };
    private appendTo(where:any){
        where.appendChild(this.imgNode);
    }
    setSrc( src:string ){
        this.imgNode.src = src;
    }
}
/* 封裝一個類嗲用前一個類，等待網(wǎng)絡圖片加載完成之前先設置一張loading菊花圖，加載完成后將圖片換成該顯示的圖片 */
class PreloadImg extends myImg{
    img = new Image;
    constructor( where: HTMLElement){
        super(where);
    }
    setSrc(src:string){
        super.setSrc("loading.gif")
        this.img.src = src;
        this.img.onload = ()=>{
            super.setSrc(src);
        }
    }
}

/*循環(huán)調用前一個類，插入圖片的顯示列表*/
class LoadImgList extends PreloadImg{
    constructor(list:string[],place:HTMLElement){
        super(place);
        list.map((item)=>{
            super.setSrc(item);            
        })
    }
}

/*  Test  */
let place = document.getElementsByTagName("div")[0];
let list = [
    "圖片鏈接1",
    "圖片鏈接2",
    "圖片鏈接3",
];
new LoadImgList(list,place); //插入顯示圖片列表

可以看出上面的代碼實現(xiàn)的兩層的代理，符合單一職責的原則
1.myImg類的作用是在指定的位置插入一張圖片，并有setSrc的方法用來為圖片設置路徑。
2.PreloadImg類繼承了myImg，作用是用來在加載圖片的過程中先顯示一張占位的loading菊花圖，而在圖片加載完畢后將占位菊花圖換成加載下來的圖片。
3.LoadImgList類繼承了PreloadImg類，作用是用來將圖片隊數(shù)組中的圖片鏈接自動的加載到圖片要插入的地方。
4.可以看出代理模式是將復雜的邏輯一步一步的封裝到每個類中，而且每個類都有自己唯一的職責。而用戶只要使用最后的LoadImgList類不用理會背后的邏輯就可以使用圖片預加載功能。同時代碼也具有可擴展性和相對好的可維護性。

緩存計算結果

/* 用到了 單例模式 和 代理模式：用代理模式實現(xiàn)單例模式實現(xiàn)計算的緩存*/

/*負責計算相乘的結果*/
class Mult{
    protected getResult(...args){
        console.log("開始計算");
        return args.reduce((x,y)=>{
            return x*y;
        });
    }
}

/*代理Mult類，緩存計算的內容*/
class CacheMult extends Mult{
    cache:object = {};
    constructor(){
        super();
    }
    getResult(...args){
        let sorted_args = args.sort((n1,n2)=>n1-n2);
        let key = sorted_args.join(",")
        if ( key in this.cache ){  //如果結果已經(jīng)計算過了，就返回緩存過的結果
            return this.cache[key];
        }else{
            let result = super.getResult(...args);  //調用父類得到計算結果
            this.cache[ key ] = result; //緩存結果到緩存中
            return result;
        }
    }
}

let mult = new CacheMult();
let r1 = mult.getResult(1,2,3,4);
let r2 = mult.getResult(1,2,3,4);
let r3 = mult.getResult(1,2,3);
console.log(r1);
console.log(r2);
console.log(r3);
/* 運行結果 */
// 開始計算
// 開始計算
// 24
// 24
// 6

從上面的代碼中可以看出，CacheMult類代理了Mult類來事項緩存計算結果的功能，防止出現(xiàn)重復計算，這樣可以再某一些計算密集型的場景下有效的節(jié)省計算資源，提高代碼的性能。

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

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

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

PHP設計模式之代理模式

摘要：虛擬代理如果需要創(chuàng)建一個資源消耗較大的對象，先創(chuàng)建一個消耗相對較小的對象來表示，真實對象只在需要時才會被真正創(chuàng)建。虛擬代理通過使用一個小對象來代表一個大對象，可以減少系統(tǒng)資源的消耗，對系統(tǒng)進行優(yōu)化并提高運行速度。概念代理模式(Proxy Pattern) ：一種對象結構型模式。給某一個對象提供一個代理，并由代理對象控制對原對象的引用。 UML showImg(https://seg...

zhisheng 2019-06-27 14:52 評論0 收藏0
設計模式之代理模式

摘要：代理模式的定義來源于百度百科為其他對象提供一種代理以控制對這個對象的訪問。二來源大話設計模式三例子實現(xiàn)現(xiàn)在根據(jù)上面購票代理的場景來實現(xiàn)例子接口，定義真實火車站，還有代理提供的服務。一、定義? ? ? ?在網(wǎng)絡不發(fā)達之前，我們買火車票，通常都需要跑到火車站去買。這對于我們來說可能有些麻煩，偶然有一天，你發(fā)現(xiàn)你樓下有一家便利店居然能買火車票，這就方便很多。其實啊，便利店并不提供火車服務，也沒有權...

enda 2019-05-27 17:41 評論0 收藏0
Spring框架之我見（二）——代理模式

摘要：聊完了工廠模式，下面我們來說框架中的另一個核心設計模式代理模式。這里的外賣小哥就相當于是我們的代理。主要分為代理和代理。聊完了工廠模式，下面我們來說Spring框架中的另一個核心設計模式——代理模式（Proxy Pattern）。代理模式大家可以先不用看概念，先舉個吃飯的例子：比如說我們想吃飯，我們可以選擇自己做飯吃、去飯店吃、叫外賣吃。如果我們選擇自己做著吃，我們就需要去買菜、...

oneasp 2019-08-15 13:35 評論0 收藏0
設計模式之代理模式

摘要：虛擬代理虛擬代理把一些開銷很大的對象，延遲到真正需要它的時候才去創(chuàng)建。主要參考設計模式與開發(fā)實踐設計模式在面向對象軟件設計過程中針對特定問題的簡潔而優(yōu)雅的解決方案。這是在《設計模式》一書中對設計模式的定義。在軟件開發(fā)過程中，我們可能會遇到過這樣的情況，我們現(xiàn)在發(fā)現(xiàn)一個問題，和以前的某個問題很相似，幾乎可以用統(tǒng)一套解決方案，而且我們還發(fā)現(xiàn)，在某個條件下，這個解決方案幾乎就是通用的，...

Gilbertat 2019-08-19 18:10 評論0 收藏0
Javascript設計模式之——代理模式

摘要：最近在讀設計模式與開發(fā)實踐，在這里把文中的各種設計模式寫出來，以便加深記憶，也可以分享給初學者。經(jīng)紀人可以全權代表明星和客戶談判，最后把談判結果給明星，明星決定簽約與否。這也違反了面向對象設計原則中的單一職責原則。最近在讀《javascript設計模式與開發(fā)實踐》，在這里把文中的各種設計模式寫出來，以便加深記憶，也可以分享給初學者。如果你不了解設計模式，那么強烈推薦你閱讀一下這本書，...

cuieney 2019-08-20 17:07 評論0 收藏0
JS設計模式之代理模式

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

widuu 2019-08-22 11:04 評論0 收藏0