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);

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

JS设计模式之观测者模式

推荐阅读更多精彩内容