JavaScript中使用Callback控制流程介紹
javascript中隨處可見的callback對(duì)于流程控制來(lái)說(shuō)是一場(chǎng)災(zāi)難,缺點(diǎn)顯而易見:
1.沒有顯式的return,容易產(chǎn)生多余流程,以及由此引發(fā)的bug。
2.造成代碼無(wú)限嵌套,難以閱讀。
下面就來(lái)說(shuō)說(shuō)怎么解決避免上述的問題。
第一個(gè)問題是一個(gè)習(xí)慣問題,在使用callback的時(shí)候往往會(huì)讓人忘了使用return,這種情況在使用coffee-script的時(shí)候尤甚(雖然它在編譯成javascript時(shí)會(huì)自行收集最后的數(shù)據(jù)作為返回值,但是這個(gè)返回值并不一定代表你的初衷)??纯聪旅娴睦?。
a = (err, callback)->
callback() if err?
console.log 'you will see me'
b = ->
console.log 'I am a callback'
a('error', b)
在這種所謂”error first”的代碼風(fēng)格中,顯然我們不希望出錯(cuò)時(shí)方法a中的后續(xù)代碼仍然被執(zhí)行,但是又不希望用throw來(lái)讓整個(gè)進(jìn)程掛掉(要死也得優(yōu)雅的死嘛~),那么上面的代碼就會(huì)產(chǎn)生bug。
一種解決方案就是老老實(shí)實(shí)的寫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充當(dāng)一個(gè)流程控制的角色,比if...else...更少的代碼,但是更加清晰。
第二個(gè)問題是娘胎里帶來(lái)的,很難根除。
一種不錯(cuò)的方法是使用一些流程控制模塊來(lái)將代碼顯得更加有條理,比如async就是一個(gè)不錯(cuò)的模塊,提供了一系列的接口,包括迭代,循環(huán),和一些條件語(yǔ)句,甚至還包含了一個(gè)隊(duì)列系統(tǒng)。下面的例子可以表名兩種寫法的優(yōu)劣
#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)->
作為睿智的你,會(huì)選擇哪一種呢。
- JS回調(diào)函數(shù) callback的理解與使用案例分析
- JavaScript callback回調(diào)函數(shù)用法實(shí)例分析
- Node.js 異步編程之 Callback介紹(一)
- Javascript中的Callback方法淺析
- 理解javascript中的回調(diào)函數(shù)(callback)
- JavaScript加強(qiáng)之自定義callback示例
- JavaScript回調(diào)(callback)函數(shù)概念自我理解及示例
- Js callBack 返回前一頁(yè)的js方法
- JavaScript回調(diào)函數(shù)callback用法解析
相關(guān)文章
js將圖片轉(zhuǎn)base64的兩種實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于js將圖片轉(zhuǎn)base64的兩種實(shí)現(xiàn)方法,Base64是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)碼的編碼方式之一,Base64就是一種基于64個(gè)可打印字符來(lái)表示二進(jìn)制數(shù)據(jù)的方法,需要的朋友可以參考下2023-07-07JS實(shí)現(xiàn)網(wǎng)頁(yè)時(shí)鐘特效
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)網(wǎng)頁(yè)時(shí)鐘特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03js動(dòng)態(tài)添加input按鈕并給按鈕增加onclick的函數(shù)事件(帶參數(shù))完整實(shí)例
這篇文章主要介紹了js動(dòng)態(tài)添加input按鈕并給按鈕增加onclick的函數(shù)事件,結(jié)合完整實(shí)例形式分析了javascript頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2023-07-07javascript學(xué)習(xí)隨筆(編寫瀏覽器腳本 Navigator Scripting )
javascript學(xué)習(xí)隨筆(編寫瀏覽器腳本 Navigator Scripting )...2007-03-03