如何優(yōu)雅地在JS中使用枚舉
為什么使用枚舉
- 去魔法數(shù)字
- 枚舉語(yǔ)義化
- 定義一體化：枚舉值和枚舉描述寫(xiě)在了一起，不分散
- 使用方便：無(wú)需額外的過(guò)濾器
如何解釋
- 去魔法數(shù)字
看如下代碼
// bad
<span v-if="status == 0">審核中</span>
<span v-else-if="status == 1">審核通過(guò)</span>
<span v-else-if="status == 2">審核不通過(guò)</span>
// bad
if(status===1 || status === 2){
console.log('statu',status)
}
這種代碼，后人維護(hù)根本無(wú)非理解 1，2 這種數(shù)字代表的是什么意義嗅辣，導(dǎo)致維護(hù)困難胚吁，難于理解業(yè)務(wù)邏輯等
- 枚舉語(yǔ)義化
我們對(duì)此加以改造
const STATUS = {
"WAIT":1,
"ERROR":2
}
if(status===STATUS.WAIT || status === STATUS.ERROR){
console.log('statu',status)
}
通過(guò)簡(jiǎn)單的改造，我們有了一種新的使用方式纵东，事先定義一個(gè)對(duì)象，每個(gè)鍵對(duì)應(yīng)相關(guān)的值处嫌，在代碼書(shū)寫(xiě)中我們可以輕易的理解是狀態(tài)等于WAIT,ERROR,即等待或失敗
但是這樣還不夠簡(jiǎn)潔方便栅贴，例如：我們需要獲取狀態(tài)為1時(shí)的描述
我們可以這樣做：
const STATUS_CONFIG = {
[STATUS.WAIT]:'審核中',
[STATUS.ERROR]:'審核失敗'
}
具體使用
<span>STATUS_CONFIG[status]</span>
但是這樣就又面臨一個(gè)新問(wèn)題，每一個(gè)定義的值與描述都要分開(kāi)重寫(xiě)熏迹，這樣造成大量的重復(fù)性工作
- 使用方便：無(wú)需額外的過(guò)濾器
我們自定義一個(gè)createEnum方法
/**
* 枚舉定義工具
* 示例：
* const STATUS = createEnum({
* AUDIT_WAIT: [1, '審核中'],
* AUDIT_PASS: [2, '審核通過(guò)']
* })
* 獲取枚舉值：STATUS.AUDIT_WAIT
* 獲取枚舉描述：STATUS.getDesc('AUDIT_WAIT')
* 通過(guò)枚舉值獲取描述：STATUS.getDescFromValue(STATUS.WAIT)
*
*/
export default function createEnum(definition) {
const strToValueMap = {}
const numToDescMap = {}
for (const enumName of Object.keys(definition)) {
const [value, desc] = definition[enumName]
strToValueMap[enumName] = value
numToDescMap[value] = desc
}
return {
...strToValueMap,
getDesc(enumName) {
return (definition[enumName] && definition[enumName][1]) || ''
},
getDescFromValue(value) {
return numToDescMap[value] || ''
}
}
}
下面我們用工具類重寫(xiě)上述的案例
const STATUS = createEnum({
AUDIT_WAIT: [1, '審核中'],
AUDIT_PASS: [2, '審核通過(guò)']
})
if(status===STATUS.WAIT || status === STATUS.ERROR){
console.log('statu',status)
}
<p>當(dāng)前狀態(tài)：{STATUS.getDescFromValue(status)}</p>
<p>也可用通過(guò)枚舉名稱獲取描述：{STATUS.getDesc('AUDITING')}</p>
關(guān)于
由于js沒(méi)有枚舉這一概念檐薯，借助JAVA思想，我們編寫(xiě)創(chuàng)建枚舉方法
本文首發(fā)于:如何在JS中使用枚舉定義
