JS设计模式——观察者模式

观察者（Observer）监听主题（Subject）状态，一旦主题发出某项指令，所有的观察者收到指令后就执行某个方法，大概是这么一回事。

主题

// 主题，接收状态变化，触发每个观察者
class Subject {
    constructor() {
        this.state = 0;
        this.observers = [];
    }
    getState() {
        return this.state;
    }
    setState(state) {
        this.state = state;
        this.notifyAllObservers();
    }
    attach(observer) {
        this.observers.push(observer);
    }
    notifyAllObservers() {
        this.observers.forEach(observer => {
            observer.update();
        });
    }
}

观察者

// 观察者，等待被触发
class Observer {
    constructor(name, subject) {
        this.name = name;
        this.subject = subject;
        this.subject.attach(this);
    }
    update() {
        console.log(`${this.name} update, state: ${this.subject.getState()}`)
    }
}

调用

let s = new Subject();
let o1 = new Observer('o1', s);
let o2 = new Observer('o2', s);
let o3 = new Observer('o3', s);

// 这里主题说话了啊
// 所有的观察者都给我干活啊
s.setState(1);
s.setState(2);
s.setState(3);

运行结果

> o1 update, state: 1
> o2 update, state: 1
> o3 update, state: 1

> o1 update, state: 2
> o2 update, state: 2
> o3 update, state: 2

> o1 update, state: 3
> o2 update, state: 3
> o3 update, state: 3

总的来说就是观察者有多个，主题只有一个，主题那里能触发所有观察者