看到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
}
相关推荐
啦啦右一1 分钟前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落6 分钟前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
理想不理想v33 分钟前
vue经典前端面试题
前端·javascript·vue.js
不收藏找不到我34 分钟前
浏览器交互事件汇总
前端·交互
小阮的学习笔记1 小时前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜1 小时前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=1 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck1 小时前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!1 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript