前言

基于原生JS开发的事件处理器

支持微前端中使用 如 microp-app、qiankun2 等 支持跨技术栈使用，如 Vue、React、原生JS 等

安装

npm install web-event-center
or
yarn add web-event-center

框架

React/原生JavaScript

// 直接引入整个包
import eventCenter from 'web-event-center'

// 或者按需引入
import { sendGlobal, send, addGlobalListener, addListeners, removeGlobalListener, removeListeners } from 'web-event-center'

Vue2

1. 注册

// main.js
import { EventCenterVue } from 'event-center'
Vue.use(EventCenterVue)

2.使用

// page.vue
// 通过this访问
this.$sendGlobal // 发送到全局应用
this.$send // 发送到指定app
this.$addGlobalListener // 监听全局事件
this.$addListeners // 监听指定应用事件
this.$removeGlobalListener // 移除监听的全局事件
this.$removeListeners // 移除监听的指定应用事件

Vue3

1.注册

与vue2注册方式相同

// main.js
import { EventCenterVue } from 'event-center'
Vue.use(EventCenterVue)

2.使用

// page.vue
import { getCurrentInstance } from 'vue'
const app = getCurrentInstance().appContext.config.globalProperties

app.$sendGlobal // 发送到全局应用
app.$send // 发送到指定app
app.$addGlobalListener // 监听全局事件
app.$addListeners // 监听指定应用事件
app.$removeGlobalListener // 移除监听的全局事件
app.$removeListeners // 移除监听的指定应用事件

API及参数说明

[ ] 内为可选参数

appName通常是微前端中所注册应用的名称，可按需自行定义

| API | 功能描述 | 参数说明 | | :----------------------------------- | ----------------------------------------------------- | ------------------------------------------------------------ | | sendGlobal( eventName, [data]) | 发送到全局应用 | eventName: 必填，事件名称，stringdata: 可选，所发送的数据，any | | send( appName, eventName, [data]) | 发送到指定应用appName为数组时，同时向多个应用发送数据 | appName: 必填，接收此数据的应用名称，string | string[]eventName: 必填，事件名称data: 可选，所发送的数据 | | addGlobalListener( eventName, cb, [options]) | 监听全局事件 | eventName: 必填，事件名称cb: 必填，监听事件的回调程序，该回调中可拿到所接收的数据。如果是匿名函数，将会在该函数执行一次后解除绑定 | | addListeners( appName, eventName, cb, [options]) | 监听指定应用事件 | appName: 必填，接收此数据的应用名称，string | string[]eventName: 必填，事件名称cb：必填，监听事件的回调程序，该回调中可拿到所接收的数据。如果是匿名函数，将会在该函数执行一次后解除监听 | | removeGlobalListener( eventName, cb) | 移除对全局事件的监听 | eventName: 必填，事件名称cb: 必填，回调程序的名称，应与addGlobalListener时传入的名称相同 | | removeListeners( appName, eventName, cb) | 移除对指定应用事件的监听 | appName: 必填，接收此数据的应用名称，string |string[]eventName: 必填，事件名称cb：必填，回调程序的名称，应与addListeners时传入的名称相同 |

额外的配置参数

| 参数名称 | 类型 | 描述 | | -------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | options | { once?: boolean; immediate?:boolean; immediateData?:any;} | once: 是否在cb触发一次后解除绑定，设置为true时，作用效果类似于绑定匿名函数， 默认falseimmediate: 是否在绑定cb后立即触发一次， 默认falseimmediateData：立即触发时所携带的数据 |

示例

发送全局事件，并进行监听

// 应用A
sendGlobal('myEvent', 'helloWorld') // 发送自定义事件 myEvent, 携带数据 'helloWorld'

// 应用B、应用C内均可接受到
addGlobalListener('myEvent', (data) => {
    console.log(data) // 'helloWorld'
})

发送到指定应用，并在应用内监听

// 应用A
send('AppB', 'testEvent', 'helloWorld') // 发送自定义事件 testEvent到AppB, 携带数据 'helloWorld'

// 应用B
addListeners('AppB', 'testEvent', (data) => { // 绑定了匿名函数,将会在该函数执行一次后解除对此事件的监听
    console.log(data) // 'helloWorld'
})

同时发送到多个指定应用

// 应用A
send(['AppB','AppC'], 'testEvent', 'helloWorld') // 发送自定义事件 testEvent到AppB和AppC, 携带数据 'helloWorld'

// 应用B
addListeners('AppB', 'testEvent', (data) => {
    console.log(data) // 'helloWorld'
})

// 应用C
addListeners('AppC', 'testEvent', (data) => {
    console.log(data) // 'helloWorld'
})

绑定具名函数

const handleTestEvent = (data) => {
  console.log(data)
}

addGlobalListener('testEvent', handleTestEvent) // 监听全局的testEvent事件
removeGlobalListener('testEvent', handleTestEvent) // 解除绑定

addListeners('App1', 'testEvent', handleTestEvent) // 监听发送给App1的testEvent事件
removeListeners('App1', 'testEvent', handleTestEvent) // 解除绑定

注意事项

• send与addListeners支持同时向多个应用发送事件，因此可通过填入所有应用名称来实现全局发送效果，但其性能开销更大，建议使用sendGlobal与addGlobalListener

• 应用间通信未进行隔离，可在应用A内监听到发送给应用B的数据

• 参数appName相当于事件作用域，不同作用域下事件名称不共享，因此，可以在不同appName下使用相同的eventName

  示例：

  // App1中的 testEvent 与App2中的 testEvent 并不冲突，因此可以同时发送或监听此事件
  send('App1', 'testEvent', 'Hello-App1')
    
  send('App2', 'testEvent', 'Hello-App2')
    
  // 监听
  const handler = (data) => {
  	console.log(data)
  }
    
  addListeners('App1', 'testEvent', handler) // 控制台：'Hello-App1'
  addListeners('App2', 'testEvent', handler) // 控制台：'Hello-App2'