项目中的枚举值你是怎么处理的

假设有这样一个场景，我们需要查询一个代办列表。首先，查询条件中涉及到一个代办的下拉列表；其次，列表中会展示代办状态；另外js中会针对不同的代办做不同的逻辑处理。如果我们与后端约定0代表进行中，1代表已完成，2代表已取消，甚至更多。。。如果我们不做任何处理，试想项目中大量的0,1,2是不是让人看的很难受，又不懂何意。。。如果这个枚举值用在多个业务场景中。。。那有没有什么好的方式去处理呢？

一开始我是这样处理的。 在项目中新建constant目录，新增index.js，用于统一维护枚举值

export const TODO_STATUS = {
    PENDING : 0, //进行中
    DONE : 1, // 已完成
    CANCELED :2 // 已取消
}

项目中使用

1.查询项是一个下拉框，定义options的值

   {
        type: "select",
        label: "待办状态",
        prop: "status",
        options: [
          { label: "进行中", value: TODO_STATUS.PENDING },
          { label: "已完成", value: TODO_STATUS.DONE },
          { label: "已取消", value: TODO_STATUS.CANCELED }
        ]
  },

import { TODO_STATUS } from "@/constant";

//底下可以做一些逻辑处理

看上去还行哈，项目中没有大量的0,1,2。。。，但是感觉还不是很完美，枚举值和options定义了2次，那能否结合呢？

直接看代码吧！

src/enums/enumFactory.js

export class EnumFactory {
  constructor(enums) {
    this.enums = enums;
    // Define getters for each enum item
    Object.keys(enums).forEach((key) => {
      Object.defineProperty(this, key, {
        get: () => this.enums[key].value,
      });
    });
  }
  freezeEnums(enums) {
    const frozenEnums = {};
    Object.keys(enums).forEach(key => {
      const value = enums[key];
      if (typeof value === 'object' && value !== null) {
        frozenEnums[key] = this.freezeEnums(value); // Recursively freeze nested objects
      } else {
        frozenEnums[key] = value;
      }
    });
    return Object.freeze(frozenEnums);
  }
  getItems() {
    const items = Object.values(this.enums);
    return items;
  }
  getLabelByValue(id) {
    const items = this.getItems();
    const label = items.find((item) => item.value === id)?.label;
    return label || '';
  }
 getAllLabels() {
    const items = this.getItems();
    return items.map(item => item.label);
  }
  getAllValues(){
    const items = this.getItems();
    return items.map(item => item.value);
  }
}
export function createEnumFactory(enums){
    return new EnumFactory(enums)
}

src/enums/index.js

//如何将options配置和枚举值结合
export const TODO_STATUS = createEnumFactory({
  PENDING: {
    label: "进行中",
    value: "pending",
    id: "0",
  },
  DONE: {
    label: "已完成",
    value: "done",
    id: "1",
  },
  CANCELED: {
    label: "已取消",
    value: "cancel",
    id: "2",
  },
});

这样项目中如果需要获取下拉数据就可以直接使用

TODO_STATUS.getItems()

如果需要将后端列表中返回的value转为lable就可以直接这样

TODO_STATUS.getLabelByValue(cellvalue)

大家觉得怎么样呢？你平常都是怎么处理的呢？