前端还没用过Enum枚举类？

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

枚举是什么？就是固定的选项，可以列举出来的东西，比如性别枚举（男、女），状态枚举（处理中，已完成，待处置），这些都是固定的枚举类型

代码中也会经常判断某个值等于什么类型，这些都应该拿枚举类型来封装好，提升代码质量

js里面没有专门的enum类型，ts里面倒是有，一般人用得也比较少

这里提供一个简单枚举类型封装

export default class Enum {

    list = [];
    constructor() {}

    static init() {
        let obj = new this();
        obj.initAddData();
        return obj;
    }

    static getValues() {
        return this.init().getAllValue();
    }

    getAllValue() {
        return this.list;
    }

    static getValueByIndex(index) {
        return this.init().getValueByKey(index);
    }

    getValueByKey(key) {
        return this.getAllValue().find(item => {
            return item.id == key;
        }).name;
    }

    add(index, val) {
        this.list.push({
            id: index,
            name: val
        });
    }



    initAddData() {}
}

这是一个基础类型，要使用的话，比如定义一个性别枚举

export class SexEnum extends Enum{
    static BOY = 1;
    static GIRL = 2;
    initAddData() {
        this.add(SexEnum.BOY,'男');
        this.add(SexEnum.GIRL,'女');
    }
}

那如何使用呢？

一般有3中方式

1. 判断类型
2. 获取枚举列表
3. 获取某个枚举的描述

      if(val == SexEnum.BOY){
        //判断值是否等于什么
      }
      
      //获取列表，一般用于下拉选择使用
      this.list = SexEnum.getValues();
      
      
      //枚举值获取对应的描述，一般用于详情、列表回显字段
      this.name = SexEnum.getValueByIndex(val);

业务中一般有很多枚举，列如项目中某个模块相关的枚举单独放一个文件或一个枚举类一个文件

//CaseEnum.js case模块相关枚举

export class CrossCasePhaseEnum extends Enum {
  static ACCEPT = 2;
  static FILE = 4;
  static DISPATCH = 6;
  static DISPOSE = 8;
  static CHECK = 13;
  static CLOSE = 14;
  static ARCHIVE = 101;
  static INVALID = 102;
  static DELAY = 103;


  initAddData() {
    this.add(CrossCasePhaseEnum.ACCEPT, "受理阶段");
    this.add(CrossCasePhaseEnum.FILE, "立案阶段");
    this.add(CrossCasePhaseEnum.DISPATCH, "派遣阶段");
    this.add(CrossCasePhaseEnum.DISPOSE, "处置阶段");
    this.add(CrossCasePhaseEnum.CHECK, "核查阶段");
    this.add(CrossCasePhaseEnum.CLOSE, "结案阶段");
    this.add(CrossCasePhaseEnum.ARCHIVE, "存档阶段");
    this.add(CrossCasePhaseEnum.INVALID, "作废阶段");
    this.add(CrossCasePhaseEnum.DELAY, "缓办阶段");
  }
}

export class ReplyAuthResultEnum extends Enum {
  static PASS = 1;
  static FAIL = 2;

  initAddData() {
    this.add(ReplyAuthResultEnum.PASS, "授权");
    this.add(ReplyAuthResultEnum.FAIL, "不授权");
  }
}

总结

虽然枚举类很简单，但是大大提升了我们代码的可阅读性、维护性等