发布订阅模式:就是创建一个调度中心,负责记录订阅者订阅的内容,然后统一发布相应的内容给订阅者;
发布订阅模式的好处是:可能多个订阅者订阅的内容是一样的(可以理解为处理的逻辑一样),那么是每个订阅者都写一样的逻辑比较方便,还是由调用中心对订阅相同内容的订阅者统一执行逻辑比较方便?
多个订阅者订阅同一个内容(多对一),那么数据结构应该是:
{
'aaa': [fn1, fn2, fn3, fn4],
'bbb': [fn5, fn6, fn7, fn8]
}
'aaa'和'bbb'
可以理解为订阅的内容,里面的数组是订阅者传递给调度中心要执行的逻辑函数;把订阅aaa
的所有逻辑函数放在同一个数组里,那么当发布者发布的时候遍历aaa
中所有的函数并执行(可以接收由发布者传递的参数)
// 创建调度中心
const bus = {
map: {},
//订阅
subscribe(dataProp, fn) {
if (!this.map[dataProp]) {
this.map[dataProp] = []
}
this.map[dataProp].push(fn);
},
//发布
publish(dataProp, data) {
this.map[dataProp] && this.map[dataProp].forEach(fn => {
fn(data)
})
},
}
// 订阅者
bus.subscribe('aaa', (arg) => {
console.log("aaa1", arg);
});
bus.subscribe('aaa', (arg) => {
console.log("aaa2", arg);
})
bus.subscribe('bbb', (arg) => {
console.log("bbb1", arg);
})
bus.subscribe('bbb', (arg) => {
console.log("bbb2", arg);
})
//发布者
bus.publish("aaa", "我是发布者,发布订阅aaa的参数");
bus.publish("bbb", "我是发布者,发布订阅bbb的参数");
vue中通常多个dom都使用同一个变量,也就是当变量的内容发生改变时,多个dom都需要执行相同的操作(更新页面),那么就需要用到发布订阅模式;
参考文章