后端中经常会定义大量的枚举值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有智能提示，直接点击能跳转到定义处等；
