js 設計模式——觀察者模式

觀察者模式

定義

觀察者模式（又被稱爲發佈-訂閱（Publish/Subscribe）模式，屬於行爲型模式的一種，它定義了一種一對多的依賴關係，讓多個觀察者對象同時監聽某一個主題對象。這個主題對象在狀態變化時，會通知全部的觀察者對象，使他們可以自動更新本身

注意（觀察者模式和發佈訂閱是有不一樣的）

區別

觀察者模式 在軟件設計中是一個對象，維護一個依賴列表，當任何狀態發生改變自動通知它們。

發佈-訂閱模式 消息的發送方，叫作發佈者（publishers），消息不會直接發送給特定的接收者，叫作訂閱者。

左邊至關於微信裏的微商-顧客之間的關係。右邊至關於商家-淘寶-顧客之間的關係

觀察者模式：顧客關注了微商的商品，微商會記住顧客關注的商品，一旦上新就直接 私聊 通知全部關注這個商品的顧客。這裏的顧客就至關於觀察者，這裏的微商就至關於主題

訂閱發佈模式：顧客經過淘寶（APP或者網站）關注了商家的商品，商家一旦上新就經過淘寶（APP或者網站）向關注了它的顧客 羣發 消息。這裏的顧客就是訂閱者，這裏的淘寶就是事件總線，這裏的商家就是發佈者

DOM事件

只要咱們曾經在DOM節點上面綁定過事件函數，那咱們就使用過觀察者模式，應爲JS和DOM之間就是實現了一種觀察者模式

document.body.addEventListener("click", function() {
    alert("Hello World")
}，false )
document.body.click() //模擬用戶點擊

自定義一個簡單的小例子

// 定義商家
let merchants = {}
// 定義預約列表
merchants.orderList = {}
// 將增長的預訂者添加到預約客戶列表中
merchants.listen = function(id, info) {
  if(!this.orderList[id]) {
    this.orderList[id] = []
  }
  this.orderList[id].push(info)
  console.log('預約成功')
}
//發佈消息
merchants.publish = function(id) {
  let infos = this.orderList[id]
  // 判斷是否有預訂信息
  if(!infos || infos.length === 0) {
    console.log('您尚未預訂信息!')
    return
  }
  // 若是有預訂信息，則循環打印
  infos.forEach((el, index) => {
    console.log('尊敬的客戶：')
    el.call(this, arguments)
    console.log('已經到貨了')
  })
}
merchants.remove = function(id, fn) {
  // 撤銷訂單 
  var infos = this.orderList[id]
  if(infos instanceof Array){
    infos.forEach((el, index) => {
      el === fn &&  this.orderList[id].splice(index, 1)
    })
  }
  console.log('撤銷成功')
}
// 定義一個預訂者customerA，並指定預約信息
let customerA = function() {
    console.log('黑色至尊版一臺')
}
let customerB = function() {
    console.log('白色至尊版一臺')
}
let customerC = function() {
    console.log('紅色至尊版一臺')
}
// customerA 預約手機，並留下預定電話
merchants.listen('15888888888', customerA) // 預約成功
merchants.listen('15888888888', customerB) // 預約成功
merchants.listen('15777777777', customerB) // 預約成功
merchants.listen('15777777777', customerC) // 預約成功
merchants.remove('15888888888', customerB) // 撤銷成功
// 商家發佈通知信息
merchants.publish('15888888888')
merchants.publish('15777777777')

預約成功
預約成功
預約成功
預約成功
撤銷成功
尊敬的客戶：
黑色至尊版一臺
已經到貨了
尊敬的客戶：
白色至尊版一臺
已經到貨了
尊敬的客戶：
紅色至尊版一臺
已經到貨了

優缺點

優勢：

• 時間上的解耦
• 對象之間的解耦

缺點：

• 建立訂閱者自己要消耗必定的時間和內存
• 當訂閱一個消息時，也許此消息並無發生，但這個訂閱者會始終存在內存中。
• 觀察者模式弱化了對象之間的聯繫，這本是好事情，但若是過分使用，對象與對象之間的聯繫也會被隱藏的很深，會致使項目的難以跟蹤維護和理解

對於觀察者模式還只是淺薄的認識，若有不對，還請大佬們指出，感謝(✿◕‿◕✿)

參考連接

JavaScript設計模式之觀察者模式

觀察者模式VS訂閱發佈模式