如何优雅地在JS中使用枚举定义

如何优雅地在JS中使用枚举

为什么使用枚举

去魔法数字
枚举语义化
定义一体化：枚举值和枚举描述写在了一起，不分散
使用方便：无需额外的过滤器

如何解释

去魔法数字

看如下代码

// 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 这种数字代表的是什么意义，导致维护困难，难于理解业务逻辑等

枚举语义化

我们对此加以改造

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

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

通过简单的改造，我们有了一种新的使用方式，事先定义一个对象，每个键对应相关的值，在代码书写中我们可以轻易的理解是状态等于WAIT,ERROR,即等待或失败

但是这样还不够简洁方便，例如：我们需要获取状态为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>当前状态：{STATUS.getDescFromValue(status)}</p>
<p>也可用通过枚举名称获取描述：{STATUS.getDesc('AUDITING')}</p>

关于

由于js没有枚举这一概念，借助JAVA思想，我们编写创建枚举方法

本文首发于:如何在JS中使用枚举定义