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

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

相关推荐
一枚前端小能手4 分钟前
「周更第7期」实用JS库推荐:Vite
前端·javascript·vite
小中123421 分钟前
异步请求的性能提升
前端
我是天龙_绍23 分钟前
渐变层生成器——直接用鼠标拖拽就可以调整渐变层的各种参数,然后可以导出为svg格式
前端
麦麦大数据1 小时前
F024 vue+flask电影知识图谱推荐系统vue+neo4j +python实现
vue.js·python·flask·知识图谱·推荐算法·电影推荐
我是天龙_绍1 小时前
Easing 曲线 easings.net
前端
知识分享小能手1 小时前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
訾博ZiBo1 小时前
React组件复用导致的闪烁问题及通用解决方案
前端
Dever1 小时前
记一次 CORS 深水坑:开启 withCredentials 后Response headers 只剩 content-type
前端·javascript
临江仙4551 小时前
流式 Markdown 渲染在 AI 应用中的应用探秘:从原理到优雅实现
前端·vue.js
数字化顾问1 小时前
基于Spring Boot + Vue 3的乡村振兴综合服务平台架构设计与实现
vue.js·spring boot·后端