闲谈:如何在js中定义枚举类

本文介绍了如何通过定义枚举来优化JavaScript代码,以处理下拉框中的国有企业和民营企业选项。原来的代码使用if...else判断,随着选项增加导致维护困难。作者提出使用枚举类的方式,定义了一个名为EnterpriseEnum的对象,包含国有企业、民营企业和其他枚举项,并提供getTextByCode()方法根据value获取text。这样做使得代码更加简洁,易于维护。
摘要由CSDN通过智能技术生成

定义枚举的意义和场景

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

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

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

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值