JavaScript note

就像訂閱一樣，當某個東西的狀態有改變，只要有訂閱的人都會自動收到通知，發布者不知道誰訂閱，訂閱者也不知道其他訂閱者的存在。

• 透過通知訂閱的「觀察者」狀態變化來管理物件通信，非常適合事件驅動系統。
• 幫助協調應用程式多個部分的更新。
• 範例：「主題」類別維護觀察者列表，當事件發生時通知每個變化。

// 發布者（Subject）：這個類別負責管理觀察者，並在狀態改變時通知他們。

class Subject {

  constructor() {

    this.observers = [];  // 建構子：在建立發布者時，初始化一個空的陣列來存放所有訂閱者。

  }

// 當一個觀察者呼叫這個方法時，它會將自己加入到發布者的訂閱清單中。

  subscribe(observer) {

    this.observers.push(observer);

  }

 // 當發布者的狀態改變時，它會呼叫這個方法，遍歷所有訂閱者。  

 // 並對每個訂閱者呼叫他們的 update 方法，將新資料傳遞給他們。

  notify(data) {

    this.observers.forEach(observer => observer.update(data));

  }

}

// 觀察者（Observer）：這個類別負責接收來自發布者的通知。

class Observer {    

// update 方法：當發布者通知時，會自動呼叫這個方法。 

// 它可以接收並處理發布者傳來的資料。

  update(data) {

    console.log(‘收到新資料：’, data);

  }

}

// 建立一個發布者實例，就像一個 YouTube 頻道。

const publisher = new Subject();

// 建立一個發布者實例，就像一個 YouTube 頻道。

const subscriber1 = new Observer();

const subscriber2 = new Observer();

// 讓這兩個訂閱者都去「訂閱」這個頻道。

publisher.subscribe(subscriber1);

publisher.subscribe(subscriber2);

// 頻道的狀態改變了（發布了一部新影片），發布者開始通知所有訂閱者。 

// 每個訂閱者的 update 方法都會被呼叫，並收到「新的 YouTube 影片發布了！」這則訊息。

publisher.notify(‘新的 YouTube 影片發布了！’);