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();
    // 订阅 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简单发布订阅内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

• JavaScript设计模式之观察者模式（发布者-订阅者模式）
• JS模式之简单的订阅者和发布者模式完整实例
• JavaScript中发布/订阅模式的简单实例
• JavaScript事件发布/订阅模式原理与用法分析
• JavaScript实现与使用发布/订阅模式详解
• js 发布订阅模式的实例讲解
• js实现的订阅发布者模式简单示例
• JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
• [js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
• js设计模式之代理模式及订阅发布模式实例详解

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！