看到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
}
相关推荐
new出一个对象1 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥2 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森2 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒5 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript