JavaScript 的发布订阅模式

今天药忘吃喽~ 2023-02-22 12:18 21阅读 0赞

发布-订阅模式里面包含了三个模块，发布者，订阅者和处理中心，如下图结构。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70]  
1、在实际开发中，经常会遇到某个方法内处理很多的逻辑，最简单的就是直接在方法内直接写。这种是高度耦合的面向过程的写法。对于代码维护不友好。而发布-订阅模式就是将两者分离。其实就是将发布者和订阅者解耦了，我触发了某个事件（这里我们将触发该方法定义为事件），我只向调度中心通知，我并不知道调度中心内会怎么处理，有多少个人响应。我只管通知。而订阅者只管在调度中心订阅，有人调用它才响应。

2、假设我们有3个js文件，事件触发在a.js内，而响应该事件的在b.js和c.js内，要是用常规调用的方法的话，就要把b.js和c.js的方法传到a.js内。这是一个非常麻烦的操作。而发布-订阅模式是将调度中心挂在了全局，我们只管调用调度中心相应的方法注册和订阅。

3、代码实现

<script>
    
    class Event { 
      constructor () { }
      // 首先定义一个事件容器，用来装事件数组（因为订阅者可以是多个）
      handlers = { }
      
      // 事件添加方法，参数有事件名和事件方法 =》订阅
      addEventListener (type, handler) { 
        // 首先判断handlers内有没有type事件容器，没有则创建一个新数组容器
        if (!(type in this.handlers)) { 
          this.handlers[type] = []
        }
        // 将事件存入
        this.handlers[type].push(handler)
      }
    
      // 触发事件两个参数（事件名，参数）=》发布
      dispatchEvent (type, ...params) { 
        // 若没有注册该事件则抛出错误
        if (!(type in this.handlers)) { 
          return new Error('未注册该事件')
        }
        // 事件触发
        this.handlers[type].forEach(handler => { 
          handler(...params)
        })
      }
    
      // 事件移除参数（事件名，删除的事件，若无第二个参数则删除该事件的订阅和发布）
      removeEventListener (type, handler) { 
          // 无效事件抛出
          if (!(type in this.handlers)) { 
            return new Error('无效事件')
          }
          if (!handler) { 
            // 直接移除事件
            delete this.handlers[type]
          } else { 
            const idx = this.handlers[type].findIndex(ele => ele === handler)
            // 抛出异常事件
            if (idx === undefined) { 
              return new Error('无该绑定事件')
            }
            // 移除事件
            this.handlers[type].splice(idx, 1)
            if (this.handlers[type].length === 0) { 
              delete this.handlers[type]
            }
          }
        }
    }
    </script>

下面实现一个调用的demo

<script>
    var event = new Event() // 创建event实例
    // 定义一个自定义事件:"load"
    function load (params) { 
      console.log('load', params)
    }
    event.addEventListener('load', load)
    // 再定义一个load事件
    function load2 (params) { 
      console.log('load2', params)
    }
    //添加到订阅
    event.addEventListener('load', load2)
    // 触发该事件
    event.dispatchEvent('load', 'load事件触发')
    // 移除load2事件 移除订阅
    event.removeEventListener('load', load2)
    // 移除所有load事件
    event.removeEventListener('load')
    </script>

什么情况下适合使用订阅发布模式：

首先，如果一个数据或者事件的变化会对许多事件产生影响。例如：我们通过websocket从后台实时获取数据，当返回的数据为 load3 时，需要执行关闭数据流，更改数据显示，更新设备状态等等，在不使用订阅开发者模式时，当接收到 load3 后，我们注册一个函数，需要在该函数中写n个函数的执行，但是使用设计者模式，只需要注册一个 load3 的发布函数，其他函数订阅该函数，当发布函数执行后会发布信息，其订阅者会自动更新状态。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200703144350446.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzQ5MDE2NzA5,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

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

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

相关阅读

相关 JavaScript 的发布订阅模式

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

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

相关【JavaScript 设计模式】观察者模式与发布订阅模式

JavaScript 设计模式系列文章： [设计模式总览][Link 1] [工厂模式][Link 2] [单例模式][Link 3] [观察者模式/

Bertha 。/ 2022年12月04日 07:58/ 0 赞/ 249 阅读

相关 JavaScript的发布订阅模式

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

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

相关 JavaScript事件发布/订阅

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

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

相关 javascript 观察者模式发布订阅模式

观察者模式观察者模式，每一个观察者对象有两个方法添加监听`subscribe` 发布事件`publish` 观察者有个`list`存放所有的已经添加监

本是古典何须时尚/ 2022年04月24日 10:14/ 0 赞/ 230 阅读

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

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

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

相关 JavaScript发布订阅者模式

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

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

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

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

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

相关 JavaScript设计模式（5）——发布者-订阅模式

发布者订阅模式是什么？发布者订阅模式又称观察者模式，它定义对象间的一种一对多的依赖关系，当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知。简(shuo

我就是我/ 2021年09月02日 10:41/ 0 赞/ 360 阅读