如何在前端优雅地使用枚举
简单的方案
在前端开发中我们经常遇到这样一种情况:假设我们要渲染一个订单列表,后端返回的数据中包含这样一个字段:
// 订单状态
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,对应的就是订单状态的中文文本,可以直接拿来渲染!
通过创建这个管理者对象,我们不仅实现了对枚举值的封装和隔离,还很大程度地增加了它的扩展性和灵活性,建议大家可以在日常开发中尝试使用它。
应用优化
前端代码中应该避免直接使用接口返回的枚举值: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
优化后实现的代码,预留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)
},
}
}
上一篇: C# 队列(Queue)简单易用-2.
下一篇: Typescript 枚举类型入门
推荐阅读
-
如何在前端优雅地使用枚举
-
如何在项目中优雅地使用枚举
-
如何在 Java 中优雅地使用枚举枚举
-
SpringBoot 实用:优雅地使用枚举参数
-
Netflix 的前端基础架构如何优雅地走向统一
-
如何在 vue 项目中优雅地使用 v-图表并自定义工具提示和滚动条设置
-
纯干货分享 | 研发效能提升——敏捷需求篇-而敏捷需求是提升效能的方式中不可或缺的模块之一。 云智慧的敏捷教练——Iris Xu近期在公司做了一场分享,主题为「敏捷需求挖掘和组织方法,交付更高业务价值的产品」。Iris具有丰富的团队敏捷转型实施经验,完成了企业多个团队从传统模式到敏捷转型的落地和实施,积淀了很多的经验。 这次分享主要包含以下2个部分: 第一部分是用户影响地图 第二部分是事件驱动的业务分析Event driven business analysis(以下简称EDBA) 用户影响地图,是一种从业务目标到产品需求映射的需求挖掘和组织的方法。 在软件开发过程中可能会遇到一些问题,比如大家使用不同的业务语言、技术语言,造成角色间的沟通阻碍,还会导致一些问题,比如需求误解、需求传递错误等;这会直接导致产品的功能需求和要实现的业务目标不是映射关系。 但在交付期间,研发人员必须要将这些需求实现交付,他们实则并不清楚这些功能需求产生的原因是什么、要解决客户的哪些痛点。研发人员往往只是拿到了解决方案,需要把它实现,但没有和业务侧一起去思考解决方案是否正确,能否真正的帮助客户解决问题。而用户影响地图通常是能够连接业务目标和产品功能的一种手段。 我们在每次迭代里加入的假设,也就是功能需求。首先把它先实现,再逐步去验证我们每一个小目标是否已经实现,再看下一个目标要是什么。那影响地图就是在这个过程中帮我们不断地去梳理目标和功能之间的关系。 我们在软件开发中可能存在的一些问题 针对这些问题,我们如何避免?先简单介绍做敏捷转型的常规思路: 先做团队级的敏捷,首先把产品、开发、测试人员,还有一些更后端的人员比如交互运维的同学放在一起,组成一个特训团队做交付。这个团队要包含交付过程中所涉及的所有角色。 接着业务敏捷要打通整个业务环节和研发侧的一个交付。上图中可以看到在敏捷中需求是分层管理的,第一层是业务需求,在这个层级是以用户目标和业务目标作为输入进行规划,同时需要去考虑客户的诉求。业务人员通过获取到的业务需求,进一步的和团队一起将其分解为产品需求。所以业务需求其实是我们真正去发布和运营的单元,它可以被独立发布到我们的生产环境上。我们的产品需求其实就是产品的具体功能,它是我们集成和测试的对象,也就是我们最终去部署到系统上的一个基本单元。产品需求再到了我们的开发团队,映射到迭代计划会上要把它分解为相应的技术任务,包括我们平时所说的比如一些前端的开发、后端的开发、测试都是相应的技术任务。所以业务敏捷要达到的目标是需要去持续顺畅高质量的交付业务价值。 将这几个点串起来,形成金字塔结构。最上层我们会把业务目标放在整个金字塔的塔尖。这个业务目标是通过用户的目标以及北极星指标确立的。确认业务目标后再去梳理相应的业务流程,最后生产。另外产品需求包含了操作流程和业务规则,具需求交付时间、工程时间以及我们的一些质量标准的要求。 谈到用户影响的地图,在敏捷江湖上其实有一个传说,大家都有一个说法叫做敏捷需求的“任督二脉”。用户影响地图其实就是任脉,在黑客马拉松上用过的用户故事地图其实叫督脉。所以说用户影响地图是在用户故事地图之前,先帮我们去梳理出我们要做哪些东西。当我们真正识别出我们要实现的业务活动之后,用户故事地图才去梳理我们整个的业务工作流,以及每个工作流节点下所要包含的具体功能和用户故事。所以说用户影响地图需要解决的问题,我们包括以下这些: 首先是范围蔓延,我们在整张地图上,功能和对应的业务目标是要去有一个映射的。这就避免了一些在我们比如有很多干系人参与的会议上,那大家都有不同想法些立场,会提出很多需求(正确以及错误的需求)。这个时候我们会依据目标去看这些需求是否真的是会影响我们的目标。 这里提到的错误需求,比如是利益相关的人提出的、客户认为产品应该有的、某个产品经理需求分析师认为可以有的....但是这些功能在用户影响地图中匹配不到对应目标的话,就需要降低优先级或弃掉。另外,通常我们去制定解决方案的时候,会考虑较完美的实现,导致解决方案括很多的功能。这个时候关键目标至关重要,会帮助我们梳理筛选、确定优先级。 看一下用户影响到地图概貌 总共分为一个三层的结构: 第一层why,你的业务目标哪个是最重要的,为什么?涉及到的角色有哪些? 第二层how ,怎样产生影响?影响用户角色什么样的行为? (不需要去列出所有的影响,基于业务目标) 第三层what,最关键的是在梳理需求时不需一次把所有细节想全,这通常团队中经常遇到的问题。 我们用这个例子来看一下 这是一个客服中心的影响地图,业务目标是 3个月内不增加客服人数的前提下能支持1.5倍的用户数。此业务目标设定是符合 smart 原则的,specific非常的具体,miserable 是可以衡量的,action reoriented是面向活动的, real list 也是很实际的。 量化的目标会指引我们接下来的行动,梳理一个业务目标,尽量去量化,比如 :我们通过打造一条什么样的流水线,能够提高整个部署的效率,时间是原来的 1/2 。这样才是一个能量化的有意义的目标。 回到这幅图, how 层级识别出来的内容,客服角色:想要对它施加的影响,把客户引导到论坛上,帮助客户更容易的跟踪问题,更快速的去定位问题。初级用户:方论坛上找到问题。高级用户:在论坛上回答问题。通过我们这些用户角色,进行活动,完成在不增加客户客服人数的前提下支持更多的用户数量。 最后一个层级,才是我们日常接触比较多的真正的功能的特性和需求,比如引导到客户到论坛上,其实这个产品就需要有一个常见问题的论坛的链接。这个层次需要我们团队进一步地在交付,在每个迭代之前做进一步的梳理,细化成相应的用户故事。 这个是云智慧团队中,自己做的影响地图的范例,可以看下整个的层级结构。序号表示优先级。 那我们用户影响地图可以总结为:
-
如何优雅地使用反应路由器 v6 并实施全局保护
-
如何在 Vue 3 中优雅地使用事件总线
-
如何在 Vue3+Vite 项目中优雅地使用 SVG