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 相关文章推荐
jQuery 技巧大全(新手入门篇)
May 12 Javascript
jQuery Ajax之load()方法
Oct 12 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
jQuery中:checked选择器用法实例
Jan 04 Javascript
Javascript如何判断数据类型和数组类型
Jun 22 Javascript
js提示框替代系统alert,自动关闭alert对话框的实现方法
Nov 07 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
微信小程序 获取session_key和openid的实例
Aug 17 Javascript
vue-cli脚手架的安装教程图解
Sep 02 Javascript
详解JavaScript 的变量
Mar 08 Javascript
H5 js点击按钮复制文本到粘贴板
Nov 19 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 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
php通过rmdir删除目录的简单用法
2015/03/18 PHP
PHP汉字转换拼音的函数代码
2015/12/30 PHP
php+ajax无刷新上传图片的实现方法
2016/12/06 PHP
php+mysql+jquery实现日历签到功能
2017/02/27 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
javascript学习笔记(三)显示当时时间的代码
2011/04/08 Javascript
jQuery判断当前点击的是第几个li的代码
2014/09/26 Javascript
jQuery的load()方法及其回调函数用法实例
2015/03/25 Javascript
JS模拟按钮点击功能的方法
2015/12/22 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
NodeJs安装npm包一直失败的解决方法
2017/04/28 NodeJs
vue中各组件之间传递数据的方法示例
2017/07/27 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
JavaScript 如何在浏览器中使用摄像头
2020/12/02 Javascript
python encode和decode的妙用
2009/09/02 Python
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
Python快速查找list中相同部分的方法
2018/06/27 Python
python列表list保留顺序去重的实例
2018/12/14 Python
在交互式环境中执行Python程序过程详解
2019/07/12 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
numpy 声明空数组详解
2019/12/05 Python
给 TensorFlow 变量进行赋值的方式
2020/02/10 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
OSPREY LONDON官网:英国本土皮具品牌
2019/05/31 全球购物
优秀的毕业生的自我评价
2013/12/12 职场文书
4s店总经理岗位职责
2013/12/31 职场文书
解除劳动合同协议书(样本)
2014/10/02 职场文书
2014年档案管理员工作总结
2014/12/01 职场文书
Python 统计序列中元素的出现频度
2022/04/26 Python
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS