js简单粗暴的发布订阅示例代码
这篇文章主要给大家介绍了js简单粗暴的发布订阅的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
什么是发布/订阅?
我打个比方,你去某个门店买衣服,你和门店店长相互并不认识,门店店长只管卖他的衣服,并不关心是谁来买,而你也只管买你想要的衣服,并不关心是哪个门店在卖,这时,门店和你就组成了一个发布/订阅的关系。
当门店挂出衣服款式,你去找你想要的衣服,如果找到了,那就买下来,如果没找到,那就离开这家店。整个过程就是这么简单。
使用场景
异步通信、多页面间相互通信,pageA 的方法想在 pageB的方法调用的某个时机触发
直接上代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 | 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); }); } } } |
使用方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | 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简单粗暴的发布订阅的文章就介绍到这了