乐趣区

关于javascript:如何优雅地在JS中使用枚举定义

jiezi

如何优雅地在 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 中应用枚举定义

退出移动版