发布者订阅模式是什么?
发布者订阅模式又称观察者模式,它定义对象间的一种一对多的依赖关系,当一个对象的状 态发生改变时,所有依赖于它的对象都将得到通知。
简(shuo)而(ju)言(ren)之(hua),发布者-订阅模式就是由发布者和订阅者组成的一种应用场景。以项目组为例,产品经理(或甲方)往往承担发布者的责任,负责推送需求到某工作群里,发出需求后,其他打工仔的手机就会滴滴滴的响,滋滋滋的震,这是因为这些打工仔订阅了这些消息,然后不同职责的打工仔就可以做不同的事情去响应这个需求。当然在这个群里的可能还有公司的老板,平时他就把这个群给屏蔽了,这类人也属于“可订阅者”,他想订阅就订阅,不想订阅就退订。从上面的例子中可以得出以下结论:
- 发布者和订阅者本身没有任何联系
- 发布者可以在没有任何订阅者的情况下发布消息
- 订阅者可以选择订阅任意发布者的信息,并针对不同的信息做不同的处理
从dom事件了解最常见的发布者-订阅模式
实际上,只要我们曾经在 DOM 节点上面绑定过事件函数,那我们就曾经使用过发布—订阅模式。例如我们在空白页面某处执行了点击操作,不管你点的地方有没有按钮,他都会触发许多事件,一次鼠标点击可以触发mousedown,mouseup以及click等等等等事件。但我们都知道,点击空白处是不会发生任何响应的,这是因为我们没有给这个操作绑定相关的订阅者,或者说没有人关心你点击空白处是为了干什么。这也正好对应了发布者订阅模式的前两个特征。
实现一个最简单的发布者-订阅模式
了解了发布者订阅模式的实践特性之后,我们就可以总结出一些关于发布者订阅模式的代码特性了。以工作群为例:
- 我们需要一个发布者
- 我们需要一个工作群(桥梁)
- 我们需要一些订阅者
理清楚基本的思路后,我们把他翻译成代码。
let publisher = {
mySubscriber:[],//订阅者们
addSubscriber:function(subscriber){
this.mySubscriber.push(subscriber)
}, //添加订阅者
releaseNews(msg){
this.mySubscriber.forEach((item)=>{
item.call(this,msg)
})
}//发布消息给订阅者
}
function ui(msg){
if(msg==='出图'){
//接收到自己的任务开始干活
console.log(msg)
}else{
console.log('指令卜对,不鸟你')
}
}
function manong(msg){
if(msg==='写代码'){
//接收到自己的任务开始干活
console.log(msg)
}else{
console.log('指令卜对,不鸟你')
}
}
publisher.addSubscriber(ui) //ui订阅消息
publisher.addSubscriber(manong) //码农订阅消息
publisher.releaseNews('出图')
我们还可以对上述代码进行一些小改造来让他变得更加完美,比如添加移除订阅者的功能,将msg参数替换成更为严谨的argument等。这些细节性的问题读者可以自行研究,我这边只给最好理解的例子以及最简单有效的代码,方便大家快速记忆。
Vue中的发布者-订阅模式
vue的核心源码数据双向绑定(mvvm)就是参考了发布者订阅的模式,只是比发布者订阅模式再多加一层订阅,即虚拟dom和data都既是发布者又是订阅者,关于数据双向绑定的源码探究建议参考我之前的文章,写的非常非常非常非常详细,思路和代码非常非常非常非常清晰,不得不吹一波,我咋那么空去研究这个源码。传送门:vue进阶测试——数据双向绑定原理探究。