看到if else很多就很烦

多个 if else分支优化

请看下面代码

js 复制代码
if (row.tianrunStatus == true) {
  if (row.tianrunSyncStatus == 'APPLYING') {
    return '启用(申请中)'
  } else if (row.tianrunSyncStatus == 'APPLY_FAILURE') {
    return '启用(申请失败)'
  } else if (row.tianrunSyncStatus == 'APPLY_SUCCESS') {
    return '启用(申请成功)'
  } else if (row.tianrunSyncStatus == 'SYNCHRONIZING') {
    return '启用(同步中)'
  } else if (row.tianrunSyncStatus == 'SYNC_SUCCEEDED') {
    return '启用(同步成功)'
  } else if (row.tianrunSyncStatus == 'SYNC_FAILED') {
    return '启用(同步失败)'
  } else {
    return '启用'
  }
} else if (row.tianrunStatus == false) {
  if (row.tianrunSyncStatus == 'SYNCHRONIZING') {
    return '禁用(同步中)'
  } else if (row.tianrunSyncStatus == 'SYNC_SUCCEEDED') {
    return '禁用(同步成功)'
  } else if (row.tianrunSyncStatus == 'SYNC_FAILED') {
    return '禁用(同步失败)'
  } else {
    return '禁用'
  }
} else {
  return '--'
}

这让我看着都头大,连吐三口老血啊,并且这段类似代码在同一个文件内用了三次!

js 复制代码
const enableStateTypeMap = {
  'APPLYING': '启用(申请中)',
  'APPLY_FAILURE': '启用(申请失败)',
  'APPLY_SUCCESS': '启用(申请成功)',
  'SYNCHRONIZING': '启用(同步中)',
  'SYNC_SUCCEEDED': '启用(同步成功)',
  'SYNC_FAILED': '启用(同步失败)',
}

const disabledStateTypeMap = {
  'SYNCHRONIZING': '禁用(同步中)',
  'SYNC_SUCCEEDED': '禁用(同步成功)',
  'SYNC_FAILED': '禁用(同步失败)',
}
/** 状态code判断返回中文描述 */
export const statusJudgmentFun = (status, syncStatus) => {
  if (status == true) {
    const syncStatusText = enableStateTypeMap[syncStatus]
    return syncStatusText ? syncStatusText : '启用'
  } else if (status == false) {
    const syncStatusText = disabledStateTypeMap[syncStatus]
    return syncStatusText ? syncStatusText : '禁用'
  } else {
    return '--'
  }
}
/** 使用 */
statusJudgmentFun(row.tianrunStatus,row.tianrunSyncStatus)

多个if判断请求接口

直接上代码

js 复制代码
const onOk = (val, editType) => {
  const { selectedRowKeys, tianrunEditVisible, ronglianEditVisible,duyanEditVisible, selectedRows,editRow, freeswitchEditVisible } = this.state;
  const tianrunStatus = val.tianrunStatus || false;
  const ronglianStatus = val.ronglianStatus || false;
  const freeswitchStatus = val.freeswitchStatus || false;
  const duyanStatus = vel.duyanStatus || false;
  const fn =() =>{
      this.modalVisible('editVisible', false);
      this.handleSearch({...this.state.filter});
  }
  if (tianrunEditVisible) {
      if (editType == 'batchEdit') {
          this.doBatchChange(selectedRows, tianrunStatus,'CTI_SOFT_PHONE').then(fn);
      } else {
          this.doBatchChange([editRow],tianrunStatus,'CTI_SOFT_PHONE').then(fn);
      }
  }
  if (ronglianEditVisible) {
      if (editType == 'batchEdit') {
          this.doBatchChange(selectedRows, ronglianStatus,'RONGLIAN').then(fn);
      } else {
          this.doBatchChange([editRow], ronglianStatus,'RONGLIAN').then(fn);
      }
  }
  if (freeswitchEditVisible) {
      if (editType == 'batchEdit') {
          this.doBatchChange(selectedRows, freeswitchStatus,'FREESWITCH').then(fn);
      } else {
          this.doBatchChange([editRow],freeswitchStatus,'FREESWITCH').then(fn);
      }
  }
  if (duyanEditVisible) {
      if (editType == 'batchEdit') {
          this.doBatchChange(selectedRows, duyanStatus,'DUYAN').then(fn);
      } else {
          this.doBatchChange([editRow],duyanStatus,'DUYAN').then(fn);
      }
  }
}
  • 先把所有相同的代码提取出来,放在一个新的方法里面;
  • 将这些重复的逻辑抽象成一个公共的方法,使其能够适用于多种场景;
  • 使用条件判断语句来调用不同的方法,这样可以提高代码的可读性和可维护性。
js 复制代码
  const onOk = (params, editType) => {
      const { filter } = this.state;
      const list = getParamsList(this.state,params,editType)
      Promise.allSettled(list.map(item => this.props.batchChangeSeatStatus(item))).then(res=>{
        if(res.some(item=> item.status == 'fulfilled')){
             this.modalVisible('editVisible', false);
             this.handleSearch({...filter});
        }
      })
    }

export const getParamsList= (state={},params={},editType)=>{
  const { selectedRows,editRow,tianrunEditVisible, ronglianEditVisible,duyanEditVisible, freeswitchEditVisible } = state;
  const { tianrunStatus,ronglianStatus,freeswitchStatus,duyanStatus } = params
  const seatInfos = editType == 'batchEdit' ? selectedRows : [editRow]
  const TIANRUN = {
    visible:tianrunEditVisible,
    status: !!tianrunStatus,
    platform:'CTI_SOFT_PHONE',
    seatInfos
  }
  const RONGLIAN = {
    visible:ronglianEditVisible,
    status:!!ronglianStatus,
    platform:'RONGLIAN',
    seatInfos
  }
  const FREESWITCH = {
    visible:freeswitchEditVisible,
    status: !!freeswitchStatus,
    platform:'FREESWITCH',
    seatInfos
  }
  const DUYAN = {
    visible: duyanEditVisible,
    status: !!duyanStatus,
    platform:'DUYAN',
    seatInfos
  }
    const list = [TIANRUN,RONGLIAN,FREESWITCH,DUYAN].filter(item=> item.visible)
  return list
}
相关推荐
zxg_神说要有光3 分钟前
我好像找到了最适合我的生活状态
前端·javascript
飞哥数智坊7 分钟前
今天,我的个人网站正式上线了!
前端
念念不忘 必有回响25 分钟前
前端自动化部署全流程(Jenkins + Nginx)
前端·自动化·jenkins
爱上妖精的尾巴1 小时前
5-22 WPS JS宏reduce数组的归并迭代应用(实例:提取最大最小值的记录)
服务器·前端·javascript·笔记·wps·js宏
IT_陈寒1 小时前
Java性能调优:这5个被你忽略的JVM参数让你的应用吞吐量提升50%!
前端·人工智能·后端
叶梅树1 小时前
从零构建量化学习工具:动量策略(Momentum Strategy)
前端·后端·机器学习
MyFreeIT2 小时前
Page光标focus在某个控件
前端·javascript·vue.js
通往曙光的路上2 小时前
day8_elementPlus
前端·javascript·vue.js
Simon_He2 小时前
最强流式渲染,没有之一
前端·面试·ai编程
你真的可爱呀2 小时前
uniapp学习【路由跳转 +数据请求+本地存储+常用组件】
前端·学习·uni-app