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

cuieney 發布于2019-08-20 17:07 / 957人閱讀

摘要：最近在讀設計模式與開發實踐，在這里把文中的各種設計模式寫出來，以便加深記憶，也可以分享給初學者。經紀人可以全權代表明星和客戶談判，最后把談判結果給明星，明星決定簽約與否。這也違反了面向對象設計原則中的單一職責原則。

最近在讀《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只負責延遲加載，如果以后不需要延遲加載只需要修改調用方式即可。

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

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

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

100行代碼讓您學會JavaScript原生的Proxy設計模式

摘要：面向對象設計里的設計模式之代理模式，相信很多朋友已經很熟悉了。代表當前執行方法的實例，即方法調用者。代表具體的方法名稱。現在我們再次調用，傳入構造器返回的代理對象打印輸出，代理邏輯生效了和的一樣優雅地實現了代理設計模式。 showImg(https://segmentfault.com/img/remote/1460000016760603);面向對象設計里的設計模式之Proxy（代理...

txgcwm 2019-08-23 12:28 評論0 收藏0
javascript設計模式學習筆記之代理模式

摘要：代理模式代理模式是為一個對象提供一個代用品或者占位符以便控制對它的訪問引入代理模式，其實是為了實現單一職責的面向對象設計原則。代理模式代理模式是為一個對象提供一個代用品或者占位符, 以便控制對它的訪問引入代理模式，其實是為了實現單一職責的面向對象設計原則。虛擬代理將一些開銷很大的對象, 延遲到正真需要的時候執行 // 針對大圖增加loading圖 ...

big_cat 2019-08-26 13:39 評論0 收藏0
javascript之代理模式

支持原作者，購買地址鏈接描述概念代理模式代理模式(Proxy),為其他對象提供一種代理以控制對這個對象的訪問。在現實生活中，可以找到很多代理模式使用的場景。明星都有經紀人作為代理。如果請明星來演出，就要先同他的經紀人溝通，談好相應的細節與報酬。再交給明星。需求：公司(Company)通過經紀人(agent)找明星(start)開演唱會 //演唱會 var Concert = ...

MAX_zuo 2019-08-22 10:42 評論0 收藏0
細談JavaScript中的一些設計模式

摘要：注意事項聲明函數時候處理業務邏輯區分和單例的區別，配合單例實現初始化構造函數大寫字母開頭推薦注意的成本。簡單工廠模式使用一個類通常為單體來生成實例。 @(書籍閱讀)[JavaScript, 設計模式] 常見設計模式一直對設計模式不太懂，花了一下午加一晚上的時間，好好的看了看各種設計模式，并總結了一下。設計模式簡介設計模式概念解讀設計模式的發展與在JavaScript中的應用 ...

30e8336b8229 2019-08-19 17:47 評論0 收藏0
JavaScript設計模式之結構型設計模式

摘要：享元模式通過分析應用程序的對象，將其解析為內在數據和外在數據，減少對象數量，從而提高程序的性能。通過這種方式進行事件綁定，可以減少事件處理程序的數量，這種方式叫做事件委托，也是運用了享元模式的原理。事件處理程序是公用的內在部分，每個菜單項各 github 全文地址： YOU-SHOULD-KNOW-JS JavaScript設計模式之外觀模式概念外觀模式：為一組復雜子系統接口提...

xiaoqibTn 2019-08-21 18:24 評論0 收藏0