背景

日常开发经常会遇到复杂的条件判断, 一般做法就是用if/else, 或者优雅一点用switch来实现多个条件的判断. 如果条件越来越多, 会导致代码越来越臃肿, 如何使用更优雅的方式来实现呢?

案例

先来看一段代码:

const clickHandler = (status) => {
  if(status === 1) {
    sendLog('processing')
    jumpTo('IndexPage')
  } else if(status === 2) {
    sendLog('fail')
    jumpTo('FailPage')
  } else if(status === 3) {
    sendLog('fail')
    jumpTo('FailPage')
  } else if(status === 4) {
    sendLog('success')
    jumpTo('SuccessPage')
  } else if(status === 5) {
    sendLog('cancel')
    jumpTo('CancelPage')
  } else {
    sendLog('other')
    jumpTo('Index')
  }
}
复制代码

优化1

通过以上代码, 可以看出该函数的作用是: 根据status状态的不同, 发送日志和跳转到对应的页面. 大家可以轻易的使用switch来进行重构:

const clickHandler = (status) => {
  switch (status) {
    case 1:
      sendLog('processing')
      jumpTo('IndexPage')
      break
    case 2:
    case 3:
      sendLog('fail')
      jumpTo('FailPage')
      break
    case 4:
      sendLog('success')
      jumpTo('SuccessPage')
      break
    case 5:
      sendLog('cancel')
      jumpTo('CancelPage')
      break
    default:
      sendLog('other')
      jumpTo('Index')
  }
}
复制代码

这样看起来比if / else清晰多了. 细心的你一定会发现case2, case3的逻辑是一样的,

优化2

在日常的代码开发中, 基本上大多数同学都是这样写. 这样写固然可以, 但也不太优雅. 有一观点是: 编程的本质, 数据结构 + 算法, 任何算法都包含两部分, Logic + Control

Logic部分就是真正意义上的算法
Control部分只是影响解决问题的效率.

如果我们能将 Logic 和 Control部分有效地分开, 那么代码将会变得更加容易维护和改进.

比如, 我们试着用下面的办法去分离代码:

const actions = {
  '1': ['processing', 'IndexPage'],
  '2': ['fail', 'FailPage'],
  '3': ['fail', 'FailPage'],
  '4': ['success', 'SuccessPage'],
  '5': ['cancel', 'CancelPage'],
  'default': ['other', 'Index']
}
const clickHandler = (status) => {
  let action = actions[status] || actions['default'], 
    LogName = action[0],
    pageName = action[1]
  sendLog(LogName)
  jumpTo(pageName)
}
复制代码

这样的形式, 其实就是DSL(Domain Specific Language)解析器. DSL的描述是一个Logic, 函数clickHandler就是Control部分, 代码大大简化,

小结

由此可以总结出如下思想:

State Machine
- 状态定义
- 状态变迁条件
- 状态的action
DSL - Domain Specific Language
- HTML, SQL, 正则表达式......
编程范式
- 面向对象: 委托, 桥接, 修饰, MVC.......
- 函数式编程: 修饰, 管道, 拼接
- 逻辑推导式编程

优化3

继续优化. 看看是不是还有其他写法?答案是, 有的

const actions = new Map([
  ['1', ['processing', 'IndexPage']],
  ['2', ['fail', 'FailPage']],
  ['3', ['fail', 'FailPage']],
  ['4', ['success', 'SuccessPage']],
  ['5', ['cancel', 'CancelPage']],
  ['default', ['other', 'Index']]
])

const clickHandler = (status) => {
  let action = actions.get(status) || actions.get('default')
  sendLog(action[0])
  jumpTo(action[1])
}
复制代码

新需求1

有新的需求过来, 原先只是判断status的状态, 现在还需要判断用户的身份.

const clickHandler = (status, identity) => {
  if(identity == 'guest') {
    if(status === 1) {
      // to do something
    } else if (status === 2) {
      // to do something
    } else if (status === 3) {
      // to do something
    } else if (status === 4) {
      // to do something
    } else if (status === 5) {
      // to do something
    } else {
      // to do something
    }
  } else if(identity == 'master') {
    if(status === 1) {
      // to do something
    } else if (status === 2) {
      // to do something
    } else if (status === 3) {
      // to do something
    } else if (status === 4) {
      // to do something
    } else if (status === 5) {
      // to do something
    } else {
      // to do something
    }
  }
}
复制代码

又用了if / else来解决问题(里面的逻辑就没有写了, 因为代码太长了). 但当有两个层级的判断条件时, 如果还是用if / else, 代码量会加倍. 此时, 我们该如何写更优雅呢?

const actions = {new Map([
  ['guest_1', () => {/* to do something */}],
  ['guest_2', () => {/* to do something */}],
  ['guest_3', () => {/* to do something */}],
  ['guest_4', () => {/* to do something */}],
  ['guest_5', () => {/* to do something */}],
  ['master_1', () => {/* to do something */}],
  ['master_2', () => {/* to do something */}],
  ['master_3', () => {/* to do something */}],
  ['master_4', () => {/* to do something */}],
  ['master_5', () => {/* to do something */}],
  ['default', () => {/* to do something */}],
])}
复制代码

上述代码的逻辑是:

把两个条件拼接成字符串
以拼接的条件字符串作为key, 以处理函数作为值的Map对象进行查找并执行

当然, 也可以用Object对象来实现(这也是大家常用的)

const actions = {
  'guest_1': () => {/* to do something */},
  'guest_2': () => {/* to do something */},
  'guest_3': () => {/* to do something */},
  'guest_4': () => {/* to do something */},
  'guest_5': () => {/* to do something */},
  'master_1': () => {/* to do something */},
  'master_2': () => {/* to do something */},
  'master_3': () => {/* to do something */},
  'master_4': () => {/* to do something */},
  'master_5': () => {/* to do something */},
  'default': () => {/* to do something */}
}
复制代码

可能有些同学会觉得把查询条件拼接成字符串会不太优雅, 还有一种方案, 就是用Map对象, 以Object对象作为Key:

const actions = new Map([
  [{identity: 'guest', status: 1}, () => {/* to do something */}],
  [{identity: 'guest', status: 2}, () => {/* to do something */}]
  [{identity: 'guest', status: 3}, () => {/* to do something */}]
])

const clickHandler = (identity, status) {
  let action = [...actions].filter((key, value) => {key.identity === identity && key.status === status})
  action.forEach(([key, value]) => {value.call(this)})
}
复制代码

这样会不会更优雅一点.

Map与Object的区别: Map可以用任何类型的数据作为key

新需求2

假如在guest情况下, status 1~4 的处理逻辑是一样的, 最差的情况是:

functionA(){
  // to do something
}
functionB(){
  // to do something
}
const actions = new Map([
  [{identity: 'guest', status: 1}, functionA],
  [{identity: 'guest', status: 2}, functionA],
  [{identity: 'guest', status: 3}, functionA],
  [{identity: 'guest', status: 4}, functionA],
  [{identity: 'guest', status: 5}, functionB],
])

const clickHandler = (identity, status) {
  let action = [...actions].filter((key, value) => {key.identity === identity && key.status === status})
  action.forEach(([key, value]) => {value.call(this)})
}
复制代码

这样写, 基本也满足需求了, 但重复的写4次functionA, 还是觉得有点不舒服(不过现在能够满足需求了, 好像也没什么关系了). 但如果identity的状态有3种, status的状态有30种呢? 难道......

如果是此种情况, 也可以考虑用正则表达式, 如:

functionA(){
  // to do something
}
functionB(){
  // to do something
}
const actions = new Map([
  [/^guest_[1-4]$/, functionA],
  [/^guest_5$/, functionA],
])

const clickHandler = (identity, status) {
  let action = [...actions].filter((key, value) => {key.test(`${identity}_${status}`)})
  action.forEach(([key, value]) => {value.call(this)})
}
复制代码

用Map的优势就很明显了, 可以用正则表达式类型作为key, 这样就可以满足更多的需求了. 假如需求变成, 凡是guest的情况, 都要发送一个日志埋码, 不同的status的情况, 也要单独做处理. 那么我们可以考虑这样写:

functionA(){
  // to do something
}
functionB(){
  // to do something
}
functionC(){
  // to do something
}
const actions = new Map([
  [/^guest_[1-4]$/, functionA],
  [/^guest_5$/, functionA],
  [/^guest_.$/, functionC],
])

const clickHandler = (identity, status) {
  let action = [...actions].filter((key, value) => {key.test(`${identity}_${status}`)})
  action.forEach(([key, value]) => {value.call(this)})
}
复制代码

利用数组循环的特性, 符合正则表达式条件的逻辑都会执行. 这样就可以同时执行公共逻辑和单独逻辑

总结

本文核心讲逻辑(Logic)和控制(Control)如何分离, 如果将所有的程序能够很好的分离, 那么代码的可维护性将会大大提高. 代码除了要运行, 可读性也是很重要的!

本文转到: 一个多层 if / else 嵌套的代码重构案例

一个多层 if / else 嵌套的代码重构案例(JavaScript)

背景

案例

优化1

优化2

小结

优化3

新需求1

新需求2

总结