标签：enums const 前端 labels value label item 枚举 优雅
在前端开发中我们经常遇到这样一种情况：假设我们要渲染一个订单列表，后端返回的数据中包含这样一个字段：
// 订单状态
orderStatus: 0
后端可能会告诉我们，它对应后端的这样一组值：
{
0: '已完成',
1: '待支付',
2: '已取消'
}
那么我们在前端如何优雅地把后端所返回的值 0 转换成字符串 已完成 呢？这就是本文要讨论的问题。
为了引出我们的方案，我们先来看一个常用但不那么优雅的方案：
一种不够优雅的方案
首先，我们来为这个字段定义一个对象
const orderStatusMapper = {
'0': '已完成',
'1': '待支付',
'2': '已取消'
}
接下来，根据返回的字段值从对象中取出对应的值即可：
orderStatusMapper(String(orderStatus)); // 已完成
得益于JavaScript语法的灵活性，这种方案实现起来特别简单，对于简单的枚举场景算得上一种很好的解决方案。但它也有缺点，我只列举最明显的两点：
- 缺乏灵活性
- 封装性较差，不利于扩展
关于灵活性，我们尝试换一个场景：假设我们现在需要根据中文文本来获取它对应的value，该怎么办呢？我们可能会定义下面这样一个对象：
const orderStatusTextMapper = {
'已完成': 0,
'待支付': 1,
'已取消': 2
}
我相信任何一个有开发经验的开发者看到这样的代码都会嗤之以鼻，毕竟用中文字符串作对象的key实在太疯狂了（尽管这在js中是允许的）！
关于封装姓差，不利于扩展，我们也举一个场景：假设我们需要将 已完成 的文案渲染为绿色，待支付 的渲染为橙色，已取消 的渲染为灰色；并且各个状态对应不同的操作：已完成 的订单可以查看详情 或 下载，待支付 的订单可以 继续支付 或 取消订单，已取消 的订单只支持 查看详情。
面对这个场景，我们定义的那个‘单薄’的对象已经完全不够用了。简单场景看起来很美好，但现实却总是很复杂！
关于这个方案的其他缺点我们不再一一列举，我们接下来介绍一种更加优雅的方案：
更加优雅的方案
历史常识告诉我们，当一个地区变得混乱，多半是管理出了问题，上述问题也一样。为了解决混乱，我们尝试引入一个“管理者”，来管理这个枚举字段。
在实现这个“管理者”之前，我们先来思考这个管理者应该具备哪些能力。这里我们把后端返回的值0,1,2称为value，把对应的中文文本称为label。
首先，它必须能同时具备根据value获取label，以及根据label获取value的能力，为了提供更大的灵活性，它最好可以以数组的形式暴露出所有的value和label，以便我们枚举，于是它的结构大概是这样的（这里只列举了最基本的属性和方法）：
const orderStatusEnumManager = {
values: [0, 1, 2],
labels: ['已完成', '待支付', '已取消'],
getLabelByValue (label) {},
getValueByLabel (value) {},
}
我们定义的这两个get方法的搜索逻辑是：根据传入的value找到它在values数组中的索引，然后取出labels中对应位置的值即可，反之亦然。这样我们就解决了上述第一个不够灵活的问题。
当然，作为一个优雅的解决方案，我们肯定不会一个个手写每个枚举字段的管理者对象？所以我们来定义一个工厂函数：
// 用于构造枚举字段的管理者对象
// name是http传输时枚举值的字段名，根据需要可以不要
function getEnumManager (name, enums) {
const labels = enums.map((item: Enum) => item.label);
const values = enums.map((item: Enum) => item.value);
return {
name,
labels,
values,
enums,
getValueByLabel (label) {
return values[labels.indexOf(label)];
},
getLabelByValue (value: any) {
return labels[values.indexOf(value)];
},
getItemByValueOrLabel (valueOrLabel: string | number | null) {
let index = values.indexOf(valueOrLabel);
if (index < 0) {
index = labels.indexOf((valueOrLabel as string));
}
return enums[index];
},
... // 其他专用取值函数
}
}
现在我们可以这样生成一个管理者对象：
const orderStatusEnum = getEnumManager('orderStatus', [
{ value: 0, label: '已完成' },
{ value: 1, label: '待支付' },
{ value: 2, label: '已取消' }
])
用这个管理者对象，我们可以很容易相互映射value和label：
orderStatusEnum.getLabelByValue(0); // 已完成
orderStatusEnum.getValueByLabel('已完成'); // 0
我们可以很容易地枚举所有label，或者所有value：
<div v-for="label in orderStatusEnum.labels" :key="label">
{{ label }}
</div>
<div v-for="value in orderStatusEnum.values" :key="value">
{{ value }}
</div>
当然它最大的魅力在于非常容易扩展，比如我们上面提到需要给三个值分别显示绿色、橙色和灰色，以及支持不同的操作：
const orderStatusEnum = getEnumManager('orderStatus', [
{ value: 0, label: '已完成', color: green,
operation: ['checkDetail', 'download'] },
{ value: 1, label: '待支付', color: orange,
operation: ['pay', 'cancel'] },
{ value: 2, label: '已取消', color: gray,
operation: ['checkDetail'] }
])
你有两种方式可以获取这里的color和operation的值，一是直接从暴露出的enums属性中提取:
// 查询已完成的颜色值
const value = 0;
const target = orderStatusEnum.enums.find(order =>
order.value === value);
console.log(target ? target.color || '');
还有另外一种方法，我们给管理者对象新增一个用于获取颜色的方法：
function getEnumManager (name, enums) {
const labels = enums.map((item: Enum) => item.label);
const values = enums.map((item: Enum) => item.value);
return {
...
getColorByValueOrLabel (valueOrLabel) {
let index = values.indexOf(valueOrLabel);
if (index < 0) {
index = labels.indexOf((valueOrLabel as string));
}
return enums[index].color;
}
}
}
现在你可以这样获取0或者已完成对应的颜色值：
// 根据value取值
const color = orderStatusEnum.getColorByValueOrLabel(0); // green
// 根据label取值
const color = orderStatusEnum.getColorByValueOrLabel('已完成'); // green
所以，它需要扩展多少功能，取决于你需要添加多少！
我们把上述所有代码封装在一个js文件中，就可以作为全局的工具使用了：
enums.js
// 用于构造枚举字段的管理者对象
// name是http传输时枚举值的字段名，根据需要可以不要
function getEnumManager (name, enums) {
const labels = enums.map((item: Enum) => item.label);
const values = enums.map((item: Enum) => item.value);
return {
name,
labels,
values,
enums,
getValueByLabel (label) {
return values[labels.indexOf(label)];
},
getLabelByValue (value: any) {
return labels[values.indexOf(value)];
},
getItemByValueOrLabel (valueOrLabel: string | number | null) {
let index = values.indexOf(valueOrLabel);
if (index < 0) {
index = labels.indexOf((valueOrLabel as string));
}
return enums[index];
},
... // 其他专用取值函数
}
}
export const orderStatusEnum = getEnumManager('orderStatus', [
{ value: 0, label: '已完成', color: green,
operation: ['checkDetail', 'download'] },
{ value: 1, label: '待支付', color: orange,
operation: ['pay', 'cancel'] },
{ value: 2, label: '已取消', color: gray,
operation: ['checkDetail'] }
]);
export const payTypeEnum = ...
// ...
在组件中使用它非常简单：
import { orderStatusEnum } from '@/utils/enums.js';
...
const tabelData = res.data.map(item => {
// 将字段值映射为label
return Object.assign({}, item, {
label: orderStatusEnum.getLabelByValue(item.orderSataus)
})
})
现在表格的每一项新增了一个字段label，对应的就是订单状态的中文文本，可以直接拿来渲染！
总结
通过创建这个管理者对象，我们不仅实现了对枚举值的封装和隔离，还很大程度地增加了它的扩展性和灵活性，建议大家可以在日常开发中尝试使用它。
标签：enums,const,前端,labels,value,label,item,枚举,优雅 来源： https://blog.csdn.net/qq_41694291/article/details/113683149
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。