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 普通对象
| 特性 | Map |
普通对象 {} |
|---|---|---|
| 键的类型 | 任意类型（字符串、数字、对象等） | 只能是字符串或 Symbol |
| 迭代顺序 | 按插入顺序 | 不保证顺序（ES6+ 按插入顺序，但非所有环境支持） |
| 性能 | 读写操作 O (1)，适合频繁增删 | 大规模数据时性能下降 |
| API | 丰富（get、set、has、delete 等） |
需手动实现类似功能 |
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. 注意事项
-
内存管理：动态注册的函数可能导致内存泄漏，需在组件销毁时清理：
typescript
aboutToDisappear() { this.functionMap.clear(); // 清空 Map } -
this 指向问题 ：使用箭头函数确保
this指向正确：typescript
// 正确：箭头函数保留 this 上下文 this.functionMap.set('click', () => this.handleClick()); // 错误：普通函数的 this 可能指向全局对象 this.functionMap.set('click', this.handleClick); -
性能考虑：对于少量固定函数，直接使用对象可能更简单：
typescript
const handlers = { click: () => console.log('点击'), longPress: () => console.log('长按') };
总结
Map<string, Function> 在鸿蒙开发中常用于：
- 动态注册和调用事件处理函数。
- 实现命令模式或插件系统。
- 组件间松耦合通信。
相比普通对象，Map 提供了更强大的类型安全和 API 支持，适合需要频繁增删改查函数的场景。合理使用可以提高代码的可维护性和扩展性。