js設計模式：什麼是代理模式 ？ js代理模式的介紹

本篇文章帶給大家的內容是關於js設計模式：什麼是代理模式 ？ js代理模式的介紹，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

什麼是代理模式？

情境：小明追女生A

• 非代理模式：小明=花=> 女生A

• 代理模式：小明=花=> 讓女生A的好友B幫忙=花=> 女生A

#定義：為其他對象提供一種代理以控制對這個對象的訪問。

主要解決：直接存取物件時帶來的問題，比如說：要存取的物件在遠端的機器上。在物件導向系統中，有些物件因為某些原因（例如物件建立開銷很大，或是某些操作需要安全控制，或需要進程外的存取），直接存取會為使用者或系統結構帶來很多麻煩，我們可以在存取此物件時加上一個對此物件的存取層。

何時使用：想在存取一個物件時做一些控制。

如何解決：增加中間層。

應用程式實例： 1、Windows 裡面的捷徑。 2、豬八戒去找高翠蘭結果是孫悟空變的，可以這樣理解：把高翠蘭的外貌抽像出來，高翠蘭本人和孫悟空都實現了這個接口，豬八戒訪問高翠蘭的時候看不出來這個是孫悟空，所以說孫悟空是高翠蘭代理類。 3.買火車票不一定在火車站買，也可以去代售點。 4.一張支票或銀行存單是帳戶中資金的代理。支票在市場交易中用來代替現金，並提供對簽發人帳號上資金的控制。 5、spring aop。

優點： 1、職責清晰。 2、高擴展性。 3、智能化。

缺點： 1、由於在客戶端和真實主體之間增加了代理對象，因此有些類型的代理模式可能會造成請求的處理速度變慢。 2.實作代理模式需要額外的工作，有些代理模式的實作非常複雜。

使用場景：按職責來劃分，通常有以下使用場景： 1、遠端代理。 2、虛擬代理。 3、Copy-on-Write 代理。 4、保護（Protect or Access）代理程式。 5.Cache代理。 6、防火牆（Firewall）代理。 7.同步化（Synchronization）代理程式。 8.智能引用（Smart Reference）代理。

注意事項： 1、和適配器模式的差異：適配器模式主要改變所考慮物件的接口，而代理模式不能改變所代理類別的介面。 2、和裝飾器模式的區別：裝飾器模式為了增強功能，而代理模式是為了加以控制。

代理模式的種類很多，在 JS 中最常用的為虛擬代理和快取代理。

虛擬代理實現圖片預先加載

下面這段程式碼運用代理模式來實現圖片預加載，可以看到透過代理模式巧妙地將創建圖片與預加載邏輯分離，並且在未來如果不需要預先載入，只要改成請求本體取代請求代理物件就行。

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

const proxyImage = (function() {
  const img = new Image()
  img.onload = function() { // http 图片加载完毕后才会执行
    myImage.setSrc(this.src)
  }
  return {
    setSrc: function(src) {
      myImage.setSrc('loading.jpg') // 本地 loading 图片
      img.src = src
    }
  }
})()

proxyImage.setSrc('http://loaded.jpg')

快取代理實現乘積計算

const mult = function() {
  let a = 1
  for (let i = 0, l; l = arguments[i++];) {
    a = a * l
  }
  return a
}

const proxyMult = (function() {
  const cache = {}
  return function() {
    const tag = Array.prototype.join.call(arguments, ',')
    if (cache[tag]) {
      return cache[tag]
    }
    cache[tag] = mult.apply(this, arguments)
    return cache[tag]
  }
})()

proxyMult(1, 2, 3, 4) // 24

建議：在開發時候不要先去猜測是否需要使用代理模式，如果發現直接使用某個物件不方便時，再來優化不遲。

相關推薦：

js設計模式：什麼是策略模式？ js策略模式的介紹

js設計模式：什麼是單例模式？ js單例模式的介紹

以上是js設計模式：什麼是代理模式 ？ js代理模式的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章！