前端react 事件总线

介绍

  事件总线（EventBus）是一种广泛用于软件架构中的设计模式，通常作为多个模块间的通信机制，它可以帮助组织和管理应用程序中不同组件之间的通信，以提高应用程序的可维护性、可扩展性和灵活性。

  事件总线模式应用了发布者/订阅者模式，不同的组件通过订阅和发布事件来进行通信。发布者发布一个事件，订阅者可以订阅该事件并在事件发生时执行相关的操作。事件总线充当了中介者的角色，它负责管理所有的事件和订阅者，并确保事件正确地传递到所有订阅者。

 

 在前端react/vue 等框架开发中，事件总线解决的问题：跨组件之间的事件传递

  以下以react举例

 

实现：

方法一：利用 node 的 api events

 1.创建 utils.js 作为事件总线
EventBus相当于一个全局的仓库，任何组件都可以去这个仓库里获取事件
它的工作原理是发布/订阅方法，通常称为 Pub/Sub 。

import EventEmitter from 'events';

const eventBus = new EventEmitter();

export default eventBus;

  2.使用

         使用事件总线总的来说分三步：发布事件、监听事件、移除事件         

        发布事件：eventBus.emit(“事件名称”, 参数列表);

         监听事件：eventBus.on(“事件名称”, 监听函数)；

         移除事件：eventBus.off(“事件名称”, 监听函数)；

3.实例代码

'use client';
import eventBus from '@/utils/eventBus';
import React, { useEffect } from 'react';

export default function Test() {
  return (
    <div>
      <Child />
      <Child2 />
    </div>
  );
}

function Child() {
  //监听函数
  function getListener(v1, v2) {
    console.log('接收到的数据', v1, v2);
  }
  useEffect(() => {
    // 监听事件：eventBus.on(“事件名称”, 监听函数)；
    eventBus.on('eventBusName', (value1, value2) => getListener(value1, value2));

    return () => {
      // 记得不使用此组件的时候要关闭监听，避免再次进入的时候再次创建一个监听事件，如果如此往复多次，就会创建很多监听事件，这是一种灾难
      //移除事件：eventBus.off(“事件名称”, 监听函数)；
      eventBus.off('eventBusName', () => getListener);
    };
  }, []);

  return <div></div>;
}

function Child2() {
  return (
    <div
      onClick={() => {
        //发出事件：eventBus.emit(“事件名称”, 参数列表);
        eventBus.emit('eventBusName', '来自【Child组件2】的数据1', '来自【Child组件2】的数据2');
      }}
    >
      【Child组件2】
    </div>
  );
}

点击组件2 发布事件，并将组件2中的参数传递出去

组件1 通过 ‘eventBusName’ 时间名监听事件，组件2每点击一次（发布一次），组件2执行一次getListener方法

每监听执行一次getListener方法，需要通过eventBus.off(“事件名称”, 监听函数) 去移除监听

方法二：借助第三方库 events

  1.借助第三方库events，首先需要安装

npm install events 
yarn add events

2.使用

  用法和方法一类似，实现思路也是发布事件、监听事件、移除事件 三部曲，只不过写法有所不  同

         发布事件：eventBus.emit(“事件名称”, 参数列表);

         监听事件：eventBus.addListener(“事件名称”, 监听函数)；

         移除事件：eventBus.removeListener(“事件名称”, 监听函数)；

   然后接下来的步骤跟方法一一样，唯一区别在于监听事件,移除事件的写法有所不同

     详情可参考：React事件总线-CSDN博客