JavaScript事件发布/订阅模式原理与用法分析
2018-08-21 09:57
786 查看
本文实例讲述了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中发布/订阅模式的简单实例
- js 发布订阅模式的实例讲解
- node.js 发布订阅模式的实例
- JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
- JavaScript观察者模式(经典)
- JavaScript观察者模式(publish/subscribe)原理与实现方法
- JavaScript设计模式之观察者模式(发布者-订阅者模式)
- 深入理解Javascript中的观察者模式
- Javascript设计模式之观察者模式(推荐)
- JavaScript原生实现观察者模式的示例
- JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
相关文章推荐
- JavaScript设计模式之单例模式原理与用法实例分析
- JavaScript事件委托原理与用法实例分析
- Javascript中理解发布--订阅模式
- 关于javascript的事件委托delegate的原理分析
- JavaScript中发布/订阅模式的简单实例
- javascript中键盘事件用法实例分析
- Redis 发布/订阅机制原理分析
- javascript 设计模式 发布订阅模式
- PHP设计模式之原型设计模式原理与用法分析
- Vue双向绑定原理(二)访问器属性defineProperty()和发布/订阅模式
- javascript的简易发布/订阅模式
- 【JavaScript】让事件支持先发布后订阅
- javascript设计模式学习之八_发布订阅(观察者)模式
- javascript 设计模式 -- 发布/订阅模式
- Redis源码分析(三十)--- pubsub发布订阅模式
- JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例
- 从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)
- Spring Redis与ActiveMQ发布订阅模式源码分析
- JavaScript之发布-订阅模式
- 性能最高的javascript 发布订阅系统(pub/sub)Arbiter.js 源码分析