简单模拟vue中的观察者模式

vue的响应式中就用到了观察者模式,这里就简单模拟一下观察者模式

观察者模式

观察者模式他分为两部分

• 观察者（订阅者）- Watcher 他有一个update()方法，当事件发生时，具体需要做的事情
• 目标 (发布者) - Dep
  1、他有一个subs数组用储存所有观察者
  2、还有一个添加观察者方法addsub()
  3、还有一个notyfy()方法当事件反生，调用所有观察者的update()方法

    // 发布者-目标
    class Dep {
        constructor () {
            // 记录所有的观察者
            this.subs = []
        }
        //添加观察者
        addSub (sub) {
            if(sub && sub.update) {
                this.subs.push(sub)
            }
        }
        // 发布通知
        notify () {
            this.subs.forEach((sub)=>{
                sub()
            })
        }
    }
    // 订阅者-观察者
    class Watcher {
        update () {
            console.log('update')
        }
    }
    
    //测试
    //创建一个发布者对象
    const dep = new Dep()
    //创建一个观察者对象
    const watcher =new Watcher()
    //添加一观察者
    dep.addSub(watcher)
    //发布通知
    dep.notify()

总结

观察者模式是由具体目标调度，比如当事件触发，Dep就会调用贯观察者的update方法，所以观察者模式订阅者和发布者这间存在依赖。