进阶:探究发布订阅模式,实现Vue底层响应式原理

2,723 阅读2分钟

什么是发布-订阅模式?

发布-订阅模式又称为观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知

直观例子

  • 微信公众号


  • 售楼处卖房


发布-订阅模式的作用

  • 异步编程:订阅模式可以广泛应用于异步编程之中,这是一种替代传递回调函数的方案
Ajax:

$.ajax('xxxx', function(data){
    initData(data)
    animate(data)
    // ....
})

这种写法耦合性过高,对操作的增删改查必须在内部进行

以发布-订阅模式的思想修改写法:
$.ajax('xxxx',function(data){
    // 假设obj为发布订阅模式中的发布者,trigger为发布行为
    obj.trigger('success', data)})
    // listen为订阅,当发布了success,所有订阅了success的行为将执行
    obj.listen('success', function(data){
    // toDo
})

通过发布订阅的形式改写后,代码耦合度大大减低,虽然在代码量上没有减少,但变得更加直观

  • 优化通知机制:订阅模式可以取代对象之间硬编码的通知机制,一个对象不用显式地调用另外一个对象的某一个接口

以售楼为实现一个通用发布订阅模式

需求分析:

  • 定义发布者
  • 发布者缓存列表(订阅者列表)
  • 发布消息
  • 通知订阅者
  • 对象动态添加职责
  • 提高解耦

               

实现Vue底层响应式原理

Vue.Js采用数据劫持的方式结合发布订阅模式,通过Object.defineProperty()来劫持各个属性的gettersetter,在数据变动时发布消息给各个订阅者,触发相应的监听回调

                              

  • 获取数据


  • 修改数据




总结

  • 本章从实现一个通用的发布订阅者模式,并通过发布订阅模式实现一个简易版本的Vue.js响应式原理
  • 发布订阅模式在众多设计模式中,最被前端所使用,通过这种设计模式,实现代码的高度解耦,提高代码的阅读性,更加直观