多个 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
}