JavaScript事件发布/订阅

谁借莪１个温暖的怀抱￠ 2022-05-21 08:28 160阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript 的发布订阅模式

发布-订阅模式里面包含了三个模块，发布者，订阅者和处理中心，如下图结构。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_s

今天药忘吃喽~/ 2023年02月22日 12:18/ 0 赞/ 4 阅读

相关 JavaScript的发布订阅模式

![d355b67bcf963d7647386b650f14a8ef.png][] 这里要说明一下什么是发布-订阅模式。发布-订阅模式里面包含了三个模块，发布者

你的名字/ 2022年08月29日 11:57/ 0 赞/ 179 阅读

相关发布--订阅

定义发布-订阅模式又叫观察者模式，它定义对象间的一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于他的对象都将得到通知。我们一般用事件模型来代替传统的发布

傷城~/ 2022年06月07日 13:44/ 0 赞/ 250 阅读

相关 JavaScript事件发布/订阅

1、发布/订阅模式也是诸多设计模式当中的一种； 2、这种方式可以在es5下相当优雅地处理异步操作； 3、什么是发布/订阅呢？我们举个栗子：假设fn1，fn2，fn3都可

谁借莪１个温暖的怀抱￠/ 2022年05月21日 08:28/ 0 赞/ 161 阅读

相关事件订阅发布 JavaScript 库 onfire.js

onfire.js 详细介绍 onfire.js 是一个很简单的事件分发的Javascript库（仅仅 0.9kb），简洁实用。可以用于: 简单的事件分发；

末蓝、/ 2022年05月19日 06:36/ 0 赞/ 162 阅读

相关事件订阅发布 JavaScript 库 onfire.js

onfire.js 详细介绍 onfire.js 是一个很简单的事件分发的Javascript库（仅仅 0.9kb），简洁实用。可以用于: 简单的事件分发；

浅浅的花香味﹌/ 2022年05月18日 11:15/ 0 赞/ 175 阅读

相关【JavaScript】设计模式-发布订阅模式

var Observer = (function() { var _message = {} return { //将订阅者注册

曾经终败给现在/ 2022年04月23日 21:48/ 0 赞/ 176 阅读

相关 JavaScript发布订阅者模式

假如你要建立一个网站，通常来说会有许多用户。你作为一名管理者，有时候需要将重要的消息发布给你的用户。在软件开发领域，开发此功能往往用到发布订阅者模式。下面我以简单的javasc

朴灿烈づ我的快乐病毒、/ 2022年01月20日 02:09/ 0 赞/ 259 阅读

相关 Javascript设计模式之发布-订阅模式

简介发布-订阅模式又叫做观察者模式，他定义了一种一对多的依赖关系，即当一个对象的状态发生改变的时候，所有依赖他的对象都会得到通知。回忆曾经作为一名前端开发人

亦凉/ 2021年09月30日 03:02/ 0 赞/ 328 阅读