企业官网建设流程全解析

微前端子应用间跨框架通信：从CustomEvent到RxJS事件总线

在大型微前端工程中，主应用与多个子应用往往采用不同的技术栈并存（例如：主应用是 React 18，子应用 A 是 Vue 3，子应用 B 是 Angular/Svelte）。

当需要实现跨子应用的业务联动时，例如：

• 子应用 A（订单结算系统）完成了一笔付款，需要通知子应用 B（工作台概览）立即刷新未读通知数量与点数余额；
• 主应用切换了全局“租户 ID”或“项目环境”，所有已挂载的子应用需要同时响应并清空旧缓存。

如果直接通过window.__GLOBAL_BUS__ = new EventEmitter()进行通信，会导致严重的代码耦合、全局命名冲突、无法感知取消订阅以及调试极其困难。

为了实现框架无关、高内聚低耦合、支持背压控制与时序操作的跨应用通信中枢，从原生CustomEvent到基于RxJS的响应式事件总线（Event Bus）是最佳的演进路径。

跨微应用通信方案演进对比

┌─────────────────────────────────────────────────────────────┐ │ 微前端通信三种范式对比 │ ├──────────────────────────────┬──────────────────────────────┤ │ 方案 1: qiankun initGlobalState│ 偏向单键值对同步，缺乏时序管道 │ │ 方案 2: 原生 DOM CustomEvent │ 零第三方依赖，但缺乏复杂组合流 │ │ 方案 3: RxJS 响应式事件总线 │ 顶级类型安全、支持防抖与操作符 │ └──────────────────────────────┴──────────────────────────────┘

方案一：基于原生CustomEvent的极简轻量通信（零依赖）

如果不想在主应用中引入任何外部库，利用浏览器原生的 DOM 事件机制即可实现基本的解耦通信：

// src/bus/nativeEventBus.ts export interface CustomBusEvent<T = any> { type: string; payload: T; } export class NativeEventBus { // 发送事件 public static emit<T>(eventName: string, payload: T) { const event = new CustomEvent(eventName, { detail: payload, bubbles: true, composed: true // 核心：支持穿透 Shadow DOM 沙箱边界！ }); window.dispatchEvent(event); } // 监听事件 public static on<T>(eventName: string, handler: (payload: T) => void): () => void { const listener = (event: Event) => { const customEvent = event as CustomEvent<T>; handler(customEvent.detail); }; window.addEventListener(eventName, listener); // 返回自动清理注销函数 return () => window.removeEventListener(eventName, listener); } }

方案二：基于 RxJS 的企业级类型安全响应式事件总线（推荐）

在复杂业务流中，我们往往需要对事件流进行防抖（debounceTime）、去重（distinctUntilChanged）、记忆回放（ReplaySubject）与异步转换（switchMap）。

使用 RxJS 封装全局事件总线：

// packages/micro-bus/src/index.ts import { Subject, Observable, Subscription } from 'rxjs'; import { filter, map } from 'rxjs/operators'; // 1. 定义全系统的强类型事件枚举与载荷字典 export interface EventMap { 'USER_LOGOUT': { reason: string; timestamp: number }; 'BALANCE_UPDATED': { newCredits: number }; 'PROJECT_SWITCHED': { projectId: string; projectName: string }; 'GLOBAL_TOAST': { message: string; type: 'success' | 'error' }; } export type EventKey = keyof EventMap; export interface AppBusMessage<K extends EventKey = EventKey> { type: K; payload: EventMap[K]; senderAppName: string; timestamp: number; } class MicroAppEventHub { private static instance: MicroAppEventHub; private messageStream$ = new Subject<AppBusMessage<any>>(); private constructor() {} public static getInstance(): MicroAppEventHub { if (!MicroAppEventHub.instance) { // 挂载在主应用全局单例中 const globalScope = typeof window !== 'undefined' ? (window as any) : globalThis; if (!globalScope.__MICRO_APP_BUS_INSTANCE__) { globalScope.__MICRO_APP_BUS_INSTANCE__ = new MicroAppEventHub(); } MicroAppEventHub.instance = globalScope.__MICRO_APP_BUS_INSTANCE__; } return MicroAppEventHub.instance; } // 派发事件 public emit<K extends EventKey>(type: K, payload: EventMap[K], sender = 'unknown') { this.messageStream$.next({ type, payload, senderAppName: sender, timestamp: Date.now() }); } // 监听指定类型的事件流 (支持 RxJS 操作符链式调用) public on<K extends EventKey>(type: K): Observable<EventMap[K]> { return this.messageStream$.pipe( filter((msg): msg is AppBusMessage<K> => msg.type === type), map((msg) => msg.payload) ); } } export const microBus = MicroAppEventHub.getInstance();

在 React 与 Vue 3 子应用中的跨框架优雅消费

1. 在 React 子应用中使用（结合useEffect自动注销）：

// React 子应用组件 import React, { useEffect, useState } from 'react'; import { microBus } from '@packages/micro-bus'; import { debounceTime } from 'rxjs/operators'; export const GlobalProjectHeader = () => { const [currentProject, setCurrentProject] = useState('默认工作区'); useEffect(() => { // 监听项目切换，自动防抖 300ms const subscription = microBus .on('PROJECT_SWITCHED') .pipe(debounceTime(300)) .subscribe((data) => { console.log(`[React 子应用] 收到项目切换通知:`, data); setCurrentProject(data.projectName); }); return () => subscription.unsubscribe(); // 卸载时彻底取消订阅，0 内存泄漏！ }, []); return <div>当前项目: {currentProject}</div>; };

2. 在 Vue 3 子应用中派发事件：

<!-- Vue 3 子应用组件 --> <template> <button @click="handleSwitchProject" class="btn">切换为性能攻坚项目</button> </template> <script setup lang="ts"> import { microBus } from '@packages/micro-bus'; const handleSwitchProject = () => { // 派发事件至全站微应用总线 microBus.emit('PROJECT_SWITCHED', { projectId: 'proj_998', projectName: 'Q3 核心架构优化专项' }, 'vue-subapp'); }; </script>

架构治理收益

1. 类型安全 100% 覆盖：无论在 React 还是 Vue 中，只要写错事件名称或 Payload 属性，TypeScript 编译器立即标红报错；
2. 支持高级时序流控制：借助 RxJS 的debounceTime和filter，轻松防范高频事件导致的重复请求；
3. 彻底解耦主子应用：各微应用只需依赖统一的@packages/micro-bus契约包，彼此之间不需要持有对方的任何 DOM 或实例引用。