JavaScript事件发布/订阅模式原理与用法分析
更新时间：2018年08月21日 09:57:24 作者：咕咚萝卜
这篇文章主要介绍了JavaScript事件发布/订阅模式,结合实例形式简单分析了javascript发布/订阅模式的概念、原理及简单使用方法,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
在本篇文章里小编给大家分享了关于js中int和string数据类型互相转化实例和代码，需要的朋友们学习下。2019-01-01
这篇文章主要介绍了原生JS+HTML5实现的可调节写字板功能,涉及javascript结合HTML5属性动态操作页面元素实现绘图功能相关技巧,需要的朋友可以参考下2018-08-08
这篇文章主要为大家介绍了underscore 防抖技巧学习示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
TypeScript中import type与import的区别详析
ES6引入了模块化,其设计思想是在编译时就能确定模块的依赖关系,以及输入和输出的变量,下面这篇文章主要给大家介绍了关于TypeScript中import type与import区别的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要为大家详细介绍了javascript css红色经典选项卡效果的实现代码,需要的朋友可以参考下2016-05-05
本文通过实例代码给大家分享了基于js+jquery实现的注册信息验证功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧2017-09-09
这篇文章主要为大家详细介绍了微信小程序用canvas实现电子签名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
在JavaScript中，对对象进行拷贝的场景比较常见。但是简单的复制语句只能对对象进行浅拷贝，即复制的是一份引用，而不是它所引用的对象。而更多的时候，我们希望对对象进行深拷贝，避免原始对象被无意修改2016-12-12
微信小程序使用progress组件实现显示进度功能【附源码下载】
这篇文章主要介绍了微信小程序使用progress组件实现显示进度功能,涉及progress组件相关属性设置操作技巧,并附带源码供读者下载参考,需要的朋友可以参考下2017-12-12
这篇文章主要介绍了bootstrap组件之按钮式下拉菜单，包括单按钮下拉菜单，分裂式下拉菜单和向上弹出式菜单，本文给大家介绍的非常详细，需要的朋友参考下吧2017-01-01
最新评论