前端通信事件：深入理解 Event Bus 与浏览器通信 API

最新推荐文章于 2025-10-06 05:52:17 发布

原创

最新推荐文章于 2025-10-06 05:52:17 发布 · 890 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端

在前端开发中，模块之间的通信是一个重要的课题。本文将从 Event Bus 的基本概念出发，介绍如何使用浏览器的通信 API 实现跨页签通信，并进一步探讨 Vue 和 React 中的通信实现原理。

什么是 Event Bus？

Event Bus 是一种基于发布-订阅模式的通信机制，常用于模块之间的解耦。它是 Node.js 各模块的基石，同时也是前端组件通信的重要手段之一。

基本用法

以下是一个简单的 Event Bus 使用示例：

const eventBus = new EventEmitter();

// 监听事件
eventBus.addListener('testEvent', (message) => {
   
   
  console.log('Received message:', message);
});

// 触发事件
eventBus.emit('testEvent', 'Hello, EventBus!');

跨浏览器页签通信

虽然 Event Bus 本身无法直接实现跨浏览器页签通信，但可以结合浏览器提供的 API 实现跨页签的事件传递。

使用 `localStorage`

localStorage 的 storage 事件可以用来监听其他页签对存储的修改，从而实现通信：

// 在一个页签中触发事件
localStorage.setItem('eventBus', JSON.stringify({
   
    type: 'testEvent', data: 'Hello from tab!' }));

// 在其他页签中监听事件
window.addEventListener('storage', (event) => {
   
   
  if (event.key === 'eventBus') {
   
   
    const