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

时间 2019-11-29

标签一个多层嵌套代码案例 javascript 栏目 JavaScript 繁體版

原文原文链接

背景

平常开发常常会遇到复杂的条件判断, 通常作法就是用if/else, 或者优雅一点用switch来实现多个条件的判断. 若是条件愈来愈多, 会致使代码愈来愈臃肿, 如何使用更优雅的方式来实现呢?javascript

案例

先来看一段代码:java

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部分, 代码大大简化,ide

小结

由此能够总结出以下思想:函数式编程

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 嵌套的代码重构案例