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 相关文章推荐
[原创]静态页面也可以实现预览 列表不同的显示方式
Oct 14 Javascript
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
Jun 27 Javascript
jquery和javascript的区别(常用方法比较)
Jul 04 Javascript
javascript页面动态显示时间变化示例代码
Dec 18 Javascript
js时钟翻牌效果实现代码分享
Jul 31 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
使用微信小程序开发前端【快速入门】
Dec 05 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
Jan 27 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
Oct 25 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
JavaScript find()方法及返回数据实例
Apr 30 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生成UTF8文件的方法
2010/05/15 PHP
js基于qrcode.js生成二维码的方法【附demo插件源码下载】
2016/12/28 PHP
Laravel解决nesting level错误和隐藏index.php的问题
2019/10/12 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
JavaScript实现Java中StringBuffer的方法
2015/02/09 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
2015/05/19 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
js创建对象的方法汇总
2016/01/07 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
AngularJS实现一次监听多个值发生的变化
2016/08/31 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
javascript 内置对象及常见API详细介绍
2016/11/01 Javascript
使用原生js+canvas实现模拟心电图的实例
2017/09/20 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
Vue使用mixin分发组件的可复用功能
2019/09/01 Javascript
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
python绘制条形图方法代码详解
2017/12/19 Python
python-docx修改已存在的Word文档的表格的字体格式方法
2018/05/08 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
python3 pygame实现接小球游戏
2019/05/14 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
python实现贪吃蛇游戏源码
2020/03/21 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
网上蛋糕店创业计划书
2014/01/24 职场文书
生产部管理制度
2014/01/31 职场文书
商务日语专业的自荐信
2014/05/23 职场文书
政协会议宣传标语
2014/10/09 职场文书
党的群众路线批评与自我批评范文
2014/10/16 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
幼儿园教师师德承诺书
2015/04/28 职场文书
入党心得体会
2019/06/20 职场文书
Django migrate报错的解决方案
2021/05/20 Python
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL