跳到主要内容

事件通信：邮轮穿舱件管理系统小程序端事件总线实现

概述​

本文档详细分析邮轮穿舱件管理系统小程序端的事件总线（EventBus）实现，重点阐述事件发布订阅模式、跨组件通信机制以及系统架构中的事件流管理。

事件总线核心实现​

EventBus 类设计​

系统采用工厂模式创建事件总线实例，提供完整的事件管理功能：

export default function createBus() {
  return {
    events: {},
    on(event, callback) {
      if (!this.events[event]) this.events[event] = [];
      this.events[event].push(callback);
    },
    off(event, callback) {
      if (!this.events[event]) return;
      if (!callback) this.events[event] = [];
      else {
        const index = this.events[event].indexOf(callback);
        if (index !== -1) this.events[event].splice(index, 1);
      }
    },
    emit(event, ...args) {
      if (this.events[event]) this.events[event].forEach((callback) => callback(...args));
    },
  };
}

引用来源：

类图设计​

classDiagram
    class EventBus {
        -events: Object
        +on(event: string, callback: Function): void
        +off(event: string, callback: Function): void
        +emit(event: string, ...args: any[]): void
    }
    
    class App {
        -globalData: Object
        -eventBus: EventBus
        +setUnreadNum(unreadNum: number): void
        +connect(): void
    }
    
    class MessagePage {
        -currentUser: Object
        -messageList: Array
        +onLoad(): void
        +computeUnreadNum(): number
        +setMessagesRead(userId: string): void
    }
    
    App --> EventBus : contains
    MessagePage --> App : uses

系统架构中的事件流​

全局事件总线初始化​

在应用启动时，事件总线作为全局单例被创建并挂载到App实例上：

// app.js 中的关键代码
App({
  globalData: {
    userInfo: null,
    unreadNum: 0,
    socket: null,
  },
  
  /** 全局事件总线 */
  eventBus: createBus(),
  
  /** 设置未读消息数量 */
  setUnreadNum(unreadNum) {
    this.globalData.unreadNum = unreadNum;
    this.eventBus.emit('unread-num-change', unreadNum);
  },
});

引用来源：

事件发布订阅序列图​

sequenceDiagram
    participant MessagePage as 消息页面
    participant App as 应用实例
    participant EventBus as 事件总线
    participant Subscribers as 订阅组件
    
    MessagePage->>App: setUnreadNum(unreadNum)
    App->>EventBus: emit('unread-num-change', unreadNum)
    EventBus->>Subscribers: 通知所有订阅者
    Subscribers->>Subscribers: 更新UI状态

跨组件通信实现​

1. 事件发布模式​

系统采用集中式的事件发布机制，关键业务状态变更通过事件总线广播：

消息数量更新事件流：

  1. 消息页面接收新消息
  2. 计算未读消息总数
  3. 调用 app.setUnreadNum() 发布事件
  4. 事件总线通知所有订阅组件
// 消息页面中的事件发布
app.setUnreadNum(this.computeUnreadNum());

引用来源：

2. 组件依赖关系​

flowchart TD
    A[消息页面] --> B[应用实例]
    B --> C[事件总线]
    C --> D[导航组件]
    C --> E[个人中心]
    C --> F[其他订阅组件]
    
    style A fill:#e1f5fe
    style B fill:#f3e5f5
    style C fill:#fff3e0

设计模式分析​

观察者模式实现​

事件总线实现了经典的观察者模式：

  • Subject（主题）: EventBus 维护事件订阅列表
  • Observer（观察者）: 各个组件通过 on 方法订阅事件
  • 通知机制: 通过 emit 方法通知所有观察者

单例模式应用​

事件总线在应用中作为全局单例存在，确保所有组件访问的是同一个事件管理实例。

性能优化考虑​

内存管理​

  1. 事件监听器清理: 提供 off 方法用于移除事件监听，防止内存泄漏
  2. 条件性事件发布: 只在有订阅者时执行事件发布逻辑

事件过滤机制​

// 优化的事件发布实现
emit(event, ...args) {
  if (this.events[event]) this.events[event].forEach((callback) => callback(...args));
}

扩展性设计​

事件类型标准化​

系统采用命名约定确保事件类型的一致性：

  • 使用连字符命名法：unread-num-change
  • 事件名称描述具体的业务动作

未来扩展点​

  1. 事件优先级: 可为不同事件设置优先级
  2. 异步事件处理: 支持异步事件处理机制
  3. 事件历史记录: 记录事件发布历史用于调试

索引​

邮轮穿舱件管理系统小程序端的事件总线实现提供了一个轻量级、高效的跨组件通信解决方案。通过观察者模式的设计，系统实现了松耦合的组件交互，支持动态的事件订阅和发布机制。这种设计模式特别适合小程序这种组件化架构的应用场景，为系统的可维护性和扩展性提供了良好基础。

关键技术特点：

  • 简单易用的API设计
  • 内存安全的监听器管理
  • 支持多参数事件传递
  • 全局单例模式确保一致性

推荐使用场景：

  • 全局状态管理（如用户信息、消息数量）
  • 跨页面组件通信
  • 业务逻辑解耦