前端設計模式——觀察者模式

前端中的觀察者模式（Observer Pattern），定義了對象之間的一種一對多的依賴關係，使得當一個對象狀態發生改變時，所有依賴於它的對象都能夠得到通知並自動更新。

在前端開發中，觀察者模式常被用來實現組件間的數據傳遞和事件處理。比如，當一個組件的狀態發生改變時，可以通過觀察者模式來通知其他組件更新自身的狀態或視圖。

在觀察者模式中，通常會定義兩種角色：

1. Subject（主題）：它是被觀察的對象，當其狀態發生改變時會通知所有的觀察者。
1. Observer（觀察者）：它是觀察主題的對象，當主題狀態發生改變時會接收到通知併進行相應的處理。

以下是一個簡單的實現示例：

class Subject {
  constructor() {
    this.observers = []
  }
  
  addObserver(observer) {
    this.observers.push(observer)
  }
  
  removeObserver(observer) {
    this.observers = this.observers.filter(obs => obs !== observer)
  }
  
  notify(data) {
    this.observers.forEach(obs => obs.update(data))
  }
}

class Observer {
  update(data) {
    console.log(`Received data: ${data}`)
  }
}

// Usage
const subject = new Subject()
const observer1 = new Observer()
const observer2 = new Observer()

subject.addObserver(observer1)
subject.addObserver(observer2)

subject.notify('Hello, world!')
// Output:
// Received data: Hello, world!
// Received data: Hello, world!

subject.removeObserver(observer1)

subject.notify('Goodbye, world!')
// Output:
// Received data: Goodbye, world!

在上面的示例中，我們定義了一個 Subject 類和一個 Observer 類。Subject 類有三個方法，addObserver 用於添加觀察者，removeObserver 用於移除觀察者，notify 用於通知所有觀察者。

Observer 類只有一個方法 update，用於接收主題傳遞的數據。我們創建了兩個 Observer 實例並將它們添加到了 Subject 實例中，然後調用了 notify 方法來通知它們更新數據。

在實際開發中，我們通常會使用現成的庫或框架來實現觀察者模式，比如 React 中的狀態管理庫 Redux 和事件處理庫 EventEmitter。