Javascript設計模式（五）代理模式

Riddler 發布于2019-08-26 12:23 / 1451人閱讀

摘要：使用者無權訪問目標對象，通過代理做授權和控制代理模式是一種非常有意義的模式。如果一個對象承擔了多項職責，那么引起變化的原因可能就有多個。

使用者無權訪問目標對象，通過代理做授權和控制

代理模式是一種非常有意義的模式。在生活中也能找到代理模式的情景，比如，明星都有經紀人作為代理，如果想請明星來辦一場商業演出，只能聯系他的經紀人，經紀人會把商業演出的細節和報酬都談好之后，再將合同交給明星簽。

代理實現圖片懶加載

在前端開發中，圖片懶加載是一項非常實用的技術。為了性能優化，我們常常在圖片加載之前用一張圖片占位，等圖片加載完成之后再將圖片填充到src上，這種場景就很容易實用代理模式。

var myImage = (function() {
    var imgNode = document.createElement("img")
    document.body.appendChild(imgNode)
    return {
        setSrc: function(src) {
            imgNode.src = src
        }
    }
})()

var proxyImage = (function(){
    var img = new Image()
    img.onload = function() {
        myImage.setSrc(img.src)
    }
    return {
        setSrc: function(src) {
            myImage.setSrc("./loading.gif")
            img.src = src
        }
    }
})()

proxyImage.setSrc("https://user-gold-cdn.xitu.io/2016/11/29/805fd2776ae656464329c04f63181266?imageView2/1/w/180/h/180/q/85/format/webp/interlace/1")

通過proxyImage間接訪問MyImage。proxyImage控制來客戶對MyImage的訪問，并且在此過程中加入一些額外的操作，比如在圖片加載前，先將src設置為本地的loading圖。

緩存代理

緩存代理可以為一些開銷較大的運算結果暫時的存儲，在下次運算時，如果傳遞的值一致，則可以直接返回前面存儲的結果。

// 創建一個乘積函數
var mult = function() {
    console.log("開始計算乘積")
    var a = 1
    for(var i = 0, l = arguments.length; i
當第二次調用proxyMult的時候，本體mult并沒有直接計算，proxyMult直接返回之前的結果
引入代理的意義
為了說明代理的意義，下面引入一個面向對象的設計原則：單一職責原則

一個類（對象或者函數）而言，應該只能有一個引起它變化的原因。如果一個對象承擔了多項職責，那么引起變化的原因可能就有多個。
實際上增加懶加載圖片只是一個景上添花的行為。縱觀整個程序，我們并沒有改變myImage的接口，但是通過代理，給接口添加了新的行為，如果某天不需要了，也不用修改本體。

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

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

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

從ES6重新認識JavaScript設計模式(五): 代理模式和Proxy

摘要：此時，鏈家起到的作用就是代理的作用。驗證代理構造函數第二個參數中的方法，可以很方便的驗證向一個對象的傳值。 1 什么是代理模式 showImg(https://segmentfault.com/img/remote/1460000015800706?w=1262&h=464); 為其他對象提供一種代理以控制對這個對象的訪問。在某些情況下，一個對象不適合或者不能直接引用另一個對象，而代理...

verano 2019-08-23 10:27 評論0 收藏0
JavaScript設計模式系列五：適配器模式

摘要：什么是適配器模式所謂適配器模式就是用一個新的接口對現有的接口進行包裝，處理類與的不匹配。對象適配器可以適配它的父對象接口方法或屬性。裝飾者模式增強了對象的功能而同時又不改變它的接口，因此它對程序的透明度比適配器要好。什么是適配器模式所謂適配器模式就是用一個新的接口對現有的接口進行包裝，處理類與API的不匹配。使用這種模式的對象又叫作包裝器。比如我們有一個接口： function...

banana_pi 2019-08-26 11:44 評論0 收藏0
Java設計模式之（五）——代理模式

摘要：什么是代理模式什么是代理模式為其他對象提供一種代理以控制對這個對象的訪問。另外一種方式是動態代理。代理模式應用場景代理模式應用場景業務系統的非功能性需求開發這是最常用的一個場景。1、什么是代理模式 Provide a surrogate or placeholder for another object to control access to it. Proxy Pat...

李文鵬 2021-11-22 12:05 評論0 收藏0
Nginx 配置 https相關問題

摘要：證書生成完畢后，可以在中找到四配置當用訪問時重定向至重啟服務，即可使用訪問該網站五其他自動更新證書證書只有天的有效期，所以在證書到期之前，我們需要重新獲取這些證書，可以使用這個命令。一、Nginx基礎 1.概念： Nginx是一款輕量級的Web服務器、反向代理服務器及電子郵件（IMAP/POP3）代理服務器。正向代理服務器：一般作用在客戶端，位于客戶端和服務器之間，客戶端發送請...

nifhlheimr 2019-07-25 14:05 評論0 收藏0
JavaScript MVC 學習筆記（五）事件操作的拓展

摘要：事件類型布爾值，表示事件是否通過以冒泡形式觸發。表示鍵盤事件的屬性布爾值，表示當前按下的鍵是否表示一個字符。表示當前按鍵的值僅對事件有效。，事件發生時相對于屏幕的坐標。事件對象 event 對象還包含很多有用的屬性。W3C 范中包含的大部分屬性都列在下面，更多信息參照完整的標準規范。事件類型： bubbles ：布爾值，表示事件是否通過DOM 以冒泡形式觸發。事件發生時...

Anshiii 2019-08-22 10:56 評論0 收藏0