手写一个发布/订阅者模式？

概述

发布订阅者模式用于处理对象之间的事件通信，该模式涉及两个主要角色：发布者（Publisher）和订（Subscriber）。 发布者维护一个事件列表，并在事件发生时通知所有已注册的订阅者。订阅者可以选择接收或忽略通知。

使用场景

发布-订阅者模式通常用于解耦应用程序中的组件，使得它们可以独立地交互。以下是一些使用发布-订阅者模式的场景：

1、事件处理：当事件发生时，将其发布到一个或多个订阅者，以便它们可以执行相关操作。
2、GUI编程：当用户与GUI界面交互时，会触发各种事件。这些事件可以作为发布者，GUI控件可以作为订阅者。
3、消息系统：在分布式系统中，消息队列可以将消息发布给多个订阅者，以实现可靠的消息传递。
4、日志记录：日志记录框架可以使用发布-订阅者模式，将日志消息发布给多个订阅者，如文件、数据库或网络服务。
5、MVC模式：MVC（Model-View-Controller）模式利用发布-订阅者模式来实现模型和视图之间的松耦合关系，使得它们可以独立地交互。

手写实现

      //发布/订阅者模式 :用于处理事件对象之间的通信
      //两个角色：发布者Publisher 和订阅者Subscriber
      //发布者 维护一个事件列表，并在事件发生时通知 给所有的订阅者 ，订阅者可以选择接收或是忽略

      //on : 传入需要监听的函数
      //emit : 在这里进行传参调用监听的函数
      //removeListeners : 清除单个监听函数
      //removeAllListeners ： 清除所有的监听函数
      class EvevtBuss {
        constructor() {
          this.listeners = {};
        }
        on(event, listener) {
          if (!this.listeners[event]) {
            this.listeners[event] = [];
          }
          this.listeners[event].push(listener);
        }

        //调用监听函数，并传参
        emit(event, ...args) {
          const listener = this.listeners[event];
          if (listener) {
            listener.forEach((element) => {
              //console.log(element);
              element(...args);
            });
          }
        }

        //清除单个监听函数
        removeListeners(event, listenertoRemove) {
          const listener = this.listeners[event];
          if (listener) {
            console.log("已清除");
            this.listeners[event] = listener.filter((listitem) => {
              return listitem != listenertoRemove;
            });
          }
        }

        //清除所有
        removeAllListeners(event) {
          delete this.listeners[event];
        }
      }

      function listenerFunction(args) {
        console.log("执行");
        console.log(args);
      }

      function listenerFunction_two(args) {
        console.log("执行2");
        console.log(args);
      }

      const bus = new EvevtBuss();

      bus.on("btclick", listenerFunction);
      bus.on("btclick", listenerFunction_two);

      // bus.removeListeners("btclick", listenerFunction);
      //bus.removeAllListeners("btclick");

      bus.emit("btclick", "hello");

结语

简单实现，献丑了......
希望大家多多关照啊。