如何优雅地在JS中使用枚举定义
时间:2022-07-25
本文章向大家介绍如何优雅地在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中使用枚举定义
- 数据层扩展包EFCachingProvider 总结
- Mac配置Maven
- FileSystemWatcher 导致Mono ASP.NET应用程序CPU使用率比较高
- 网卡收包流程
- Android 异步加载图片,使用LruCache和SD卡或手机缓存,效果非常的流畅
- Terminal &zsh &oh-my-zsh配置
- 【Python量化投资】基于网格优化、遗传算法对CTA策略进行参数优化
- 将我的 Windows Phone 应用程序更新到 Windows Phone 8
- 绑定子类的泛型基类,反模式?
- 给创业码农的话--如何提升开发效率
- 基于OEA框架的客户化设计(二) 元数据设计
- 自定义actionbar
- (转)JS算法系列-数组去重
- 基于OEA框架的客户化设计(三) “插件式”DLL
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Qt网络聊天室客户端
- 聊聊java中的StampedLock并发锁原理
- tomcat对AQS的扩展:使用LimitLatch控制连接数
- kubernete编排技术五:DaemonSet
- 深度剖析github上15.1k Star项目:redux-thunk
- 在不影响程序使用的情况下添加shellcode
- [K8s 1.9实践]Kubeadm 1.9 HA 高可用 集群 本地离线镜像部署
- ansible模块command、shell、raw、script
- systemd - CentOS 7进程守护&监控
- Java 8的新特性还不了解?快进来!
- 【Vulnhub】Play XML Entities
- 一切皆是映射:詳解 Kotlin Map 集合類
- 10大高性能开发宝石,我要消灭一半程序员!
- 面试官:你说你会RabbitMQ,那聊聊它的交换机(Exchange)吧
- Kubeadm 1.9 HA 高可用集群本地离线镜像部署【已验证】