JavaScript中使用Callback控制流程介紹_javascript技巧

javascript中隨處可見的callback對於流程控制來說是一場災難，缺點顯而易見：

1.沒有明確的return，容易產生多餘流程，以及由此引發的bug。
2.造成程式碼無限嵌套，難以閱讀。

下面就來說說怎麼解決避免上述的問題。

第一個問題是一個習慣問題，在使用callback的時候往往會讓人忘了使用return，這種情況在使用coffee-script的時候尤甚（雖然它在編譯成javascript時會自行收集最後的資料作為回傳值，但是這個回傳值不一定代表你的初衷）。看看下面的例子。

複製程式碼 程式碼如下:

a = (err, callback)->
  callback() if err?
  console.log 'you will see me'

b = ->
  console.log 'I am a callback'

a('error', b)

在這種所謂」error first」的程式碼風格中，顯然我們不希望出錯時方法a中的後續程式碼仍然被執行，但是又不希望用throw來讓整個進程掛掉（要死也得優雅的死嘛~），那麼上面的程式碼就會產生bug。

一個解決方案就是老實的寫if...else...，但我比較傾向下面的做法：

複製程式碼 程式碼如下:

a = (err, callback)->
  return callback() if err?
  console.log 'you will not see me'

b = ->
  console.log 'I am a callback'

a('error', b)

javascript非同步方法中的回傳值大多沒什麼用處，所以這裡用return充當一個流程控制的角色，比if...else...更少的程式碼，但是更加清晰。

第二個問題是娘胎裡帶來的，很難根除。

一個不錯的方法是使用一些流程控制模組來將程式碼顯得更加有條理，例如async就是一個不錯的模組，提供了一系列的接口，包括迭代，循環，和一些條件語句，甚至還包含了一個隊列系統。下面的例子可以表名兩種寫法的優劣

複製程式碼 程式碼如下:

#normal

first = (callback)->
  console.log 'I am the first function'
  callback()

second = (callback)->
  console.log 'I am the second function'
  callback()

third = ()->
  console.log 'I am the third function'

first ->
  second ->
    third()

# use async

async = require('async')

async.waterfall [
  first,
  second,
  third
], (err)->

身為睿智的你，會選擇哪一種呢。