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 相关文章推荐
js数字输入框(包括最大值最小值限制和四舍五入)
Nov 24 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
node.js中的http.response.removeHeader方法使用说明
Dec 14 Javascript
JS数组的常见用法实例
Feb 10 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
探讨JavaScript标签位置的存放与功能有无关系
Jan 15 Javascript
基于JS+Canves实现点击按钮水波纹效果
Sep 15 Javascript
JavaScript实现页面定时刷新(定时器,meta)
Oct 12 Javascript
javascript中this关键字详解
Dec 12 Javascript
js面试题之异步问题的深入理解
Sep 20 Javascript
关于JS中的作用域中的问题思考分享
Apr 06 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
PHP实现恶意DDOS攻击避免带宽占用问题方法
2015/05/27 PHP
Symfony控制层深入详解
2016/03/17 PHP
jquery的ajax从纯真网(cz88.net)获取IP地址对应地区名
2009/12/02 Javascript
JavaScript中两种链式调用实现代码
2011/01/12 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
Js 时间函数getYear()的使用问题探讨
2013/04/01 Javascript
基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解
2013/05/07 Javascript
Jquery插件分享之气泡形提示控件grumble.js
2014/05/20 Javascript
javascript 中__proto__和prototype详解
2014/11/25 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
Node.js环境下编写爬虫爬取维基百科内容的实例分享
2016/06/12 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
Angular限制input框输入金额(是小数的话只保留两位小数点)
2017/07/13 Javascript
详解puppeteer使用代理
2018/12/27 Javascript
详解在React项目中安装并使用Less(用法总结)
2019/03/18 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
2020/06/04 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
three.js如何实现3D动态文字效果
2021/03/03 Javascript
[08:29]DOTA2每周TOP10 精彩击杀集锦vol.7
2014/06/25 DOTA
[01:02:26]DOTA2-DPC中国联赛 正赛 SAG vs RNG BO3 第二场 1月18日
2021/03/11 DOTA
Python与shell的3种交互方式介绍
2015/04/11 Python
pytorch cnn 识别手写的字实现自建图片数据
2018/05/20 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
python支付宝支付示例详解
2019/08/22 Python
利用Python制作动态排名图的实现代码
2020/04/09 Python
python中xlrd模块的使用详解
2021/02/01 Python
在html5的Canvas上绘制椭圆的几种方法总结
2013/01/07 HTML / CSS
应届毕业生求职信
2014/05/26 职场文书
2014年医药代表工作总结
2014/11/22 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
母亲节寄语大全
2015/02/27 职场文书
2015年仓库管理员工作总结
2015/04/21 职场文书
教你解决往mysql数据库中存入汉字报错的方法
2021/05/06 MySQL
2007年老电脑安装win11会怎么样? 网友实测win11在老电脑运行良好
2021/11/21 数码科技