JS设计模式之观测者模式

如果， 你只能学习一种设计模式，那么这种模式就只能是观察者模式。
观察者模式的应用范围很广， 可能你在无意中就遇到过， 其中最流行的Jquery就是运用的这种模式， 另外， 双十一那天， 剁手前点击的购物车也是运用了这种模式。 其它比如给DOM元素绑定事件， ES6异步， 都是采用的这种模式， 那么， 问题来了， 这到底是怎么实现的呢？ 其它先不谈，一个简单的例子， 备好瓜子版本，且听我娓娓道来。我们首先创建一个subject对象作为被观察者:

  class Subject {
    constructor() {
        this.state = 0;
        this.observes = [];
    }

    getState() {
        return this.state;
    }

    setState(state) {
        this.state = state;
        this.notifyAllObservers();
    }


    notifyAllObservers() {
        this.observes.forEach(observer => {
            observer.update()
        });
    }

    attach(observer) {
        this.observes.push(observer);
    }
}

其次我们创建一个观察者：

 class Observer {
    constructor(name, subject) {
        this.name = name;
        this.subject = subject;
        this.subject.attach(this)
    }

    update() {
        console.log(`${this.name} update`)
    }
}

最后调用：

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

被观察者会把所有的观察者收集起来， 当有一个观测者修改了被观察者的状态， 那么所有的观察者都会接收到响应。