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 相关文章推荐
JavaScript 对象成员的可见性说明
Oct 16 Javascript
在网页中使用document.write时遭遇的奇怪问题
Aug 24 Javascript
不使用jquery实现js打字效果示例分享
Jan 19 Javascript
js/jquery判断浏览器类型的方法小结
May 12 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
轻松理解JavaScript闭包
Mar 14 Javascript
Vue.js实战之利用vue-router实现跳转页面
Apr 01 Javascript
使用vue官方提供的模板vue-cli搭建一个helloWorld案例分析
Jan 16 Javascript
React Native 图片查看组件的方法
Mar 01 Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 Javascript
JavaScript实现简单验证码
Aug 24 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
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
对laravel的csrf 防御机制详解,及form中csrf_token()的存在介绍
2019/10/24 PHP
永不消失的title提示代码
2007/02/15 Javascript
JavaScript CSS修改学习第二章 样式
2010/02/19 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
JQueryiframe页面操作父页面中的元素与方法(实例讲解)
2013/11/19 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
2016/12/26 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
2017/05/20 jQuery
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
jquery之基本选择器practice(实例讲解)
2017/09/30 jQuery
AngularJS对动态增加的DOM实现ng-keyup事件示例
2018/03/12 Javascript
layui实现下拉框三级联动
2019/07/26 Javascript
微信小程序使用npm包的方法步骤
2019/08/13 Javascript
import的本质解析
2017/10/30 Python
Python使用requests及BeautifulSoup构建爬虫实例代码
2018/01/24 Python
django用户注册、登录、注销和用户扩展的示例
2018/03/19 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
python删除文件、清空目录的实现方法
2020/09/23 Python
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
2018/09/19 HTML / CSS
西班牙美妆电商:Perfume’s Club(有中文站)
2018/08/08 全球购物
DC Shoes俄罗斯官网:美国滑板鞋和服饰品牌
2020/08/19 全球购物
int和Integer有什么区别
2013/05/25 面试题
中医药大学市场营销专业自荐信
2013/09/29 职场文书
领导视察欢迎词
2014/01/15 职场文书
不同意离婚代理词
2015/05/23 职场文书
2015教师节通讯稿
2015/07/20 职场文书
新学期感想
2015/08/10 职场文书
python获取淘宝服务器时间的代码示例
2021/04/22 Python
python学习之panda数据分析核心支持库
2021/05/07 Python