JavaScript 設計模式-代理模式

阿新 • • 發佈：2020-10-27

代理模式

代理模式給某一個物件提供一個代理物件，並由代理物件控制對原物件的引用。通俗的來講代理模式就是我們生活中常見的中介。

# 實現方法
定義一個委託者和一個代理，需要委託的事情在代理中完成
使用場景: 在某些情況下，一個客戶類不想或者不能直接引用一個委託物件，
而代理類物件可以在客戶類和委託物件之間起到中介的作用。代理可以幫客戶過濾掉一些請求並且把一些開銷大的物件，
延遲到真正需要它時才建立。中介購車、代購、課代表替老師收作業

class Letter {
  constructor(name) {
    this.name = name
  }
}

// 暗戀人-小明
let XiaoMing = {
  name: '小明',
  sendLetter(proxy) {
    proxy.receiveLetter(this.name)
  }
}

// 代理人-小華
let XiaoHua = {
  receiveLetter(customer) {
    XiaoHong.listenWhenGlad(() => {
      // 當小紅心情好時才送情書, 也在送情書時建立情書
      XiaoHong.receiveLetter(new Letter(customer + '的情書'))
    })
  }
}

// 女神-小紅
let XiaoHong = {
  name: '小紅',
  receiveLetter(letter) {
    console.info(`${this.name}收到${letter.name}`)
  },
  listenWhenGlad(fn) {
    setTimeout(() => {
      fn()
    }, 1000);
  }
}

// 委託人傳送情書給代理
XiaoMing.sendLetter(XiaoHua)

# 過程分析
 * 小明發送情書給代理(小華) 並附屬上自己的名字(這件事就小明就等通知了,可以去做其他的事了)
 * 代理(小華)收到情書
 * 開始等心情好的時候(乾的就是中介的活)(心情好可以理解為是個非同步呼叫,不知道什麼時候心情好.女人啊)
 * 終於等到了小紅心情好的時候,然後傳送情書，並且告訴小紅告訴自己(中介)收到信後的反應
 * 然後執行小紅收到信後的回撥函式

Proxy

Proxy 是 ES6 提供的專門以代理角色出現的代理器,Vue 3.0 的響應式資料部分棄用了 Object.defineProperty，使用 Proxy 來代替它。

var proxy = new Proxy(target, handler);

Proxy-使用場景

-為了保護不及格的同學，課代表拿到全班成績單後只會公示及格人的成績。對考分有疑問的考生，複議後新分數比以前大10分才有權利去更新成績

const scoreList = {
  'wang': 90,
  'li': 60,
  'zhang': 100
}

const scoreProxy = new Proxy(scoreList, {
  get: function (scoreList, name) {
    if (scoreList[name] > 69) {
      console.info('輸出成績')
      console.info(scoreList[name])
    } else {
      console.info('不及格的成績無法公示.')
    }
  },
  set: function (scoreList, name, newVal) {
    if (newVal - scoreList[name] > 10) { // 修改後分差不到10分的不能進行修改
      console.info(`${scoreList[name]}=>${newVal}`)
      scoreList[name] = newVal
    } else {
      console.info('無法修改成績')
    }
  }
})

// get
console.info(' ------------- 測試 proxy -get  -------------')
scoreProxy['wang']
scoreProxy['li']

console.info(' ------------- 測試 proxy -set ------------- ')
// set
scoreProxy['li'] = 99
scoreProxy['li']