简化 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();
};

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

相关推荐
DoraBigHead3 分钟前
this 的前世今生:谁在叫我,我听谁的
前端·javascript·面试
蓝婷儿41 分钟前
每天一个前端小知识 Day 28 - Web Workers / 多线程模型在前端中的应用实践
前端
琹箐42 分钟前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠1 小时前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农1 小时前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛1 小时前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵1 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6221 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9492 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
唐叔在学习2 小时前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器