定义枚举的意义和场景
今天遇到了一个场景,页面中有一个下拉框,里面两个选项:国有企业,民营企业。代码结构是这样的
[
{
text: '国有企业',
value: 1
},
{
text: '民营企业',
value: 2
}
]
value是用来存储,text是用来展示。数据回显的时候后端会传value,然后前端根据value选择下拉框的test展示。以前的代码都是使用if···else
来判断value和哪个text匹配。比如
if(value == 1) {
return '国有企业';
}
if(value == 2) {
return '民营企业';
}
之后随着版本迭代,这个下拉框的枚举值发生变化,枚举项增加,代码的维护变得很繁琐,因为这么一个下拉框不止在一处出现,一模一样的代码要写多份。所以决定将这一类使用枚举代码采用和Java一样的枚举类实现。
js定义枚举
js没有枚举类,只能自己定义,我们只要想定义一个普通的类一样,让这个类具有枚举的特征就行了。
let EnterpriseEnum = {
STATE_OWNED_ENTERPIRSE: {text: "国有企业" , value: 1},
PRIVATE_ENTERPIRSE: {text: '民营企业', value: 2),
MIXED_OWNERSHIP_ENTERPRISE: {text: '混合所有制企业', value: 3}
}
上面是定义了枚举选项。相当于一个类中包含其他类,这些其他类就是枚举选项,有text和code两个属性。下面再写一个常用的根据code得到text的方法getTextByCode()
let EnterpriseEnum = {
STATE_OWNED_ENTERPIRSE: {text: "国有企业" , value: 1},
PRIVATE_ENTERPIRSE: {text: '民营企业', value: 2),
MIXED_OWNERSHIP_ENTERPRISE: {text: '混合所有制企业', value: 3}
getTextByCode: function(code){
let text = null;
$.each(EnterpriseEnum, function(index, value) {
if(code == value.value) {
text = value.text;
return false;
}
})
return text;
}
}
知道如何在js中遍历一个类的所有成员变量是getTextByCode
的关键。这里我使用$.each
语法。
在$.each(EnterpriseEnum, function(index, value)
中,$.each
的第一个参数是我们想要遍历的类,index
是指遍历到了第几个成员,从0开始。value
是指遍历到的成员本身。function
中定义遍历的逻辑,如果想要遍历到中途就退出遍历,那就要使用return false
退出。
定义好枚举以后,下拉框的逻辑就可以写成一句话
return EnterpriseEnum.getTextByCode(code);
并且以后枚举还有改动都可以只去修改一处代码,不用改多份。