简化 vue 代码中大量 if 操作

当我们在 vue 项目中可能出现以下场景:

javascript 复制代码
export enum OperationEnum {
  '详情' = 1,
  '分配' = 2,
  '邀请入驻' = 3,
  '合同签约' = 4,
  '撤销签约' = 5,
  '申请上线' = 6,
}
javascript 复制代码
const operation = (param) => {
  if (param.operationType === OperationEnum.详情) {
    routeDetailDialogRef.value.openDialog({
      clueId: param.rowId.clueId,
    });
  }
  if (param.operationType === OperationEnum.分配) {
    routeOperationDialogRef.value.openDialog({
      clueId: param.rowId.row.clueId,
      dialogType: param.rowId.type,
    });
  }
  if (param.operationType === OperationEnum.邀请入驻) {
    inviteSettleDialogRef.value.openDialog({
      clueId: param.rowId.clueId,
    });
  }
  if (param.operationType === OperationEnum.合同签约) {
    contractSignDialogRef.value.openDialog({
      clueId: param.rowId.clueId,
    });
  }
  if (param.operationType === OperationEnum.撤销签约) {
    revokeContractDialogRef.value.openDialog({
      clueId: param.rowId.clueId,
    });
  }
  if (param.operationType === OperationEnum.申请上线) {
    confirmOnlineDialogRef.value.openDialog({
      clueId: param.rowId.clueId,
    });
  }
};

存在一个对应的枚举值,一个根据传入参数执行的函数,大量的 if 判断让代码变得很繁琐,也不利于后期维护。

有一个简单的处理方法如下:

javascript 复制代码
const operation = (param) => {
  const HandleMap = {
    [OperationEnum.详情]: {
      callback: () => {
        routeDetailDialogRef.value.openDialog({
          clueId: param.rowId.clueId,
        });
      },
    },
    [OperationEnum.分配]: {
      callback: () => {
        routeOperationDialogRef.value.openDialog({
          clueId: param.rowId.row.clueId,
          dialogType: param.rowId.type,
        });
      },
    },
    [OperationEnum.邀请入驻]: {
      callback: () => {
        inviteSettleDialogRef.value.openDialog({
          clueId: param.rowId.clueId,
        });
      },
    },
    [OperationEnum.合同签约]: {
      callback: () => {
        contractSignDialogRef.value.openDialog({
          clueId: param.rowId.clueId,
        });
      },
    },
    [OperationEnum.撤销签约]: {
      callback: () => {
        revokeContractDialogRef.value.openDialog({
          clueId: param.rowId.clueId,
        });
      },
    },
    [OperationEnum.申请上线]: {
      callback: () => {
        confirmOnlineDialogRef.value.openDialog({
          clueId: param.rowId.clueId,
        });
      },
    },
  };
  const target = HandleMap[param.operationType];
  target?.callback();
};

修改后的代码,更加方便后期维护,如果有更多的枚举值,继续往下写就好。之后遇到类似的代码都可以使用该方法进行完善。

相关推荐
10年前端老司机10 分钟前
React 受控组件和非受控组件区别和使用场景
前端·javascript·react.js
夏晚星10 分钟前
vue实现微信聊天emoji表情
前端·javascript
停止重构12 分钟前
【方案】前端UI布局的绝技,响应式布局,多端适配
前端·网页布局·响应式布局·grid布局·网页适配多端
極光未晚13 分钟前
TypeScript在前端项目中的那些事儿:不止于类型的守护者
前端·javascript·typescript
ze_juejin14 分钟前
Vue3 + Vite + Ant Design Vue + Axios + Pinia 脚手架搭建
前端·vue.js
Rrvive15 分钟前
原型与原型链到底是什么?
javascript
lichenyang45315 分钟前
React项目(移动app)
前端
用户618482402195117 分钟前
Vue-library-start,一个基于Vite的vue组件库开发模板
前端
美团技术团队28 分钟前
报名 | 美团技术沙龙第86期:多业务场景下,美团如何做性能优化
前端
Rrvive1 小时前
localhost 和 127.0.0.1 的核心区别
前端