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


Posted in Javascript onJanuary 23, 2021

什么是发布/订阅?

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

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

使用场景

异步通信、多页面间相互通信,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简单发布订阅内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
禁止选中文字兼容IE、Chrome、FF等
Sep 04 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
node.js中的事件处理机制详解
Nov 26 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
Jan 25 Javascript
20行JS代码实现粘贴板复制功能
Feb 06 Javascript
vue 简单自动补全的输入框的示例
Mar 12 Javascript
javascript实现视频弹幕效果(两个版本)
Nov 28 Javascript
js实现简单点赞操作
Mar 17 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 Javascript
JS中循环遍历数组的四种方式总结
Jan 23 #Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 #Vue.js
原生js实现自定义难度的扫雷游戏
Jan 22 #Javascript
Element-ui upload上传文件限制的解决方法
Jan 22 #Javascript
js canvas实现五子棋小游戏
Jan 22 #Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 #Vue.js
element-ui 弹窗组件封装的步骤
Jan 22 #Javascript
You might like
DSP接收机前端设想
2021/03/02 无线电
php array_intersect()函数使用代码
2009/01/14 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
Yii2语言国际化的配置教程
2018/08/19 PHP
thinkPHP5.1框架中Request类四种调用方式示例
2019/08/03 PHP
YII2框架中日志的配置与使用方法实例分析
2020/03/18 PHP
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
用javascript获取当页面上鼠标光标位置和触发事件的对象的代码
2009/12/09 Javascript
jquery插件之easing使用
2010/08/19 Javascript
基于jquery的代码显示区域自动拉长效果
2011/12/07 Javascript
javascript实现日期格式转换
2014/12/16 Javascript
javascript检测两个数组是否相似
2015/05/19 Javascript
Node.js的文件权限及读写flag详解
2016/10/11 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
Angularjs单选改为多选的开发过程及问题解析
2017/02/17 Javascript
JS获取鼠标位置距浏览器窗口距离的方法示例
2017/04/11 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
[51:20]完美世界DOTA2联赛PWL S2 Magma vs PXG 第一场 11.28
2020/12/01 DOTA
Python下singleton模式的实现方法
2014/07/16 Python
TensorFlow 实战之实现卷积神经网络的实例讲解
2018/02/26 Python
Python简单读写Xls格式文档的方法示例
2018/08/17 Python
Python对切片命名的实现方法
2018/10/16 Python
Python I/O与进程的详细讲解
2019/03/08 Python
python根据时间获取周数代码实例
2019/09/30 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
python des,aes,rsa加解密的实现
2021/01/16 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
计算机应用毕业生自荐信
2013/10/23 职场文书
工商管理专业职业生涯规划
2014/01/01 职场文书
学校读书活动总结
2014/06/30 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
拯救大兵瑞恩观后感
2015/06/09 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
导游词之安徽醉翁亭
2020/01/10 职场文书