持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第4天,点击查看活动详情
写在前面
不知道大家有没有维护过代码,维护代码简单吗? 那么今天就和大家分享,如何写出优雅的容易维护的代码 本文将以一个代码实例来解析!
需求如下:写出一个option
let options = [
{ label: 'one', value: 0 },
{ label: 'two', value: 1 },
{ label: 'three', value: 2 },
{ label: 'four', value: 3 },
]
复制代码
我们可以看出,这个options
是一个结构体数组,他的每个item
有label
和value
两个属性。
分析一下这样写的缺点
- 难以维护
- 以后新增了,在后面加,有没有想过,代码量很大也许新人找不到
- 或者说
label
和value
中出现乱序之后,导致整个可能需要大改 - 数据太大,页面篇幅大,导致代码可读性差
- 代码中存在魔数(magic number),比如0的意义不明显
- 我们可以用枚举来改进
改进版1:枚举之消除魔数
- 我们就会使用到
TS
的枚举啦!
enum OPTIONS_VALUE {
ONE = 0,
TWO = 1,
THREE = 2,
FOUR = 3
}
enum OPTIONS_LABLE {
ONE = 'one',
TWO = 'two',
THREE = 'three',
FOUR = 'four'
}
// 上面枚举可以另起一个constants文件保存,所以下面的是真正的代码
let options = [
{ label: OPTIONS_LABLE.ONE, value: OPTIONS_VALUE.ONE },
{ label: OPTIONS_LABLE.TWO, value: OPTIONS_VALUE.TWO },
{ label: OPTIONS_LABLE.THREE, value: OPTIONS_VALUE.THREE },
{ label: OPTIONS_LABLE.FOUR, value: OPTIONS_VALUE.FOUR },
]
复制代码
- 很明显地,下面地这种枚举写法可读性有了很大的提升,我们很容易能看出使用了枚举,并且没有魔数,我们很容易知道
label
和value
指的是1,2,3,4,当然实际问题一般不是1,2,3,4.会更加明显。
分析一下这样写的缺点
- 这样写仍然是有缺点的,比如累...
- 对,或者说,这样不优雅!
- 所以,像标题一样,我们用
entries+map
的融入使用让这个过程变成一行代码 - 这里会使用到
jsx
的写法,在React
中就会加{}
,表示我要用js
语法了0.0
改进版2:优雅写法,后续维护不费力
- 我们把
LABEL
改写成结构体,属性用枚举,这样就把结构体和枚举结合起来了 - 结构体可以转换成二维数组就可以
map
了
enum OPTIONS_VALUE {
ONE = 0,
TWO = 1,
THREE = 2,
FOUR = 3
}
const OPTIONS_LABLE = {
[OPTIONS_VALUE.ONE]: 'one',
[OPTIONS_VALUE.TWO]: 'two',
[OPTIONS_VALUE.THREE]: 'three',
[OPTIONS_VALUE.FOUR]: 'four'
}
复制代码
- 那么我们怎么来完成循环呢?
entries
可以帮我们拿到结构体中每一项的属性
和值
,而这就是我们要的,所以下面就可以直接对得到的这个数组直接map
了
let options = Object.entries(OPTIONS_LABLE).map(([value,label])=>({label,value}))
复制代码
- 记得注意地是
map
的参数里面使用了解构
- 返回的时候用了
()
省略了return
- 然后
lable:lable
简写为lable
可以说是很优雅了
是的,一行就搞定了!
补充:我们还可以使用Record来检测是否使用enum值
const OPTIONS_LABLE:Record<OPTIONS_VALUE,string> = {
[OPTIONS_VALUE.ONE]: 'one',
[OPTIONS_VALUE.TWO]: 'two',
[OPTIONS_VALUE.THREE]: 'three',
[OPTIONS_VALUE.FOUR]: 'four'
}
复制代码