如何优雅地在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)
}

这种代码,后人维护根本无非理解 12 这种数字代表的是什么意义,导致维护困难,难于理解业务逻辑等

  • 枚举语义化

我们对此加以改造

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中使用枚举定义

本文采用 CC BY-NC-SA 3.0 Unported 协议进行许可
本文链接: https://www.ahwgs.cn/how-to-use-enum.html