什么是发布/订阅？
我打个比方，你去某个门店买衣服，你和门店店长相互并不认识，门店店长只管卖他的衣服，并不关心是谁来买，而你也只管买你想要的衣服，并不关心是哪个门店在卖，这时，门店和你就组成了一个发布/订阅的关系。
当门店挂出衣服款式，你去找你想要的衣服，如果找到了，那就买下来，如果没找到，那就离开这家店。整个过程就是这么简单。
使用场景
异步通信、多页面间相互通信，pageA 的方法想在 pageB的方法调用的某个时机触发
直接上代码
class Publish {
constructor() {
this.listMap = {};
}
// 订阅
on(key, fn) {
this.listMap[key]
? this.listMap[key].push(fn)
: this.listMap[key] = [fn];
// 存储订阅fn的下标
const index = this.listMap[key].length - 1;
// 返回取消订阅的function
return () => this.clear(key, index);
}
// 取消所有该key订阅
off(key) {
delete this.listMap[key];
}
// 取消key的指定的某个订阅
clear(key, index) {
index === this.listMap[key].length - 1
? this.listMap[key].pop()
: this.listMap[key][index] = null;
}
//订阅一次触发后自动取消订阅
once(key, fn) {
this.on(key, (...rest) => {
fn(...rest);
this.off(key);
});
}
// 发布key
trigger(key, ...rest) {
if(key in this.listMap) {
this.listMap[key].forEach(fn => {
fn(...rest);
});
}
}
}
使用方法
const ob = new Publish();
// 订阅 sub1
const sub1 = ob.on('sub1', (a, b) => {
console.log('sub1', a, b);
});
// 订阅 sub1
const sub11 = ob.on('sub1', (a, b) => {
console.log('sub11', a, b);
});
ob.trigger('sub1', 2, 3);
// 取消订阅sub1
sub1();
// 取消订阅sub11
sub11();
// 订阅 sub3
ob.on('sub3', (a, b) => {
console.log('sub3', a, b);
});
// 订阅 sub3
ob.on('sub3', (a, b) => {
console.log('sub33', a, b);
});
ob.trigger('sub3', 6, 7);
// 取消订阅所有的sub3
ob.off('sub3');
// 订阅一次就自行取消订阅
ob.once('sub4', (a, b) => {
console.log('sub4', a, b);
});
ob.trigger('sub4', 8, 9);
总结
到此这篇关于js简单粗暴的发布订阅的文章就介绍到这了,更多相关js简单发布订阅内容请搜索Devmax以前的文章或继续浏览下面的相关文章希望大家以后多多支持Devmax！