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 相关文章推荐
javascript基础知识大集锦(一) 推荐收藏
Jan 13 Javascript
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
jquery 面包屑导航 具体实现
Jun 05 Javascript
Bootstrap和Java分页实例第一篇
Dec 23 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
详解webpack中的hash、chunkhash、contenthash区别
Jan 05 Javascript
微信小程序 slot踩坑的解决
Apr 01 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
vue 强制组件重新渲染(重置)的两种方案
Oct 29 Javascript
vue+elementUI实现表格列的显示与隐藏
Apr 13 Vue.js
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
php中的Base62类(适用于数值转字符串)
2013/08/12 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
Laravel中获取路由参数Route Parameters的五种方法示例
2017/09/29 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
php变量与字符串的增删改查操作示例
2020/05/07 PHP
基于jQuery的动态表格插件
2011/03/28 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
javascript窗口宽高,鼠标位置,滚动高度(详细解析)
2013/11/18 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
深入探讨前端框架react
2015/12/09 Javascript
基于jQuery实现带动画效果超炫酷的弹出对话框(附源码下载)
2016/02/22 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
2016/05/10 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
2016/06/23 Javascript
Node.js实现文件上传
2016/07/05 Javascript
微信小程序 教程之条件渲染
2016/10/18 Javascript
利用D3.js实现最简单的柱状图示例代码
2016/12/09 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
vue项目base64字符串转图片的实现代码
2018/07/13 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
微信小程序 自定义弹窗实现过程(附代码)
2019/12/05 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
[01:44]剑指西雅图 展望TI之CIS战队专访
2014/06/25 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
Python中Selenium模拟JQuery滑动解锁实例
2017/07/26 Python
关于 Python opencv 使用中的 ValueError: too many values to unpack
2019/06/28 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
写演讲稿要注意的六件事
2014/01/14 职场文书
高中生期末评语大全
2014/01/28 职场文书
高考励志标语
2014/06/05 职场文书
安全责任书范文
2014/08/25 职场文书
数学教师求职信范文
2015/03/20 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
解决xampp安装后Apache无法启动
2022/03/21 Servers
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android