面试题：TypeScript枚举类型在跨模块共享及反向映射的深度应用

Question

在一个大型前端项目中，有多个模块需要共享一个枚举类型。例如，一个游戏开发项目，有角色模块、地图模块、任务模块等，都需要用到一个表示角色职业的枚举类型：enum CharacterClass {Warrior, Mage, Rogue, Priest}。请阐述如何在不同模块间高效共享这个枚举类型，并且实现从枚举值到枚举名的反向映射（例如，已知CharacterClass.Warrior，能获取到'Warrior'这个字符串），同时要考虑到代码的可维护性和性能。

Answer 1

1. 共享枚举类型

在 JavaScript 中（假设前端项目使用 JavaScript 或 TypeScript），可以使用以下几种方式在不同模块间共享枚举类型：

• TypeScript 模块：如果项目使用 TypeScript，可以将枚举定义在一个单独的 .ts 文件中，例如 CharacterClass.ts：

export enum CharacterClass {
    Warrior,
    Mage,
    Rogue,
    Priest
}

然后在其他模块中导入使用：

import { CharacterClass } from './CharacterClass';

function printCharacterClass(classObj: CharacterClass) {
    console.log(classObj);
}

• JavaScript 常量对象：如果是纯 JavaScript 项目，可以通过定义一个对象来模拟枚举：

// CharacterClass.js
const CharacterClass = {
    Warrior: 0,
    Mage: 1,
    Rogue: 2,
    Priest: 3
};
export default CharacterClass;

在其他模块中导入使用：

import CharacterClass from './CharacterClass';

function printCharacterClass(classObj) {
    console.log(classObj);
}

2. 实现反向映射

• TypeScript 解决方案：在 TypeScript 中，可以借助 keyof typeof 语法来实现反向映射。在 CharacterClass.ts 文件中添加：

export const characterClassMap = new Map<CharacterClass, string>([
    [CharacterClass.Warrior, 'Warrior'],
    [CharacterClass.Mage, 'Mage'],
    [CharacterClass.Rogue, 'Rogue'],
    [CharacterClass.Priest, 'Priest']
]);

export function getCharacterClassName(classObj: CharacterClass): string {
    return characterClassMap.get(classObj) || 'Unknown';
}

在其他模块中导入并使用：

import { CharacterClass, getCharacterClassName } from './CharacterClass';

const myClass = CharacterClass.Warrior;
const className = getCharacterClassName(myClass);
console.log(className);

• JavaScript 解决方案：对于 JavaScript，可以通过一个函数来实现反向映射：

// CharacterClass.js
const CharacterClass = {
    Warrior: 0,
    Mage: 1,
    Rogue: 2,
    Priest: 3
};

const characterClassMap = new Map([
    [CharacterClass.Warrior, 'Warrior'],
    [CharacterClass.Mage, 'Mage'],
    [CharacterClass.Rogue, 'Rogue'],
    [CharacterClass.Priest, 'Priest']
]);

function getCharacterClassName(classObj) {
    return characterClassMap.get(classObj) || 'Unknown';
}

export { CharacterClass, getCharacterClassName };

在其他模块中导入并使用：

import { CharacterClass, getCharacterClassName } from './CharacterClass';

const myClass = CharacterClass.Warrior;
const className = getCharacterClassName(myClass);
console.log(className);

3. 可维护性和性能考虑

• 可维护性：将枚举及其相关操作（如反向映射）封装在独立的模块中，使得代码结构清晰，易于理解和修改。当需要添加或修改枚举值时，只需要在一个地方进行操作。
• 性能：使用 Map 来实现反向映射，其查找时间复杂度为 O(1)，在性能上较为高效。同时，无论是 TypeScript 还是 JavaScript 的模块系统，在多次导入相同模块时，模块只会被执行一次，避免了重复定义带来的性能问题。