脚本宝典收集整理的这篇文章主要介绍了js简单粗暴的发布订阅示例代码，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
什么是发布/订阅？
我打个比方，你去某个门店买衣服，你和门店店长相互并不认识，门店店长只管卖他的衣服，并不关心是谁来买，而你也只管买你想要的衣服，并不关心是哪个门店在卖，这时，门店和你就组成了一个发布/订阅的关系。
当门店挂出衣服款式，你去找你想要的衣服，如果找到了，那就买下来，如果没找到，那就离开这家店。整个过程就是这么简单。
使用场景
异步通信、多页面间相互通信，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简单发布订阅内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典！
以上是脚本宝典为你收集整理的js简单粗暴的发布订阅示例代码全部内容，希望文章能够帮你解决js简单粗暴的发布订阅示例代码所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。