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

什么是发布-订阅模式？

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

直观例子

• 微信公众号

• 售楼处卖房

发布-订阅模式的做用

• 异步编程：订阅模式能够普遍应用于异步编程之中，这是一种替代传递回调函数的方案

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()来劫持各个属性的 getter和 setter，在数据变更时发布消息给各个订阅者，触发相应的监听回调

                              

• 获取数据

• 修改数据

总结

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