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

cover

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

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

classDiagram
    class Subject {
        -observers : Observer[]
        +subscribe(observer) void
        +unsubscribe(observer) void
        +notify() void
    }
    class Observer {
        <<interface>>
        +update(data)* void
    }
    class ConcreteObserverA {
        +update(data) void
    }
    class ConcreteObserverB {
        +update(data) void
    }
    Subject --> Observer
    Observer <|.. ConcreteObserverA
    Observer <|.. ConcreteObserverB

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('世界盃比賽結果出爐');

4. Observer 模式的實際應用場景

即時通訊軟體：
- 當有新消息時，立即通知所有在線用戶。
- 群組聊天中，一個人發消息，所有群成員都能收到通知。
物聯網設備監控：
- 當智能家電狀態改變時（如溫度超標），立即通知家庭成員或維修系統。
社交媒體平台：
- 當你關注的人發布新動態時，你會立即收到通知。
電子商務平台：
- 當商品降價或庫存狀態改變時，通知關注該商品的用戶。
任務管理系統：
- 當項目狀態更新時，自動通知所有相關團隊成員。

5. Observer 模式的注意事項

性能考慮：當觀察者很多時，通知過程可能會耗時。考慮使用異步通知或批量處理。
內存管理：記得在觀察者不再需要時取消訂閱，避免內存洩漏。
循環依賴：小心處理觀察者和被觀察者之間可能的循環依賴問題。
線程安全：在多線程環境中使用時，要確保通知過程的線程安全。

結論

Observer 模式就像給你的系統裝上了一雙火眼金睛，讓它能夠敏銳地察覺任何變化並迅速做出反應。無論是在開發新聞訂閱系統、即時通訊軟體，還是物聯網應用中，Observer 模式都能讓你的系統變得更加靈活和及時。下次遇到需要建立一對多依賴關係的場景時，不妨試試這個超級實用的設計模式吧！

Terry Yao's Blog

分類

目錄