什么是发布-订阅模式?
发布-订阅模式又称为观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知
直观例子
- 微信公众号
- 售楼处卖房
发布-订阅模式的作用
- 异步编程:订阅模式可以广泛应用于异步编程之中,这是一种替代传递回调函数的方案
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
响应式原理 - 发布订阅模式在众多设计模式中,最被前端所使用,通过这种设计模式,实现代码的高度解耦,提高代码的阅读性,更加直观