觀察者模式

定義

觀察者模式（又被稱為發布-訂閱（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訂閱發布模式

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