前端枚举类型的应用

后端中经常会定义大量的枚举值enum，而前端往往收到后端给的枚举值后，仅仅写个注释，前端代码中到处都是status > 1或type === 3之类的魔法代码，有些人连注释都没有，让接手者面对直接这些条件判断一头雾水。所以前端定义枚举类型是一定要做的。

1. JAVA枚举示例

public enum UserStatusEnum {
    /**
     * 用户状态枚举
     */
    UNKNOW(0, "未知"),
    NORMAL(1, "正常"),
    ;
    private int status;
    private String description;

    UserStatusEnum(int status, String description) {
        this.status = status;
        this.description = description;
    }
}

public enum ActivityEnum {
    // 活动
    KILL("10", "秒杀"),
    FLASH_SALE("11", "限时优惠"),
    ;

    private String activity;
    private String remark;

    ActivityEnum(String activity, String remark) {
        this.activity = activity;
        this.remark = remark;
    }
}

2. 前端枚举探索

肯定要定义一个枚举文件，没必要像后端一样，一个枚举一个文件。前端可以将所有枚举放到一个文件中，除非枚举太多，可进行拆分成多个文件。

2.1 创建枚举文件

创建在/src/common目录下enum.js文件

2.2 将项目中用到的所有枚举写在enum.js文件中

export const SmsTypeEnum = {
  REGISTER: { name: 'REGISTER', label: '注册验证码' },
  FORGET_PASSWORD: { name: 'FORGET_PASSWORD', label: '忘记密码验证码' },
  UPDATE_PHONE: { name: 'UPDATE_PHONE', label: '修改手机验证码' },
}

export const FlashSaleSceneEnum = {
  HOME: 0,
  MENU: 1,
  PAGE: 2,
}

export const ActivityEnum = {
  // 活动
  KILL: '10', // "秒杀"),
  FLASH_SALE: '11', // "限时优惠"),
}

export const PromotionEnum = {
  // 优惠
  COUPON: '40', // "优惠券"),
  COIN_REWARD: '41', // "积分奖励"),
  COIN_DEDUCTION: '42', // "积分抵扣"),
  ALLOWANCE: '43', // "购物津贴"),
  CONCESSION: '44', // "满减"),
  PACKAGES: '45', // "套餐"),
}

export const FreightTypeEnum = {
  WEIGHT: 0,
  COUNT: 1,
}

2.3 枚举的使用

import { ActivityTypeEnum } from '@/common/enum.js'

<div v-if="item.status < ActivityTypeEnum.DISABLED">编辑</div>

if(item.status < ActivityTypeEnum.DISABLED){
    console.log("没作废，可编辑")
}

3. 使用过程中遇到的问题

枚举是否要和后端一样，定义值value和描述label？

export const ActivityStatusEnum = {
  ACTIVE: {value: 1, label: "进行中"},
  DISABLED: {value: 2, label: "已禁用"},
}

一开始使用时，觉得应该要和后端一样，定义值value和描述label，但后来在实践过程中发现代码有点冗长,并且label往往用不到

item.status < ActivityTypeEnum.DISABLED.value

所以后来全部就采用精简的枚举定义，只取值。但会在值后面写上注释

export const ActivityStatusEnum = {
  ACTIVE: 1, // 进行中
  DISABLED: 2, // 已禁用
}

item.status < ActivityTypeEnum.DISABLED

当需要进行枚举值的描述的映射时，可以再定义一个ActivityStatusList

export const ActivityStatusList = [
  '',
  '进行中',
  '已禁用'
]

当枚举值特别大时，可以定义一个ActivityStatusMap

export const ActivityStatusMap = {
  10003: '进行中',
  10004: '已禁用'
}

当枚举值需要作为select,radio,checkbox的选项时，可以定义一个ActivityStatusOption

export const ActivityStatusOption = [
  {value: 1, label: "进行中"},
  {value: 2, label: "已禁用"},
]

3. 前端枚举命名规则

枚举对象命名:
ActivityStatusEnum、ActivityStatusList、ActivityStatusMap、ActivityStatusOption

• XxxEnum: 表示值value的枚举
• XxxList: 表示数组label的枚举
• XxxMap: 表示对象label的枚举
• XxxOption: 表示数组对象的value-label枚举

枚举对象中的键key命名：
全大写

export const ActivityStatusEnum = {
  ACTIVE: 1, // 进行中
  DISABLED: 2, // 已禁用
}

命名规范的好处，让人直接知道此对象的作用；ide全局搜索时，可以快速定位此对象；ide有智能提示，直接点击能跳转到定义处等；