js简单粗暴的发布订阅示例代码
什么是发布/订阅？
我打个比方，你去某个门店买衣服，你和门店店长相互并不认识，门店店长只管卖他的衣服，并不关心是谁来买，而你也只管买你想要的衣服，并不关心是哪个门店在卖，这时，门店和你就组成了一个发布/订阅的关系。
当门店挂出衣服款式，你去找你想要的衣服，如果找到了，那就买下来，如果没找到，那就离开这家店。整个过程就是这么简单。
使用场景
异步通信、多页面间相互通信，pageA的方法想在pageB的方法调用的某个时机触发
直接上代码
classPublish{
constructor(){
this.listMap={};
}
//订阅
on(key,fn){
this.listMap[key]
?this.listMap[key].push(fn)
:this.listMap[key]=[fn];
//存储订阅fn的下标
constindex=this.listMap[key].length-1;
//返回取消订阅的function
return()=>this.clear(key,index);
}
//取消所有该key订阅
off(key){
deletethis.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(keyinthis.listMap){
this.listMap[key].forEach(fn=>{
fn(...rest);
});
}
}
}
使用方法
constob=newPublish();
//订阅sub1
constsub1=ob.on('sub1',(a,b)=>{
console.log('sub1',a,b);
});
//订阅sub1
constsub11=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简单发布订阅内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！