概念
用于實(shí)現(xiàn)對(duì)象之間的松耦合通信；
在該模式中，存在一個(gè)或多個(gè)發(fā)布者（Publishers）和一個(gè)或多個(gè)訂閱者（Subscribers）；
發(fā)布者負(fù)責(zé)發(fā)布消息，而訂閱者負(fù)責(zé)訂閱感興趣的消息并在接收到消息時(shí)做出相應(yīng)的處理。
對(duì)比觀察者模式
Subject 和 Observer 直接綁定，中間無媒介；
Publisher 和 Observer 相互不認(rèn)識(shí)，中間有媒介；
演示
on 方法：訂閱者可以注冊(cè)自己來接收特定事件的通知；off 方法：訂閱者可以取消對(duì)特定事件的訂閱；emit 方法：發(fā)布者可以發(fā)布特定事件及其相關(guān)的數(shù)據(jù)。
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]) {
// 訂閱函數(shù)的索引
const index = this.subscribers[eventName].findIndex(item => item === callback)
if (index !== -1) {
this.subscribers[eventName].splice(index, 1)
}
}
}
// 發(fā)布
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', '發(fā)布的消息') // 發(fā)布
console.log(pubsub)
pubsub.off('message', fn2) // 取消訂閱
VUE
Vue2 實(shí)例本身就支持自定義事件，但 Vue3 不再支持；
推薦使用 mitt ，https://github.com/developit/mitt；
mitt 沒有 once ，也可以使用 event-emitter https://www.npmjs.com/package/event-emitter
創(chuàng)建單獨(dú)的 .js 文件、保證單例性
import mitt from 'mitt'
const emitter = mitt() // 單例
export default emitter
發(fā)布和訂閱文章來源：http://www.zghlxwxcb.cn/news/detail-593146.html
emitter.on('change', () => {
console.log('change')
})
emitter.emit('change')
即時(shí)銷毀文章來源地址http://www.zghlxwxcb.cn/news/detail-593146.html
created() {
emitter.on('change', this.fn)
},
beforeUnmount() {
emitter.off('change', this.fn)
}
到了這里，關(guān)于設(shè)計(jì)模式 ~ 發(fā)布訂閱模式的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
