TS 设计模式07 - 观察者模式

1. 简介

观察者模式是一种对象行为模式。它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都得到通知并被自动更新。

2. 使用场景

1. 当一个抽象模型有两个方面，其中一个方面依赖于另一方面。将这二者封装在独立的对象中以使它们可以各自独立地改变和复用。
2. 当对一个对象的改变需要同时改变其他对象，而不知道具体有多少对象需要被改变。
3. 当一个对象必须通知其他对象，而它又不能假定其他对象是谁。换言之，不希望这些对象是紧密耦合的。

3. 角色

1. 抽象主题（Subject）：
   它把所有观察者对象的引用保存到一个聚集里，每个主题都可以有任何数量的观察者。抽象主题提供一个接口，可以增加和删除观察者对象。
2. 具体主题（Concrete Subject）：
   将有关状态存入具体观察者对象；在具体主题内部状态改变时，给所有登记过的观察者发出通知。
3. 抽象观察者（Observer）：
   为所有的具体观察者定义一个接口，在得到主题通知时更新自己。
4. 具体观察者（Concrete Observer）：
   实现抽象观察者角色所要求的更新接口，以便使本身的状态与主题状态协调。

4. 实现

image.png

interface Msg { // Msg 可以按照任意约定的接口格式去约束，这里假设是如下类型消息
    name: string;
    value: string;
}

interface Subject {
    registerObserver(observer: Observer): void;
    removeObserver(observer: Observer): void;
    notifyObservers(msg: Msg): void;
}

interface Observer {
    update(msg: Msg): void
}

class ConcreteSubject implements Subject {
    private observers: Observer[] = [];
    private state: object = {};
    registerObserver(observer: Observer): void {
        this.observers.push(observer);
    }
    removeObserver(observer: Observer): void {
        const index = this.observers.findIndex(val => val === observer);
        if (index > -1) {
            this.observers.splice(index, 1);
        }
    }
    notifyObservers(msg: Msg): void {
        this.observers.forEach(observer => observer.update(msg));
    }
    setState(name, value): void {
        this.state[name] = value;
        console.log(`${name}状态更新为：${value}`);
        console.log('通知所有观察者');
        this.notifyObservers({
            name,
            value,
        });
    }
}

class ConcreteObserver implements Observer {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    update(msg: Msg): void {
        console.log(`${this.name} 观察到：${msg.name}状态更新为：${msg.value}`);
    }
}

const concreteSubject = new ConcreteSubject();
const concreteObserver1 = new ConcreteObserver('小王');
const concreteObserver2 = new ConcreteObserver('小明');

concreteSubject.registerObserver(concreteObserver1);
concreteSubject.registerObserver(concreteObserver2);
concreteSubject.setState('天气', '多云');

concreteSubject.removeObserver(concreteObserver2);
concreteSubject.setState('天气', '晴');

image.png

这里的 Msg 其实就是一种约定的消息接口，你甚至可以直接使用 Subject，这样Subject 和 Observer 就是一种双向关系（关联和依赖）。另外，这里的 setState 也只是对变更行为的一种抽象而已，你可以在任何事件或者任何时机通知订阅者进行更新。

5. 小结

当一个对象密切关注另一个对象的某个状态时，就可以使用观察者模式。它解除了主题和具体观察者的耦合，让耦合的双方都依赖于抽象，而不是依赖具体。

另外，在使用轮询的地方，我们应该先考虑是否可以使用观察者模式。因为主动观察是优于被动轮询的。

参考

观察者模式 - 百度百科
观察者模式 | 菜鸟教程
图解23种设计模式（TypeScript版）——前端必修内功心法
Java设计模式之观察者模式(Observer Pattern)