前言

作为一名软件开发人员，了解常用的设计模式应该算是我们必备的技能之一了。如果你在编程中可以得心应手的使用这些，那你的代码肯定是满足了健壮性，可读性，易维护的范畴之内的。本章我们一起来了解下前端开发中常用的设计模式发布订阅。

发布订阅者模式是什么

说道发布订阅者模式，那不得不提的就是观察者模式，让我们先来对比下他们基础特性（摘自维基百科）：

观察者模式：在此种模式中，一个目标对象管理所有相依于它的观察者对象，并且在它本身的状态改变时主动发出通知。这通常透过呼叫各观察者所提供的方法来实现。此种模式通常被用来实时事件处理系统。
发布订阅者模式：在软件架构中，发布-订阅是一种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特定的接收者（称为订阅者）。

从他们对比的特征中不难发现这两者有很多相似点：都是一对多的关系，（一个观察者对象对应多个观察者、一个发布对应多个订阅者。）都能实现数据的绑定。他们本质上的区别是发布订阅会引入Event Channel（订阅器）来将发布的信息分发到订阅者（所以发布订阅可以异步处理订阅的内容）。

发布订阅者-vue中的双向绑定

DOM ======> 数据或数据 ======> DOM *从图中我们可以清楚的了解到 vue初始化时候会加载observer类，这个类是为了实现数据劫持，通过Object.propertyDefine为其添加set和get属性,并且将这些值添加到订阅器中（deb）。

//实现observer数据劫持
export class Observer { 
    ...
    //遍历所有属性
    walk (obj: Object) {
      const keys = Object.keys(obj)
      for (let i = 0; i < keys.length; i++) {
        defineReactive(obj, keys[i])
      }
  }
}
//给属性加上get set
export function defineReactive (
  ...
) {
   Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get: function reactiveGetter () {
      ...
      if (Dep.target) {
        dep.depend()
        if (childOb) {
          childOb.dep.depend()
          if (Array.isArray(value)) {
            dependArray(value)
          }
        }
      }
      return value
    },
    set: function reactiveSetter (newVal) {
      ...
      dep.notify()
    }
  })
}

//实现订阅者

我们再来看看订阅器中如何实现的,我们订阅器中需要的主要功能收集和发布。收集observer中劫持到到数据关联对应的数据和订阅者，通知对应的订阅者订阅到数据改变。

//实现订阅器
export default class Dep {
   //收集
   addSub (sub: Watcher) {
    ...
  }
  //
  depend () {
    if (Dep.target) {
      Dep.target.addDep(this)
    }
  }
  //通知
  notify () {
      ...
  }
}

*最后我们来了解下订阅者(watcher)接受到订阅器到通知后所做到事情

export default class Watcher {
  // ...
  /**
   * Subscriber interface.
   * Will be called when a dependency changes.
   */
   // 还记得Dep.notify 调用到update
  update () {
    /* istanbul ignore else */
    if (this.lazy) {
      this.dirty = true
    } else if (this.sync) {
      this.run()
    } else {
      queueWatcher(this)
    }
  }

  /**
   * Scheduler job interface.
   * Will be called by the scheduler.
   */
   //这个方法并不是实例化Watcher的时候执行的，而是监听的变量变化的时候才执行的
  run () {
     ...
    }
  }
}

发布订阅的优缺点以及疑问

优点：发布者和订阅者是解耦的，符合了软件设计高内聚，低耦合，只要引入订阅发布模式的事件中心，无论在何处都可以发布订阅。同时订阅发布者相互之间不影响。
缺点：1.使用不当就会造成数据流混乱，导致代码不好维护。2.订阅发布模式需要维护事件列队，订阅的事件越多，内存消耗越大
在vue中数据改变如何通知视图变化的？

解析指令 ===> 数据劫持 ===> 触发更新（通过watcher中的set）
在vue到双向绑定中订阅器如何分发数据到对应到订阅者？

总结

前期也写过总结vue源码的相关文章，那我为何此时还要再写一篇此类文章？因为随着深入对vue的使用，渐渐发现掌握vue双向绑定的设计结构是如此重要，vue的此种设计不仅可以应用于软件开发中的多种场景，而且是我们熟练掌握vue这个开发框架的必经之路。

vuejs系列四-双向绑定的实现

前言

发布订阅者模式是什么

发布订阅者-vue中的双向绑定

发布订阅的优缺点以及疑问

总结