一、发布订阅模式是什么
它其实是一种对象间一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到状态改变的通知。
发布订阅模式的优点:解耦,通信双方不需要有任何的联系,只需要关注彼此的事件即可。
![](https://i-blog.csdnimg.cn/blog_migrate/d5dfa3d35046be059034802ad66a8d72.png)
举个例子:比如微信公众号有很多个订阅者,有一个发布者,当发布者发布文章的时候,订阅者都可以收到发布的文章。此时微信公众号可以看做是一个调度中心,订阅者使用该调度中心的订阅功能(即关注公众号)进行订阅,管理员使用该调度中心的发布功能进行文章发布,当管理员发布文章后,订阅者就可以自动接收到。
二、使用场景
事件监听:绑定事件处理函数,触发事件时进行回调
react组件之间通信:比如兄弟组件间传值,在子组件A中发布,在子组件B中订阅
redux状态管理插件使用了发布订阅模式
三、JS手写实现简易版发布订阅模式
class Events {
constructor() {
this.events = {}
}
// 发布
emit(type, ...args) {
const listeners = this.events[type] || []
for(const listener of listeners) {
listener && listener(...args)
}
}
// 订阅
on(type, listener) {
this.events[type] = this.events[type] || []
this.events[type].push(listener)
}
// 取消订阅
off(type, listener) {
this.events[type] = this.events[type] || []
this.events[type] = this.events[type].filter(item => item !== listener)
}
// 仅在订阅后执行一次
once(type, listener) {
const callback = (...args) => {
this.off(type, callback)
listener(...args)
}
this.on(type, callback)
}
}