鸿蒙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 支持，适合需要频繁增删改查函数的场景。合理使用可以提高代码的可维护性和扩展性。