js简单粗暴的发布订阅示例代码_编程技术网-程序员技术内容聚合平台

（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)

什么是发布/订阅？

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

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

使用场景

异步通信、多页面间相互通信，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简单发布订阅内容请搜索站长技术以前的文章或继续浏览下面的相关文章希望大家以后多多支持站长技术！

原文链接：https://m.jb51.net/article/204631.htm

版权声明：本文转载自网络，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的，如有侵权请联系QQ/微信：153890879删除

相关文章

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

javascript代码实现简易计算器

JS实现简易日历效果

vue keep-alive的简单总结