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

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 {
    // 活動
    KILL("10", "秒殺"),
    FLASH_SALE("11", "限時優(yōu)惠"),
    ;

    private String activity;
    private String remark;

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

2. 前端枚舉探索

肯定要定義一個枚舉文件衩藤，沒必要像后端一樣，一個枚舉一個文件涛漂。前端可以將所有枚舉放到一個文件中赏表，除非枚舉太多，可進行拆分成多個文件匈仗。

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

創(chuàng)建在/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', // "限時優(yōu)惠"),
}

export const PromotionEnum = {
  // 優(yōu)惠
  COUPON: '40', // "優(yōu)惠券"),
  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: "已禁用"},
}

一開始使用時间狂，覺得應(yīng)該要和后端一樣，定義值value和描述label火架，但后來在實踐過程中發(fā)現(xiàn)代碼有點冗長,并且label往往用不到

item.status < ActivityTypeEnum.DISABLED.value

所以后來全部就采用精簡的枚舉定義鉴象，只取值。但會在值后面寫上注釋

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

item.status < ActivityTypeEnum.DISABLED

當(dāng)需要進行枚舉值的描述的映射時何鸡，可以再定義一個ActivityStatusList

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

當(dāng)枚舉值特別大時纺弊，可以定義一個ActivityStatusMap

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

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

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

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

枚舉對象命名:
ActivityStatusEnum骡男、ActivityStatusList淆游、ActivityStatusMap、ActivityStatusOption

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

枚舉對象中的鍵key命名：
全大寫

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

命名規(guī)范的好處隔盛，讓人直接知道此對象的作用犹菱；ide全局搜索時，可以快速定位此對象吮炕；ide有智能提示已亥，直接點擊能跳轉(zhuǎn)到定義處等；