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

前言

做为一名软件开发人员，了解经常使用的设计模式应该算是咱们必备的技能之一了。若是你在编程中能够驾轻就熟的使用这些，那你的代码确定是知足了健壮性，可读性，易维护的范畴以内的。本章咱们一块儿来了解下前端开发中经常使用的设计模式发布 订阅。

发布订阅者模式是什么

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

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

从他们对比的特征中不难发现这二者有不少类似点：都是一对多的关系，（一个观察者对象对应多个观察者、一个发布对应多个订阅者。）都能实现数据的绑定。他们本质上的区别是发布订阅会引入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这个开发框架的必经之路。