最近准备看vue的源码，为了更轻松的阅读源码，首先需要对Observer模式进行了解，Observer模式是很常见的一种设计模式，使用该模式能方便的观察其它对象的变量，当被观察对象发生改变时，可以通知其它关联的对象进行更新。那些主流的MVVM框架都运用了该模式，通过观察对象属性的变量，对界面进行更新，实现数据的双向绑定。

使用场景

观察者模式不论在生活中和编程中都很常见，生活中跟我们息息相关的就是面试，当我们去别的公司面试完后，面试官都让我们回去等待通知，当有面试结果时就会通知我们，我们面试的人就属于订阅者，面试官就属于发布者了，当有面试结果后，面试官会拨打电话或发offer，这个就是通知面试者的一个事件。
在编程中观察都模式也很常见，如下所示：

• 网页事件绑定
• Promise
• jQuery callbacks
• nodejs 自定义事件

下面通过两种方式来完成观察者模式的实现。

实现1

        //观察者
        class Observer{
            constructor(name,subject){
                this.name = name;
                this.subject = subject;
                this.subject.addObserver(this);
            }

            update(){
                console.log(`${this.name}:${this.subject.getState()}`)
            }
        }
        //被观察者
        class Subject {
            constructor(){
                this.state = 0;
                this.observers = [];
            }

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

            addObserver(observer){
                this.observers.push(observer);
            }

            notifyAllObservers(){
                this.observers.forEach(item => {
                    item.update();
                })
            }
        }
        var subject = new Subject();
        var o1 = new Observer('o1',subject);
        var o2 = new Observer('o2',subject);
        var o3 = new Observer('o3',subject);
        var o4 = new Observer('o4',subject);
        subject.setState(1);
        subject.setState(11);
        subject.setState(111);

实现2

          class PubSub{
            constructor(){
                this.observers = {};
            }
            on(name,fn){
                if(!this.observers.hasOwnProperty(name)){
                    this.observers[name] = [];
                }
                if(typeof fn === 'function'){
                    this.observers[name].push(fn);
                }
            }

            emit(name,...args){
                if(this.observers.hasOwnProperty(name)){
                    this.observers[name].forEach(fn => {
                        fn.apply(null,args)
                    })
                }
            }
        }

        var pub = new PubSub();
        pub.on('click',function(){
            console.log('1点击了哦！')
        })
        pub.on('click',function(){
            console.log('2点击了哦！')
        })
        pub.emit('click');

该实现方式一般可用于创建自定义事件，在一些开源的源码中很常见。