JavaScript事件发布/订阅模式原理与用法分析


Posted in Javascript onAugust 21, 2018

本文实例讲述了JavaScript事件发布/订阅模式原理与用法。分享给大家供大家参考,具体如下:

1、发布/订阅模式也是诸多设计模式当中的一种;

2、这种方式可以在es5下相当优雅地处理异步操作;

3、什么是发布/订阅呢?我们举个栗子:

假设fn1,fn2,fn3都可以视作一个事件的发布者,执行它,就会发布一个事件。这个时候,我们可以通过一个事件的订阅者去批量订阅并处理这些事件,包括它们的先后顺序。增加一个消息订阅者的方法:

class AsyncFunArr {
 constructor (...arr) {
  this.funcArr = [...arr]
 }
 next () {
  const fn = this.funcArr.shift()
  if (typeof fn === 'function') fn()
 }
 run () {
  this.next()
 }
}

4、调用

//首先将fn1,fn2,fn3订阅
const asyncFunArr = new AsyncFunArr(fn1, fn2, fn3)
//fn1,fn2,fn3作为分布者分别调用其next()方法:
function fn1 () {
 console.log('Function 1')
 asyncFunArr.next()
}
function fn2 () {
 setTimeout(() => {
  console.log('Function 2')
  asyncFunArr.next()
 }, 500)
}
function fn3 () {
 console.log('Function 3')
 asyncFunArr.next()
}

5、输出:

// Function 1
// Function 2
// Function 3

6、总结:

通过上述方法,可以实现很多,如异步请求数据等。

7、参考资料:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery AJAX 调用WebService实现代码
Mar 24 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
深入理解Javascript动态方法调用与参数修改的问题
Dec 10 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
基于jQuery实现的打字机效果
Jan 16 Javascript
jQuery实现简单的手风琴效果
Apr 17 jQuery
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
详解vscode中vue代码颜色插件
Oct 11 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
JavaScript实现英语单词题库
Dec 24 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
Jul 17 Javascript
javascript和php使用ajax通信传递JSON的实例
Aug 21 #Javascript
小程序开发基础之view视图容器
Aug 21 #Javascript
详解微信小程序的 request 封装示例
Aug 21 #Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 #Javascript
vue监听对象及对象属性问题
Aug 20 #Javascript
微信小程序中使用自定义图标(阿里icon)的方法
Aug 20 #Javascript
Vue插件打包与发布的方法示例
Aug 20 #Javascript
You might like
一个简单实现多条件查询的例子
2006/10/09 PHP
PHP IN_ARRAY 函数使用注意事项
2010/07/24 PHP
php URL验证正则表达式
2011/07/19 PHP
destoon官方标签大全
2014/06/20 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
2010/09/03 Javascript
javascript修改表格背景色实例代码分享
2013/12/10 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
Sea.JS知识总结
2016/05/05 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
AngularJS指令详解及示例代码
2016/08/16 Javascript
详解如何在vue中使用sass
2017/06/21 Javascript
node.js中grunt和gulp的区别详解
2017/07/17 Javascript
Angular @HostBinding()和@HostListener()用法
2018/03/05 Javascript
vue 的keep-alive缓存功能的实现
2018/03/22 Javascript
详解基于webpack&gettext的前端多语言方案
2019/01/29 Javascript
用JS实现选项卡
2020/03/23 Javascript
[01:10:16]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第一局
2016/02/27 DOTA
[04:10]2018年度CS GO玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
PyTorch基本数据类型(一)
2019/05/22 Python
Python OrderedDict的使用案例解析
2019/10/25 Python
Python列表切片常用操作实例解析
2019/12/16 Python
结束运行python的方法
2020/06/16 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
新浪微博实习心得体会
2014/01/27 职场文书
房地产项目建议书
2014/03/12 职场文书
教师党员批评与自我批评
2014/10/15 职场文书
2014年招商工作总结
2014/11/22 职场文书
小学班主任评语
2014/12/29 职场文书
党支部承诺书
2015/01/20 职场文书
关爱空巢老人感想
2015/08/11 职场文书
我的收音机情缘
2022/04/05 无线电