Javascript設計模式之——代理模式

最近在讀《javascript設計模式與開發實踐》，在這裏把文中的各類設計模式寫出來，以便加深記憶，也能夠分享給初學者。若是你不瞭解設計模式，那麼強烈推薦你閱讀一下這本書，相信它能夠顛覆你的編程思惟，助你打通任督二脈。

假設有對象A和對象B,代理模式至關於對象C，對對象A進行封裝，對象B只須要與對象C進行交流。對象C就是一個替身。簡而言之就是用一個對象表明另一個對象，對應現實生活中的場景就是明星王寶強和經紀人宋喆之間的關係。經紀人能夠全權表明明星和客戶談判，最後把談判結果給明星，明星決定簽約與否。

代理模式能夠用在圖片延遲加載，延遲加載的原理是：先用loading圖片替代圖片的真實src，建立一個img元素(代理)加載圖片的真實src。加載完以後，圖片的src替換掉loading。下面就看看代碼怎麼實現：

myImage = (function(){
    var img = document.createElement("img");
    document.body.appendChild(img);
    return {
        setSrc:function(src){
            img.src = src;
        }
    }
})()
proxyImage = (function(){
    var img = new Image;
    img.onload = function(){
        myImage .setSrc(this.src)
    }
    return {
        setSrc:function(src){
            myImage.setSrc("load.gif");
            img.src = src;
        }
    }
})()
proxyImage.setSrc('http://test.jpg');

代理的意義

也許你會以爲一個小小的延遲加載何須要用到設計模式？不用代理模式的確也能夠作到。那麼引入代理模式有什麼好處呢？下面咱們拋開代理模式，用經常使用的方式實現圖片延遲加載：

myImage = (function(){
    var img = document.createElement("img");
    document.body.appendChild(img);
    var imgNode = new Image;
    imgNode.onload = function(){
        img.setSrc(this.src)
    }
    return {
        setSrc:function(src){
            img.setSrc("load.gif");
            imgNode.src = src;
        }
    }
})()
myImage.setSrc('http://test.jpg');

上面的myImage除了負責加載圖片之外，還負責延遲加載。未來網速愈來愈快，若是有一天不須要延遲加載，那麼就須要修改myImage函數。這也違反了面向對象設計原則中的——單一職責原則。單一職責原則要求對象只有一個職責(功能)，引發對象變化的緣由也只能有一個，若是對象有多個職責，那麼這個對象會變得很是大，引發對象變化的緣由有多個。單一職責也是爲了程序低耦合高內聚。

反觀代理模式，myImage只負責加載圖片，proxyImage只負責延遲加載，若是之後不須要延遲加載只須要修改調用方式便可。