概念
用于实现对象之间的松耦合通信；
在该模式中，存在一个或多个发布者（Publishers）和一个或多个订阅者（Subscribers）；
发布者负责发布消息，而订阅者负责订阅感兴趣的消息并在接收到消息时做出相应的处理。
对比观察者模式
Subject 和 Observer 直接绑定，中间无媒介；
Publisher 和 Observer 相互不认识，中间有媒介；
演示
on 方法：订阅者可以注册自己来接收特定事件的通知；off 方法：订阅者可以取消对特定事件的订阅；emit 方法：发布者可以发布特定事件及其相关的数据。
class PubSub {
subscribers = {}
// 订阅
on(eventName, callback) {
if (!this.subscribers[eventName]) {
this.subscribers[eventName] = []
}
this.subscribers[eventName].push(callback)
}
// 取消订阅
off(eventName, callback) {
if (this.subscribers[eventName]) {
// 订阅函数的索引
const index = this.subscribers[eventName].findIndex(item => item === callback)
if (index !== -1) {
this.subscribers[eventName].splice(index, 1)
}
}
}
// 发布
emit(eventName, data) {
if (this.subscribers[eventName]) {
this.subscribers[eventName].forEach(callback => {
callback(data)
})
}
}
}
const pubsub = new PubSub()
function fn1(data) {
console.log('订阅1收到', data)
}
function fn2(data) {
console.log('订阅2收到', data)
}
pubsub.on('message', fn1) // 订阅
pubsub.on('message', fn2) // 订阅
pubsub.emit('message', '发布的消息') // 发布
console.log(pubsub)
pubsub.off('message', fn2) // 取消订阅
VUE
Vue2 实例本身就支持自定义事件，但 Vue3 不再支持；
推荐使用 mitt ，https://github.com/developit/mitt；
mitt 没有 once ，也可以使用 event-emitter https://www.npmjs.com/package/event-emitter
创建单独的 .js 文件、保证单例性
import mitt from 'mitt'
const emitter = mitt() // 单例
export default emitter
发布和订阅文章来源：https://www.toymoban.com/news/detail-593146.html
emitter.on('change', () => {
console.log('change')
})
emitter.emit('change')
即时销毁文章来源地址https://www.toymoban.com/news/detail-593146.html
created() {
emitter.on('change', this.fn)
},
beforeUnmount() {
emitter.off('change', this.fn)
}
到了这里，关于设计模式 ~ 发布订阅模式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
