前端代码中应该避免直接使用接口返回的枚举值: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包,直接下载使用即可
参考