发布订阅者模式

__畫戟__

已于 2023-04-26 20:47:26 修改

阅读量256

点赞数 1

分类专栏： JavaScript 文章标签：发布订阅者模式观察者模式事件监听与发布订阅 broadcast与发布订阅 Vue发布订阅者模式

于 2022-05-18 10:15:09 首次发布

本文链接：https://blog.csdn.net/qq_41887214/article/details/124836375

版权

JavaScript 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。
订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Event Channel），当发布者（Publisher）发布该事件（Publish Event）到调度中心，也就是该事件触发时，由调度中心统一调度（Fire Event）订阅者注册到调度中心的处理代码。

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>订阅与发布</title>
</head>
<body>
<script>
  class EventHub {
    constructor() {
      this.events = {}
    }
    /* 注册事件
     * type 事件名称
     * fn  事件处理函数
     */
    $on = (type, fn) => {
  	  if (typeof fn !== "function") {
         console.warn("参数二必须是一个函数");
         return;
      }
      if (!this.events[type]) {
        this.events[type] = [fn]
      } else {
        this.events[type].push(fn)
      }
    }

    /* 移除事件/事件函数
     * type 事件名称
     * fn  事件处理函数
     */
    $off = (type, fn) => {
      // 判断有没有这个订阅事件
      if (!this.events[type]) return;
      if (!fn) {
        // 如果没有fn就删掉整个事件
        this.events[type] = undefined
      } else {
        // 如果有fn就只是过滤掉这个当前事件type的fn方法
        this.events[type] = this.events[type].filter(item => item !== fn)
      }
    }

    /* 发布事件
     * type 事件名称
     * data 发布的数据
     */
    $emit = (type, data) => {
      if (!this.events[type]) return
      this.events[type].forEach(item => item(data))
    }
  }

  // ==========测试=========

  const handlerA = () => {
    console.log('handlerA');
  }
  const handlerB = () => {
    console.log('handlerB');
  }
  const handlerC = () => {
    console.log('handlerC');
  }

  const eventHub = new EventHub()
  eventHub.$on('abc', handlerA)
  eventHub.$on('abc', handlerB)
  eventHub.$off('abc', handlerA)
  eventHub.$off('abc')
  eventHub.$on('abc', handlerC)

  eventHub.$on('abcd', handlerB)

  eventHub.$emit('abc')
  eventHub.$emit('abcd')

  console.log('eventHub', eventHub);
</script>
</body>
</html>

在这里插入图片描述

__畫戟__

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
发布订阅者模式

发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Event Channel），当发布者（Publisher）发布该事件（Publish Event）到调度中心，也就是该事件触发时，由调度中心统一调度（Fire Event）订阅者注册到调度中心的处理代码。...
复制链接

扫一扫