JS代理模式《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》閱讀筆記

mist14 發(fā)布于2019-08-22 17:57 / 3182人閱讀

摘要：保護(hù)代理和虛擬代理保護(hù)代理當(dāng)有許多需求要向某對(duì)象發(fā)出一些請(qǐng)求時(shí)，可以設(shè)置保護(hù)代理，通過一些條件判斷對(duì)請(qǐng)求進(jìn)行過濾。虛擬代理在程序中可以能有一些代價(jià)昂貴的操作。而虛擬代理是最常用的一種代理模式。

代理模式

代理模式是為一個(gè)對(duì)象提供一個(gè)代用品或占位符，以便控制對(duì)它的訪問。

保護(hù)代理和虛擬代理

保護(hù)代理：當(dāng)有許多需求要向某對(duì)象發(fā)出一些請(qǐng)求時(shí)，可以設(shè)置保護(hù)代理，通過一些條件判斷對(duì)請(qǐng)求進(jìn)行過濾。

虛擬代理：在程序中可以能有一些代價(jià)昂貴的操作。此時(shí)可以設(shè)置虛擬代理去代為執(zhí)行，這里的虛擬代理便會(huì)在適合的時(shí)候（需要用到的時(shí)候）才去執(zhí)行。

保護(hù)代理用于控制不同權(quán)限的對(duì)象對(duì)目標(biāo)對(duì)象的訪問，但在JavaScript并不容易實(shí)現(xiàn)保護(hù)代理，因?yàn)槲覀儫o法判斷誰訪問了某個(gè)對(duì)象。而虛擬代理是最常用的一種代理模式。

虛擬代理實(shí)現(xiàn)圖片預(yù)加載

預(yù)加載圖片在Web開發(fā)中十分常用，其通過異步的方式加載圖片，利用一張loading圖片占位。等圖片加載好之后把圖片填充到img節(jié)點(diǎn)中。

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(this.src)
  }
  return {
    setSrc: function(src){ 
      myImage.setSrc("loading.gif")
      img.src = src
    }
  }
})()

proxyImage.setSrc("realImage.jpg")

通過proxyImage間接的訪問了MyImage。proxyImage控制了客戶對(duì)MyImage的訪問，并且在此過程中加入了一些額外的操作，比如在真正的圖片加載好之前，先把img節(jié)點(diǎn)的src設(shè)置為一張loading圖片。

代理的意義

面向?qū)ο笤O(shè)計(jì)原則——單一職責(zé)原則。單一職責(zé)原則指的是，就一個(gè)類（通常也包括對(duì)象和函數(shù)等）而言，應(yīng)該僅有一個(gè)引起它變化的原因。如果一個(gè)對(duì)象承擔(dān)了多項(xiàng)職責(zé)，就意味著這個(gè)對(duì)象將變得巨大，引起它變化的原因會(huì)有多個(gè)。面向?qū)ο笤O(shè)計(jì)鼓勵(lì)將行為分布到細(xì)粒度的對(duì)象之中，如果一個(gè)對(duì)象承擔(dān)的職責(zé)過多，等于把這些職責(zé)耦合到了一起，這種耦合會(huì)導(dǎo)致脆弱和低內(nèi)聚的設(shè)計(jì)，帶變化發(fā)生時(shí)，設(shè)計(jì)可能會(huì)遭到意外的破壞。

虛擬代理例子中，代理模式給系統(tǒng)添加了額外的功能，預(yù)加載圖片。而我們實(shí)際需要的只是MyImage的setImage方法。預(yù)加載只是一個(gè)錦上添花的功能。通過代理模式使得這兩個(gè)功能獨(dú)立開來，遵循了開放-封閉原則。

緩存代理

緩存代理可以為一些開銷大的運(yùn)算結(jié)果提供暫時(shí)的存儲(chǔ)，在下次運(yùn)算時(shí)，如果傳遞進(jìn)來的參數(shù)跟之前一致，則可以直接返回前面存儲(chǔ)的運(yùn)算結(jié)果。

乘積運(yùn)算的例子

/*******計(jì)算乘積******/
var mult = function(){
  console.log("開始計(jì)算乘積")
  var a = 1 
  for (var i = 0,l = arguments.length;i
最后
雖然代理模式非常有用，但我們?cè)诰帉憳I(yè)務(wù)代碼的時(shí)候，往往不需要去預(yù)先猜測(cè)是否需要使用代理模式。當(dāng)真正發(fā)現(xiàn)不方便直接訪問某個(gè)對(duì)象的時(shí)候，再編寫代理不遲。
代理模式是一種很實(shí)用的設(shè)計(jì)模式，很好的詮釋了面向?qū)ο笾械膯我宦氊?zé)原則和開放-封閉原則。在實(shí)際開發(fā)的時(shí)候往往會(huì)迫于進(jìn)度壓力或者實(shí)現(xiàn)了再說的態(tài)度忽略了一些必要的代碼的可維護(hù)性，我覺得在一些簡(jiǎn)單的地方去試著遵循一些設(shè)計(jì)理念是對(duì)自己代碼能力的提升。當(dāng)然不要為了設(shè)計(jì)而設(shè)計(jì)啦。
Done is better then Perfect
參考
《JavaScript設(shè)計(jì)模式與開發(fā)實(shí)踐》—— 曾探