如何优雅地在JS中使用枚举定义
Contents
如何优雅地在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中使用枚举定义
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
