vue中使用枚举enum

由于JavaScript并没有提供enum关键字来建造枚举对象，所以前端一直有很多硬编码，这是非常不能令人容忍的，特别是在vue这种本身就代表优雅的框架开发下。

首先说明，目前是不能使用enum关键字来声明枚举，以下方式是个人自己编写，也是本人觉得较为优雅的方式，由于ES6的限制，声明方式也不完全像java中的enum

-符合枚举特性
-继承Enum类即可
-与java一样的食用方式(声明略有小区别)

第一步，引入Enum.js

将如下Enum.js放入项目，随便想放哪个目录就放哪个目录，依据项目结构而定，我的话放在common下

// 定义symbol
const _flag = Symbol('flag')

/**
 * 枚举类
 * @author liujing
 */
export default class Enum {
    
    constructor(flag) {
        if(flag != undefined && flag == _flag){
            return;
        }
        //获取所有的成员变量
        let objList = this.__proto__.constructor
        //用来装载枚举类型与变量值
        let enumList = [];
        let infoList = [];
        //遍历
        for(let obj in objList){
            //判断对象是否为Array类型，把数组和值进行分离
            if(objList[obj] instanceof Array){
                enumList.push(obj)
            }else {
                infoList.push(obj)
            }
        }
        //创建所有的枚举对象
        for (let i = 0; i < enumList.length; i++) {
            //枚举对象数组值
            let enumObj = objList[enumList[i]]
            //判断数组值是否与变量长度匹配，不匹配直接抛出异常
            if(enumObj.length != infoList.length){
                throw new Error(enumList[i] +' 对象实例化失败:枚举参数不匹配')
            }
            //创建枚举对象，使用falg标志防止重复创建
            let obj = new Enum(_flag)
            //设置枚举值
            for (let x = 0; x < infoList.length; x++) {
                obj[infoList[x]] = enumObj[x]
            }
            //挂载到this上
            console.log(enumList[i])
            this[enumList[i]] = obj
        }
        //防止被修改
        Object.freeze(this)
    }
    
}

第二步，创建一个枚举类

根据个人编码习惯，我喜欢把枚举类单独放在一个文件夹下，这样便于统一管理，比如我就统一放在项目目录下的env文件夹下
举例：创建 UserStatusEnum.js 引入Enum.js，创建UserStatusEnum类并继承Enum类

import Enum from '@/common/Enum.js'

class UserStatusEnum extends Enum {
    
    /**
     * 枚举对象
     */
    static NORMAL = [1, '正常'];
    static DISABLE = [0, '禁用'];
    
    /**
     * 状态编码
     */
    static code;
    
    /**
     * 状态描述
     */
    static desc;
    
}

const obj = new UserStatusEnum()

export default obj

这里要注意的是，枚举对象要使用数组，属性上下顺序对应枚举中数组内容的顺序，比如这里code在desc上面，那么就分别对应NORMAL中的一二位，这点会java的同学应该一目了然，当然，如果有多个填写多个属性便是，如果是没有属性的记得枚举那里也要写成数组形式，只是不填值便可

第三步，使用

import UserInfoEnum from '@/env/UserInfoEnum.js'
console.log(UserInfoEnum)

打开控制台可以看到枚举对象已经创建好了，直接食用便可

image.png

例：

console.log(UserInfoEnum.NORMAL.code) // 1