后端中經(jīng)常會(huì)定義大量的枚舉值enum，而前端往往收到后端給的枚舉值后，僅僅寫個(gè)注釋，前端代碼中到處都是status > 1或type === 3之類的魔法代碼，有些人連注釋都沒(méi)有，讓接手者面對(duì)直接這些條件判斷一頭霧水。所以前端定義枚舉類型是一定要做的。

1. JAVA枚舉示例

public enum UserStatusEnum {
    /**
     * 用戶狀態(tài)枚舉
     */
    UNKNOW(0, "未知"),
    NORMAL(1, "正常"),
    ;
    private int status;
    private String description;

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

public enum ActivityEnum {
    // 活動(dòng)
    KILL("10", "秒殺"),
    FLASH_SALE("11", "限時(shí)優(yōu)惠"),
    ;

    private String activity;
    private String remark;

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

2. 前端枚舉探索

肯定要定義一個(gè)枚舉文件，沒(méi)必要像后端一樣，一個(gè)枚舉一個(gè)文件。前端可以將所有枚舉放到一個(gè)文件中，除非枚舉太多，可進(jìn)行拆分成多個(gè)文件。

2.1 創(chuàng)建枚舉文件

創(chuàng)建在/src/common目錄下enum.js文件

2.2 將項(xiàng)目中用到的所有枚舉寫在enum.js文件中

export const SmsTypeEnum = {
  REGISTER: { name: 'REGISTER', label: '注冊(cè)驗(yàn)證碼' },
  FORGET_PASSWORD: { name: 'FORGET_PASSWORD', label: '忘記密碼驗(yàn)證碼' },
  UPDATE_PHONE: { name: 'UPDATE_PHONE', label: '修改手機(jī)驗(yàn)證碼' },
}

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

export const ActivityEnum = {
  // 活動(dòng)
  KILL: '10', // "秒殺"),
  FLASH_SALE: '11', // "限時(shí)優(yōu)惠"),
}

export const PromotionEnum = {
  // 優(yōu)惠
  COUPON: '40', // "優(yōu)惠券"),
  COIN_REWARD: '41', // "積分獎(jiǎng)勵(lì)"),
  COIN_DEDUCTION: '42', // "積分抵扣"),
  ALLOWANCE: '43', // "購(gòu)物津貼"),
  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("沒(méi)作廢，可編輯")
}

3. 使用過(guò)程中遇到的問(wèn)題

枚舉是否要和后端一樣，定義值value和描述label？

export const ActivityStatusEnum = {
  ACTIVE: {value: 1, label: "進(jìn)行中"},
  DISABLED: {value: 2, label: "已禁用"},
}

一開(kāi)始使用時(shí)，覺(jué)得應(yīng)該要和后端一樣，定義值value和描述label，但后來(lái)在實(shí)踐過(guò)程中發(fā)現(xiàn)代碼有點(diǎn)冗長(zhǎng),并且label往往用不到

item.status < ActivityTypeEnum.DISABLED.value

所以后來(lái)全部就采用精簡(jiǎn)的枚舉定義，只取值。但會(huì)在值后面寫上注釋

export const ActivityStatusEnum = {
  ACTIVE: 1, // 進(jìn)行中
  DISABLED: 2, // 已禁用
}

item.status < ActivityTypeEnum.DISABLED

當(dāng)需要進(jìn)行枚舉值的描述的映射時(shí)，可以再定義一個(gè)ActivityStatusList

export const ActivityStatusList = [
  '',
  '進(jìn)行中',
  '已禁用'
]

當(dāng)枚舉值特別大時(shí)，可以定義一個(gè)ActivityStatusMap

export const ActivityStatusMap = {
  10003: '進(jìn)行中',
  10004: '已禁用'
}

當(dāng)枚舉值需要作為select,radio,checkbox的選項(xiàng)時(shí)，可以定義一個(gè)ActivityStatusOption

export const ActivityStatusOption = [
  {value: 1, label: "進(jìn)行中"},
  {value: 2, label: "已禁用"},
]

3. 前端枚舉命名規(guī)則

枚舉對(duì)象命名:
ActivityStatusEnum、ActivityStatusList、ActivityStatusMap、ActivityStatusOption

• XxxEnum: 表示值value的枚舉
• XxxList: 表示數(shù)組label的枚舉
• XxxMap: 表示對(duì)象label的枚舉
• XxxOption: 表示數(shù)組對(duì)象的value-label枚舉

枚舉對(duì)象中的鍵key命名：
全大寫

export const ActivityStatusEnum = {
  ACTIVE: 1, // 進(jìn)行中
  DISABLED: 2, // 已禁用
}

命名規(guī)范的好處，讓人直接知道此對(duì)象的作用；ide全局搜索時(shí)，可以快速定位此對(duì)象；ide有智能提示，直接點(diǎn)擊能跳轉(zhuǎn)到定義處等；