在 JavaScript 中，我們經常需要使用枚舉來表示一組相關的常量。然而，JavaScript 并沒有內置的枚舉類型。本文將介紹如何實現一個功能強大的枚舉類，不僅支持基本的枚舉功能，還能為每個枚舉項添加中文說明。
枚舉類的實現
首先，讓我們看看我們的 Enum 類的完整實現：
class Enum {
constructor(enumData, startValue = 0) {
this.keys = [];
this.values = [];
this.descriptions = {};
if (typeof enumData === 'object' && !Array.isArray(enumData)) {
// 如果傳入的是對象
Object.entries(enumData).forEach(([key, value]) => {
if (typeof value === 'object' && value !== null) {
this.keys.push(key);
this.values.push(value.value);
this.descriptions[key] = value.description || '';
} else {
this.keys.push(key);
this.values.push(value);
}
});
} else {
// 如果傳入的是獨立參數
this.keys = Array.isArray(enumData) ? enumData : Array.from(arguments);
}
let nextValue = startValue;
this.keys.forEach((key, index) => {
if (this.values[index] !== undefined && typeof this.values[index] === 'number') {
this[key] = this.values[index];
nextValue = Math.max(nextValue, this.values[index] + 1);
} else {
this[key] = nextValue++;
}
});
// 更新 values 數組以反映實際使用的值
this.values = this.keys.map(key => this[key]);
return this;
}
toString() {
return JSON.stringify(this.toObject());
}
toObject() {
const rObject = Object.create(null);
this.keys.forEach(key => {
rObject[key] = {
value: this[key],
description: this.descriptions[key] || ''
};
});
return rObject;
}
getVal(key) {
return this[key] !== undefined ? this[key] : false;
}
getKey(value) {
const key = this.keys.find(k => this[k] === value);
return key !== undefined ? key : false;
}
getDescription(key) {
return this.descriptions[key] || '';
}
}
主要特性
- 靈活的構造方法：支持對象形式和獨立參數形式的輸入。
- 自動值分配：可以指定起始值，自動為未指定值的枚舉項分配值。
- 中文說明支持：可以為每個枚舉項添加描述。
-
方便的方法：提供了
getVal、getKey和getDescription等方法，方便操作枚舉。
使用示例
讓我們看看如何使用這個 Enum 類：
import Enum from './Enum';
// 使用對象形式創建 PositionEnumType，包含中文說明
const PositionEnumType = new Enum({
POSITION_LIST_DOUBLE_COLUMN: { value: 1, description: '職位列表（雙列）' },
COMPANY_LIST_WITH_POSITIONS: { value: 2, description: '公司列表（公司+職位）' },
POSITION_LIST_SINGLE_COLUMN: { value: 3, description: '職位列表（單列）' },
FQA_LIST: { value: 4, description: '問答列表' },
VOTE_LIST: { value: 5, description: '投票組件' },
IMAGE_LIST: { value: 6, description: '圖片列表' },
COMPANY_LOGO_LIST: { value: 7, description: '公司logo列表' },
});
// 使用獨立參數形式創建 CustomBackgroundType，起始值為3
const CustomBackgroundType = new Enum('CLOSED', 'OPEN', 'NOT_NEEDED', 3);
// 測試 PositionEnumType
console.log('PositionEnumType:');
console.log(PositionEnumType.POSITION_LIST_DOUBLE_COLUMN); // 輸出: 1
console.log(PositionEnumType.getDescription('POSITION_LIST_DOUBLE_COLUMN')); // 輸出: 職位列表（雙列）
console.log('\nPositionEnumType as object:');
console.log(JSON.stringify(PositionEnumType.toObject(), null, 2));
// 測試 CustomBackgroundType
console.log('\nCustomBackgroundType:');
console.log(CustomBackgroundType.CLOSED); // 輸出: 3
console.log(CustomBackgroundType.OPEN); // 輸出: 4
console.log(CustomBackgroundType.NOT_NEEDED); // 輸出: 5
// 測試 getVal 和 getKey 方法
console.log('\nTesting getVal and getKey methods:');
console.log(PositionEnumType.getVal('IMAGE_LIST')); // 輸出: 6
console.log(PositionEnumType.getKey(6)); // 輸出: 'IMAGE_LIST'
console.log(PositionEnumType.getDescription('IMAGE_LIST')); // 輸出: 圖片列表
在實際應用中使用枚舉
枚舉在實際應用中非常有用，特別是在處理固定的選項集合時。以下是一個使用枚舉的實際例子：
function getPositionTypeName(type) {
const key = PositionEnumType.getKey(type);
return key ? PositionEnumType.getDescription(key) : '未知類型';
}
console.log(getPositionTypeName(PositionEnumType.IMAGE_LIST)); // 輸出: 圖片列表
console.log(getPositionTypeName(10)); // 輸出: 未知類型
在這個例子中，我們定義了一個函數 getPositionTypeName，它接受一個職位類型的值，并返回相應的中文描述。這在處理用戶界面或生成報告時特別有用。
枚舉的優勢
- 代碼可讀性：使用枚舉可以讓代碼更加清晰和自解釋。
- 類型安全：雖然 JavaScript 不是強類型語言，但使用枚舉可以在一定程度上提高類型安全性。
- 維護性：集中管理常量，便于后期維護和修改。
- 國際化支持：通過添加描述，可以輕松支持多語言。
結論
通過實現這個自定義的 Enum 類，我們不僅在 JavaScript 中模擬了枚舉的行為，還增加了對中文描述的支持。這個實現既保持了簡單性，又提供了足夠的靈活性，可以在各種場景下使用。
在實際項目中，這種枚舉的實現可以大大提高代碼的可讀性和可維護性，特別是在處理復雜的業務邏輯和用戶界面時。通過為每個枚舉項添加描述，我們還可以輕松地在用戶界面中顯示友好的中文說明，提升用戶體驗。
希望這個實現能夠幫助你在 JavaScript 項目中更好地管理和使用枚舉類型！
