行為型：觀察者模式

風吹De麥浪發表於2023-03-29
模式

定義

觀察者模式屬於行為型模式，它定義了物件間的一種一對多的依賴關係，當一個物件的狀態發生改變時，所有依賴於它的物件都將得到通知，並自動更新。

一種一對多的關係中一稱為被觀察者也叫目標物件Subject而多則稱為觀察者物件Observer

觀察者模式中通常有兩個模型，一個觀察者（observer）和一個被觀察者（Observed）。從字面意思上理解，即被觀察者發生某些行為或者變化時，會通知觀察者，觀察者根據此行為或者變化做出處理。

特徵：

    1. 一個目標者物件 Subject，擁有方法：新增、刪除、通知 Observer；
    2. 多個觀察者物件 Observer，擁有方法：接收 Subject 狀態變更通知並處理；
    3. 目標物件 Subject 狀態變更時，通知所有 Observer。

生活中的例子

  如我們關注了某某訂閱號，當訂閱號有新的文章時，我們都收到了推文，這個就是最簡單的觀察者模式。

模擬觀察者模式

/*
定義：
觀察者模式是一種物件行為模式。
它定義物件間的一種一對多的依賴關係，當一個物件的狀態發生改變時，所有依賴於它的物件都得到通知並被自動更新。

js 沒有抽象類、介面 所以一般結構如下：
subject 目標 or 被觀察者：
  add: 把觀察者註冊進來
  remove: 移除觀察者
  notify: 遍歷註冊進來的觀察者，呼叫他們的update

Observer 觀察者：
  update: 自己提供的更新方法
*/

// 被觀者、目標
class Subject {
  constructor (data) {
    this.observers = []
    this.data = data
  }
  addObserver (data) {
    this.observers.push(data)
  }
  removeObserver (data) {
    this.observers = this.observers.filter(t => t !== data)
  }
  notify (...data) {
     this.observers.forEach(observer => observer.update(...data))
  }
  // 你的業務程式碼
  setData (data) {
    this.data= data;
    this.notify(data)
  }
}

// 觀察者
class Observer {
  constructor (name) {
    this.name = name
  }
  update (data) {
    console.log(`${this.name}, 我執行了，${data}發生了變化`)
  }
}

const sub = new Subject('我是被觀察')
const ob1 = new Observer('我是ob1')
const ob2 = new Observer('我是ob2')
const ob3 = new Observer('我是ob3')
sub.addObserver(ob1)
sub.addObserver(ob2)
sub.addObserver(ob3)
sub.notify('現在開始傳送第一個通知')
console.log('**************看看ob1 是不是沒有收到第二個通知**************')
sub.removeObserver(ob1)
sub.notify('現在開始傳送第二個通知')

 小結

  1. 觀察者模式用來解決物件之間存在一對多關係的互動行為
  2. 觀察者模式中，被觀察者與觀察者解藕沒有很徹底，且在被觀察者中觀察者要提供統一的更新方法，當然這也是要看具體的應用場景，在某些模組本身就是存在關聯，那用觀察者模式也沒問題。
  3. 釋出訂閱雖然與觀察者模式解決的問題的思路差不多，但是這兩個還是有區別的。  

相關文章