第六章（原理篇） 微前端间的通信机制

文章目录

• 微前端间的通信机制
• • 通信需求
  • 常用的通信方式
  • • [1. CustomEvent](#1. CustomEvent)
    • [2. Redux](#2. Redux)
    • [3. 消息总线（Message Bus）](#3. 消息总线（Message Bus）)
    • [4. 本地存储（LocalStorage/SessionStorage）](#4. 本地存储（LocalStorage/SessionStorage）)
    • [5. 跨文档通信（PostMessage）](#5. 跨文档通信（PostMessage）)
  • 最佳实践与注意事项
  • 案例分析

微前端间的通信机制

微前端架构是一种将多个小型前端应用组合成一个整体应用的架构风格。在微前端环境中，各个子应用是相互独立的，它们可以有自己的框架、库和生命周期，但同时它们又需要相互通信以协同工作。因此，通信机制在微前端架构中扮演着至关重要的角色。

通信需求

在微前端架构中，通信需求通常包括以下几个方面：

1. 跨应用状态管理：子应用之间可能需要共享某些状态，如用户认证状态、全局配置等。
2. 事件通知：一个子应用可能需要在某个事件发生时通知其他子应用。
3. 服务共享：子应用之间可能需要共享某些服务，如数据获取、缓存管理等。
4. UI协同：在处理用户界面交互时，不同子应用可能需要协同响应，以提供流畅的用户体验。

常用的通信方式

1. CustomEvent

CustomEvent 是一种浏览器提供的原生事件通信方式。通过自定义事件，子应用可以触发事件并传递数据，其他子应用可以监听这些事件并作出响应。

示例：

子应用A触发事件：

const event = new CustomEvent('customEvent', { detail: { message: 'Hello from App A!' } });
window.dispatchEvent(event);

子应用B监听事件：

window.addEventListener('customEvent', (e) => {
  console.log(e.detail.message); // 输出 "Hello from App A!"
});

2. Redux

Redux 是一个 JavaScript 状态管理库，它提供了可预测化的状态管理。在微前端环境中，可以通过共享 Redux store 来实现子应用之间的通信。

示例：

首先，需要设置一个共享的 Redux store。然后，子应用可以通过 Redux 提供的 API 来读取和更新状态。

// 共享 store
import { createStore } from 'redux';
const rootReducer = (state = {}, action) => {
  // 处理 action 并返回新的 state
};
const store = createStore(rootReducer);

// 子应用 A
store.dispatch({ type: 'ACTION_FROM_APP_A', payload: 'Data from App A' });

// 子应用 B
store.subscribe(() => {
  console.log(store.getState()); // 获取最新状态
});

3. 消息总线（Message Bus）

消息总线是一个中央通信枢纽，子应用可以通过它发布和订阅消息。这种方式解耦了子应用之间的直接依赖，使得通信更加灵活。

实现示例：

可以使用第三方库如 pubsub-js 来实现消息总线。

// 子应用 A
import PubSub from 'pubsub-js';
PubSub.publish('MESSAGE_FROM_APP_A', { data: 'Hello from App A!' });

// 子应用 B
import PubSub from 'pubsub-js';
PubSub.subscribe('MESSAGE_FROM_APP_A', (msg, data) => {
  console.log(data.data); // 输出 "Hello from App A!"
});

4. 本地存储（LocalStorage/SessionStorage）

虽然本地存储不是专门用于通信的机制，但子应用可以通过读写本地存储来间接通信。这种方式适用于不需要实时响应的场景。

示例：

子应用A写入数据：

localStorage.setItem('dataFromAppA', 'Hello from App A!');

子应用B读取数据：

const data = localStorage.getItem('dataFromAppA');
console.log(data); // 输出 "Hello from App A!"

5. 跨文档通信（PostMessage）

window.postMessage 允许跨窗口通信，包括跨域通信（在遵守同源策略的情况下）。在微前端中，可以用来实现子应用之间的安全通信。

示例：

子应用A发送消息：

window.parent.postMessage({ message: 'Hello from App A!' }, '*');

父应用或子应用B接收消息：

window.addEventListener('message', (event) => {
  if (event.origin === 'http://expected-origin.com') {
    console.log(event.data.message); // 输出 "Hello from App A!"
  }
});

最佳实践与注意事项

1. 明确通信边界：在设计通信机制时，应明确哪些数据需要共享，哪些事件需要通知，以避免不必要的复杂性和性能开销。
2. 保持通信简洁：尽量使用简洁明了的数据结构和消息格式，以降低理解和维护的成本。
3. 确保通信安全 ：在使用如 postMessage 之类的跨域通信方式时，务必验证消息的来源，以防止潜在的安全风险。
4. 考虑性能影响：频繁的跨应用通信可能会影响应用的性能，因此需要权衡通信频率和数据量。
5. 选择合适的通信方式：不同的通信方式有各自的优缺点，应根据具体需求选择最合适的通信方式。

案例分析

假设有一个电商网站，采用了微前端架构，包含商品列表、购物车和用户中心等子应用。这些子应用之间需要进行以下通信：

• 商品列表需要将选中的商品添加到购物车。
• 购物车需要实时显示商品数量和总价。
• 用户中心需要显示用户的登录状态。

在这个案例中，可以采用以下通信方式：

• 商品列表与购物车之间的通信可以通过 Redux 或消息总线来实现。当用户在商品列表中选择商品时，可以触发一个动作或发布一个消息，购物车子应用监听这个动作或消息，并更新购物车的状态。
• 购物车与用户中心之间的通信可以通过 CustomEvent 来实现。购物车可以在商品数量或总价发生变化时触发一个自定义事件，用户中心监听这个事件，并更新用户的购物车状态显示。
• 用户中心的登录状态可以通过本地存储来共享。当用户登录或登出时，用户中心可以更新本地存储中的登录状态，其他子应用可以从本地存储中读取这个状态，并根据需要更新用户界面。

通过这种方式，各个子应用可以协同工作，提供流畅的用户体验，同时保持各自的独立性和可维护性。