一個多層 if / else 嵌套的代碼重構案例(JavaScript)

背景

平常開發常常會遇到複雜的條件判斷, 通常作法就是用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 嵌套的代碼重構案例