鸿蒙app 开发中的 map 映射方式和用法

Map<string, Function> 在鸿蒙 App 开发中的用法

在鸿蒙 App 开发中，functionMap: Map<string, Function> = new Map() 定义了一个字符串到函数的映射。这是 TypeScript 中 Map 类型的典型应用，用于动态存储和调用函数。

1. 基本含义

• Map<string, Function>：创建一个 Map 对象，其中：
  • 键（Key） 是字符串类型。
  • 值（Value） 是函数类型（Function 表示任意函数）。
• new Map()：初始化一个空的 Map 实例。

2. 核心区别：Map vs 普通对象

3. 在鸿蒙开发中的常见用法

3.1 事件处理函数注册表

动态注册和调用事件处理函数：

typescript

@Component
struct EventComponent {private functionMap: Map<string, Function> = new Map();aboutToAppear() {// 注册事件处理函数this.functionMap.set('click', this.handleClick);this.functionMap.set('longPress', this.handleLongPress);}private handleClick = () => {console.log('处理点击事件');};private handleLongPress = () => {console.log('处理长按事件');};// 根据事件名称调用对应的处理函数dispatchEvent(eventName: string) {const handler = this.functionMap.get(eventName);if (handler) {handler();}}build() {Button('触发事件').onClick(() => this.dispatchEvent('click'))}
}

3.2 命令模式实现

根据命令名称执行对应操作：

typescript

class CommandExecutor {private commandMap: Map<string, Function> = new Map();constructor() {// 注册命令this.commandMap.set('save', this.saveData);this.commandMap.set('delete', this.deleteData);}private saveData = () => {console.log('保存数据');};private deleteData = () => {console.log('删除数据');};executeCommand(command: string) {const executor = this.commandMap.get(command);if (executor) {executor();} else {console.warn('未知命令:', command);}}
}// 使用示例
const executor = new CommandExecutor();
executor.executeCommand('save'); // 输出: 保存数据

3.3 组件间通信

在父组件中维护函数映射，子组件通过名称调用：

typescript

// 父组件
@Component
struct ParentComponent {private functionMap: Map<string, Function> = new Map();aboutToAppear() {this.functionMap.set('refresh', this.refreshData);}private refreshData = () => {console.log('刷新数据');};build() {ChildComponent({ functionMap: this.functionMap })}
}// 子组件
@Component
struct ChildComponent {@Link functionMap: Map<string, Function>;build() {Button('触发刷新').onClick(() => {const refresh = this.functionMap.get('refresh');refresh?.();})}
}

4. 关键 API 使用

4.1 添加 / 更新函数

typescript

functionMap.set('key', () => console.log('执行函数'));

4.2 获取函数

typescript

const func = functionMap.get('key');
if (func) func(); // 安全调用

4.3 检查函数是否存在

typescript

if (functionMap.has('key')) {// 执行操作
}

4.4 删除函数

typescript

functionMap.delete('key');

4.5 遍历所有函数

typescript

functionMap.forEach((func, key) => {console.log(`键: ${key}, 函数: ${func.name}`);
});

5. 类型优化

为了更严格的类型检查，可以将 Function 替换为具体的函数类型：

5.1 定义具体的函数类型

typescript

type EventHandler = (event?: Event) => void;class EventManager {private handlers: Map<string, EventHandler> = new Map();registerEvent(name: string, handler: EventHandler) {this.handlers.set(name, handler);}fireEvent(name: string, event?: Event) {const handler = this.handlers.get(name);handler?.(event);}
}

5.2 使用泛型约束返回值类型

typescript

class ApiService {private apiMap: Map<string, () => Promise<any>> = new Map();registerApi(name: string, apiFunc: () => Promise<any>) {this.apiMap.set(name, apiFunc);}async callApi<T>(name: string): Promise<T> {const api = this.apiMap.get(name);if (!api) throw new Error(`API ${name} 未注册`);return api();}
}

6. 注意事项

1. 内存管理：动态注册的函数可能导致内存泄漏，需在组件销毁时清理：

   typescript

   aboutToDisappear() {this.functionMap.clear(); // 清空 Map
   }
   

2. this 指向问题：使用箭头函数确保 this 指向正确：

   typescript

   // 正确：箭头函数保留 this 上下文
   this.functionMap.set('click', () => this.handleClick());// 错误：普通函数的 this 可能指向全局对象
   this.functionMap.set('click', this.handleClick);
   

3. 性能考虑：对于少量固定函数，直接使用对象可能更简单：

   typescript

   const handlers = {click: () => console.log('点击'),longPress: () => console.log('长按')
   };
   

总结

Map<string, Function> 在鸿蒙开发中常用于：

• 动态注册和调用事件处理函数。
• 实现命令模式或插件系统。
• 组件间松耦合通信。

相比普通对象，Map 提供了更强大的类型安全和 API 支持，适合需要频繁增删改查函数的场景。合理使用可以提高代码的可维护性和扩展性。