当前位置：首页 > news >正文

Harmony中EventHub实现发布订阅

news 2025/10/8 7:50:25

- 1. EventHub 核心概念
- 2. 案例场景
- 3. 代码实现步骤
- - 步骤1：定义事件类型
  - 步骤2：发布事件（登录模块）
  - 步骤3：订阅事件（购物车模块）
  - 步骤4：订阅事件（个人中心模块）
- 4. EventHub 的底层实现（可选扩展）
- 5. 关键注意事项
- 6. 完整流程图示

1. EventHub 核心概念

发布者（Publisher）：触发事件的模块（如登录模块）。
订阅者（Subscriber）：监听事件的模块（如购物车、个人中心）。
事件（Event）：携带数据的消息对象，通过唯一eventId标识。

2. 案例场景

功能需求：用户登录成功后，购物车模块和个人中心模块需实时更新UI（如显示用户名、刷新数据）。
传统问题：若直接调用购物车/个人中心的方法，会导致模块间强耦合。
EventHub解决方案：登录模块发布“登录成功”事件，其他模块订阅该事件并自主响应。

3. 代码实现步骤

步骤1：定义事件类型

在公共层（Common）中定义事件ID和数据类型：

// common/src/main/ets/event/EventTypes.ets
export const EVENT_USER_LOGIN = 'user_login'; // 事件IDexport interface LoginEventData {userId: string;userName: string;
}

步骤2：发布事件（登录模块）

登录成功后，通过EventHub发布事件：

// features/login/src/main/ets/LoginService.ets
import { EventHub } from '@ohos/baseEvent';
import { EVENT_USER_LOGIN, LoginEventData } from '@common/event/EventTypes';function handleLoginSuccess(userId: string, userName: string) {// 1. 本地处理登录逻辑// ... // 2. 发布事件const eventData: LoginEventData = { userId, userName };EventHub.emit(EVENT_USER_LOGIN, eventData); // 关键发布动作
}

步骤3：订阅事件（购物车模块）

购物车模块初始化时订阅事件：

// features/cart/src/main/ets/CartPage.ets
import { EventHub } from '@ohos/baseEvent';
import { EVENT_USER_LOGIN, LoginEventData } from '@common/event/EventTypes';@Entry
@Component
struct CartPage {@State userName: string = '未登录';aboutToAppear() {// 订阅事件EventHub.on(EVENT_USER_LOGIN, (data: LoginEventData) => {this.userName = data.userName; // 更新UIthis.refreshCartData(data.userId); // 刷新购物车数据});}// 取消订阅（避免内存泄漏）aboutToDisappear() {EventHub.off(EVENT_USER_LOGIN);}build() {Column() {Text(`用户: ${this.userName}`).fontSize(20)// 购物车列表...}}
}

步骤4：订阅事件（个人中心模块）

同理，个人中心模块订阅同一事件：

// features/profile/src/main/ets/ProfilePage.ets
import { EventHub } from '@ohos/baseEvent';
import { EVENT_USER_LOGIN } from '@common/event/EventTypes';@Entry
@Component
struct ProfilePage {@State userName: string = '未登录';aboutToAppear() {EventHub.on(EVENT_USER_LOGIN, (data: LoginEventData) => {this.userName = data.userName;this.loadUserProfile(data.userId);});}aboutToDisappear() {EventHub.off(EVENT_USER_LOGIN);}
}

4. EventHub 的底层实现（可选扩展）

若需自定义EventHub，可在Common层实现：

// common/src/main/ets/utils/EventHub.ets
type Callback<T> = (data: T) => void;class EventHub {private static events: Map<string, Callback<any>[]> = new Map();// 订阅事件static on<T>(eventId: string, callback: Callback<T>) {if (!this.events.has(eventId)) {this.events.set(eventId, []);}this.events.get(eventId)?.push(callback);}// 发布事件static emit<T>(eventId: string, data: T) {const callbacks = this.events.get(eventId);callbacks?.forEach(cb => cb(data));}// 取消订阅static off(eventId: string) {this.events.delete(eventId);}
}export default EventHub;