js简单粗暴的发布订阅示例代码

时间:2021-05-26

什么是发布/订阅?

我打个比方,你去某个门店买衣服,你和门店店长相互并不认识,门店店长只管卖他的衣服,并不关心是谁来买,而你也只管买你想要的衣服,并不关心是哪个门店在卖,这时,门店和你就组成了一个发布/订阅的关系。

当门店挂出衣服款式,你去找你想要的衣服,如果找到了,那就买下来,如果没找到,那就离开这家店。整个过程就是这么简单。

使用场景

异步通信、多页面间相互通信,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();// 订阅 sub1const sub1 = ob.on('sub1', (a, b) => { console.log('sub1', a, b);});// 订阅 sub1const sub11 = ob.on('sub1', (a, b) => { console.log('sub11', a, b);});ob.trigger('sub1', 2, 3);// 取消订阅sub1sub1();// 取消订阅sub11sub11();// 订阅 sub3ob.on('sub3', (a, b) => { console.log('sub3', a, b);});// 订阅 sub3ob.on('sub3', (a, b) => { console.log('sub33', a, b);});ob.trigger('sub3', 6, 7);// 取消订阅所有的sub3ob.off('sub3');// 订阅一次就自行取消订阅ob.once('sub4', (a, b) => { console.log('sub4', a, b);});ob.trigger('sub4', 8, 9);

总结

到此这篇关于js简单粗暴的发布订阅的文章就介绍到这了,更多相关js简单发布订阅内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章