定义枚举的意义和场景

今天遇到了一个场景，页面中有一个下拉框，里面两个选项：国有企业，民营企业。代码结构是这样的

[
	{
		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);

并且以后枚举还有改动都可以只去修改一处代码，不用改多份。