前端代码中应该避免直接使用接口返回的枚举值:0、1、2、3…
使用语义化的方式来处理枚举值
定义一个枚举对象创建函数
// 创建枚举对象,用于界面显示转换
function createEnumObject(enums) {
let labels = null
let values = null
return {
getLabels() {
if (!labels) {
labels = enums.map((item) => item.label)
}
return labels
},
getValues() {
if (!values) {
values = enums.map((item) => item.value)
}
return values
},
getLabel(value) {
let index = this.getValues().indexOf(value)
if (index > -1) {
return this.getLabels()[index]
}
},
getValue(label) {
let index = this.getLabels().indexOf(label)
if (index > -1) {
return this.getValues()[index]
}
},
getItem(valueOrLabel) {
let index = this.getValues().indexOf(valueOrLabel)
if (index < 0) {
index = this.getLabels().indexOf(valueOrLabel)
}
if (index > -1) {
return enums[index]
}
},
}
}
创建枚举对象
// 枚举值,用于逻辑判断
const statusEnum = {
// 待支付
WaitPay: 0,
// 已完成
Success: 1,
// 已取消
Cancel: 2,
}
// 枚举值配置,用于属性扩展
const statusEnumConfig = [
{
value: statusEnum.WaitPay,
label: '待支付',
color: 'yellow',
// 支付 取消支付
actions: ['pay', 'cancel'],
},
{
value: statusEnum.Success,
label: '已完成',
color: 'green',
// 查看详情 退款
actions: ['detail', 'return'],
},
{
value: statusEnum.Cancel,
label: '已取消',
color: 'red',
// 查看详情
actions: ['detail'],
},
]
// 枚举值对象,用于数值转换
const statusEnumObj = createEnumObject(statusEnumConfig)
使用示例
console.log(statusEnumObj.getItem(1))
// {
// value: 1,
// label: '已完成',
// color: 'green',
// actions: [ 'detail', 'return' ]
// }
console.log(statusEnumObj.getValue('已完成'))
// 1
// 没有对应的值返回undefined
console.log(statusEnumObj.getValue(1))
// undefined
// 接口返回的真实数值,转换为显示值
console.log(statusEnumObj.getLabel(1))
// 已完成
// 接口返回的数值,做逻辑判断
console.log(statusEnum.Success == 1);
// true
2022-11-22更新
优化后实现的代码,预留config配置,支持key,传参明确
// enum-util.js
// 增强枚举对象
export function createEnumObject(enums, config = null) {
let valueKey = (config ? config.valueKey : null) || 'value'
let labelKey = (config ? config.labelKey : null) || 'label'
return {
getItem(value, key = null) {
for (let item of enums) {
if (item[key || valueKey] == value) {
return item
}
}
},
getColums(key) {
return enums.map((item) => item[key])
},
getColum(column, key, value) {
let item = this.getItem(value, key)
if (item) {
return item[column]
}
},
getLabels() {
return this.getColums(labelKey)
},
getValues() {
return this.getColums(valueKey)
},
getLabel(value, key = null) {
return this.getColum(labelKey, key || valueKey, value)
},
getValue(value, key = null) {
return this.getColum(valueKey, key || labelKey, value)
},
}
}
2022-11-25更新
现在已封装为一个npm包,直接下载使用即可
参考
前端如何优雅地使用枚举