如何優(yōu)雅地在JS中使用枚舉

為什么使用枚舉

• 去魔法數(shù)字
• 枚舉語義化
• 定義一體化：枚舉值和枚舉描述寫在了一起，不分散
• 使用方便：無需額外的過濾器

如何解釋

• 去魔法數(shù)字

看如下代碼

// bad
<span v-if="status == 0">審核中</span>
<span v-else-if="status == 1">審核通過</span>
<span v-else-if="status == 2">審核不通過</span>

// bad
if(status===1 || status === 2){
    console.log('statu',status)
}

這種代碼，后人維護根本無非理解 1，2 這種數(shù)字代表的是什么意義，導致維護困難，難于理解業(yè)務邏輯等

• 枚舉語義化

我們對此加以改造

const STATUS = {
    "WAIT":1,
    "ERROR":2
}

if(status===STATUS.WAIT || status === STATUS.ERROR){
    console.log('statu',status)
}

通過簡單的改造，我們有了一種新的使用方式，事先定義一個對象，每個鍵對應相關的值，在代碼書寫中我們可以輕易的理解是狀態(tài)等于WAIT,ERROR,即等待或失敗

但是這樣還不夠簡潔方便，例如：我們需要獲取狀態(tài)為1時的描述

我們可以這樣做：

const STATUS_CONFIG = {
    [STATUS.WAIT]:'審核中',
    [STATUS.ERROR]:'審核失敗'
}

具體使用

<span>STATUS_CONFIG[status]</span>

但是這樣就又面臨一個新問題，每一個定義的值與描述都要分開重寫，這樣造成大量的重復性工作

• 使用方便：無需額外的過濾器

我們自定義一個createEnum方法

/**
 * 枚舉定義工具
 * 示例：
 * const STATUS = createEnum({
 *     AUDIT_WAIT: [1, '審核中'],
 *     AUDIT_PASS: [2, '審核通過']
 * })
 * 獲取枚舉值：STATUS.AUDIT_WAIT
 * 獲取枚舉描述：STATUS.getDesc('AUDIT_WAIT')
 * 通過枚舉值獲取描述：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] || ''
    }
  }
}

下面我們用工具類重寫上述的案例

 const STATUS = createEnum({
    AUDIT_WAIT: [1, '審核中'],
    AUDIT_PASS: [2, '審核通過']
 })
 
if(status===STATUS.WAIT || status === STATUS.ERROR){
    console.log('statu',status)
}

<p>當前狀態(tài)：{STATUS.getDescFromValue(status)}</p>
<p>也可用通過枚舉名稱獲取描述：{STATUS.getDesc('AUDITING')}</p>

關于

由于js沒有枚舉這一概念，借助JAVA思想，我們編寫創(chuàng)建枚舉方法

本文首發(fā)于:如何在JS中使用枚舉定義