DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript中使用Callback控制流程介紹
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)->

作為睿智的你,會選擇哪一種呢。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved