[design pattern] Observer 模式：讓你的系統具備超強感應力

Observer 模式：讓你的系統變身為超級偵探

想像一下，如果你的系統能夠像福爾摩斯一樣，對任何細微的變化都瞬間做出反應，那會是多麼酷的一件事！這就是 Observer 模式要帶給我們的超能力。它讓你的系統變得既敏感又靈活，能夠在關鍵時刻立即通知所有相關方。讓我們一起來探索這個神奇的設計模式吧！

1. Observer 模式是什麼？

簡單來說，Observer 模式就像是一個訂閱系統：

被觀察者（明星）：就像是大明星，負責發布最新動態。
觀察者（粉絲）：就是關注明星的粉絲，隨時準備接收最新消息。
通知機制（社交媒體）：當明星有新動態時，社交媒體立即推送消息給所有粉絲。

2. 為什麼要用 Observer？

Observer 模式在很多場景下都能大顯身手：

新聞訂閱系統：讓用戶即時收到最新新聞，再也不怕錯過重要資訊。
股票交易平台：當股價變動時，立即通知所有關注該股票的投資者。
遊戲開發：當遊戲狀態改變時，及時更新所有相關的遊戲元素。

3. Observer 模式實戰：打造一個超級新聞訂閱系統

來看看如何用 Observer 模式實現一個炫酷的新聞訂閱系統：

class NewsCategory {
    constructor(categoryName) {
        this.categoryName = categoryName;
        this.subscribers = [];
        this.latestNews = null;
    }

    subscribe(observer) {
        if (!this.subscribers.includes(observer)) {
            this.subscribers.push(observer);
            console.log(`${observer.username} 訂閱了 ${this.categoryName} 類別的新聞`);
        }
    }

    unsubscribe(observer) {
        this.subscribers = this.subscribers.filter(sub => sub !== observer);
        console.log(`${observer.username} 取消訂閱了 ${this.categoryName} 類別的新聞`);
    }

    notify() {
        for (const subscriber of this.subscribers) {
            subscriber.update(this.latestNews);
        }
    }

    publish(news) {
        this.latestNews = `${this.categoryName}: ${news}`;
        console.log(`發布新聞：${this.latestNews}`);
        this.notify();
    }
}

class User {
    constructor(username) {
        this.username = username;
    }

    update(news) {
        console.log(`${this.username} 收到新聞: ${news}`);
    }
}

// 使用示例
const sportsNews = new NewsCategory('體育');
const user1 = new User('小明');
const user2 = new User('小華');

sportsNews.subscribe(user1);
sportsNews.subscribe(user2);

sportsNews.publish('台灣隊奧運奪金！');

sportsNews.unsubscribe(user1);

sportsNews.publish('世界盃比賽結果出爐');