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

为什么应用枚举

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

如何解释

  • 去魔法数字

看如下代码

// bad<span v-if="status == 0">审核中</span><span v-else-if="status == 1">审核通过</span><span v-else-if="status == 2">审核不通过</span>
// badif(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中应用枚举定义