美文网首页Vue
vue中使用枚举enum

vue中使用枚举enum

作者: 最小栗子 | 来源:发表于2020-04-01 19:42 被阅读0次

由于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

相关文章

  • Python_枚举

    一、枚举 Enum类 Python中所有枚举类型都是enum模块下的Enum类的子类。 枚举中的标识最好全部使用大...

  • vue中使用枚举enum

    由于JavaScript并没有提供enum关键字来建造枚举对象,所以前端一直有很多硬编码,这是非常不能令人容忍的,...

  • 枚举学习

    java enum枚举类 enum(枚举)类介绍 **java枚举类是一组预定义常量的集合,使用enum关键字声明...

  • Enum学习使用

    1.Enum枚举定义 2.枚举使用

  • Java核心类-枚举类

    Java 进阶——枚举enum使用小结及使用枚举替代你的常量类 通过enum定义的枚举类,和其他的class没有任...

  • Rust 编程语言-6-枚举和模式匹配

    6. Enum和Pattern matching 6.1 Enum枚举 IP地址枚举 消息类型枚举:可以看到枚举中...

  • iOS 枚举

    iOS 枚举 使用typedef NS_ENUM 用法: 常用三种方式,普通使用推荐枚举NS_ENUM方式,如果需...

  • Typescript(十二)Enum 枚举类型

    Typescript中的枚举(enum)可以参考C#中的枚举(enum)类型,毕竟都是微软开发的语言。 枚举这个数...

  • TypeScript10(枚举类型)

    在javaScript中是没有枚举的概念TS帮我们定义了枚举这个类型 使用枚举 通过enum关键字定义我们的枚举 ...

  • <转> 通过枚举 enum 来实现单例模式

    转自:通过枚举 enum 来实现单例模式 枚举 通过enum关键字来实现枚举,在枚举中需要注意的有: 枚举中的属性...

网友评论

    本文标题:vue中使用枚举enum

    本文链接:https://www.haomeiwen.com/subject/onaauhtx.html