設計模式在 TypeScript 中的應用 - 觀察者模式

定義

當一個對象的狀態發生改變時，全部依賴於它的對象都將獲得通知。

實現

思路：

• 指定發佈者；
• 給發佈者添加一個緩存列表，用於存放回調函數以便通知訂閱者；
• 最後發佈消息的時候，發佈者會遍歷這個緩存列表，依次觸發裏面存放的訂閱者回調函數。

例子：

// 發佈類
class Subject {
  // 緩存列表，用以存放回調函數，以便通知訂閱者
  private observers: Observer[] = new Array<Observer>()
  private state: number

  // 新增訂閱者
  public subscribe (observer: Observer): void {
    this.observers.push(observer)
  }

  // 改變狀態，通知訂閱者
  public setState(state: number): void {
    console.log(`Warning: State changed: ${state}`)
    this.state = state
    this.publish()
  }

  // 獲取狀態
  public getState(): number {
    return this.state
  }

  // 發佈事件
  public publish (): void {
    for (let observer of this.observers) {
      observer.update()
    }
  }

  // 取消訂閱
  public unsubscribe (observer?: Observer): void {
    // 若是沒傳參數，則清空訂閱者
    if (!observer) {
      this.observers = new Array<Observer>()
    } else {
      this.observers.splice(this.observers.indexOf(observer), 1)
    }
  }
}

// 訂閱者抽象類
abstract class Observer {
  // 訂閱的內容
  protected subject: Subject

  // 訂閱更新
  public abstract update (): void
}

class AObserver extends Observer {
  // 構造方法裏訂閱
  public constructor (subject: Subject) {
    super()
    this.subject = subject
    this.subject.subscribe(this)
  }

  public update() {
    console.log(`AObserver: ${this.subject.getState()}`)
  }
}

class BObserver extends Observer {
  // 構造方法裏訂閱
  public constructor (subject: Subject) {
    super()
    this.subject = subject
    this.subject.subscribe(this)
  }

  public update() {
    console.log(`BObserver: ${this.subject.getState()}`)
  }
}

const subject = new Subject()

const aObserver = new AObserver(subject)
const bObserver = new BObserver(subject)

console.log('========')
console.log('State change: 100')
subject.setState(100)
console.log('========')

console.log('=========')
console.log('aObserver 取消訂閱')
subject.unsubscribe(aObserver)
console.log('State change: 150')
subject.setState(150)
console.log('=========')