JavaScript中使用Callback控制流程介紹
javascript中隨處可見(jiàn)的callback對(duì)于流程控制來(lái)說(shuō)是一場(chǎng)災(zāi)難，缺點(diǎn)顯而易見(jiàn)：
1.沒(méi)有顯式的return，容易產(chǎn)生多余流程，以及由此引發(fā)的bug。
2.造成代碼無(wú)限嵌套，難以閱讀。
下面就來(lái)說(shuō)說(shuō)怎么解決避免上述的問(wèn)題。
第一個(gè)問(wèn)題是一個(gè)習(xí)慣問(wèn)題，在使用callback的時(shí)候往往會(huì)讓人忘了使用return，這種情況在使用coffee-script的時(shí)候尤甚（雖然它在編譯成javascript時(shí)會(huì)自行收集最后的數(shù)據(jù)作為返回值，但是這個(gè)返回值并不一定代表你的初衷）?？纯聪旅娴睦印?/p>
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í)的寫(xiě)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異步方法中的返回值大多沒(méi)什么用處，所以這里用return充當(dāng)一個(gè)流程控制的角色，比if...else...更少的代碼，但是更加清晰。
第二個(gè)問(wèn)題是娘胎里帶來(lái)的，很難根除。
一種不錯(cuò)的方法是使用一些流程控制模塊來(lái)將代碼顯得更加有條理，比如async就是一個(gè)不錯(cuò)的模塊，提供了一系列的接口，包括迭代，循環(huán)，和一些條件語(yǔ)句，甚至還包含了一個(gè)隊(duì)列系統(tǒng)。下面的例子可以表名兩種寫(xiě)法的優(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)文章
做BS開(kāi)發(fā)就難免會(huì)用到j(luò)avascript，而每個(gè)瀏覽器對(duì)javascript的支持有不同。這就需要我們程序員去兼容他們下面是兼容IE和FF的js腳本做法和分解（部分選自網(wǎng)上，經(jīng)本人整理），希望對(duì)大家有幫助。2010-12-12
ES6 proxy和reflect的使用方法與應(yīng)用實(shí)例分析
這篇文章主要介紹了ES6 proxy和reflect的使用方法,結(jié)合具體實(shí)例形式分析了ES6 proxy和reflect基本功能、原理、使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-02-02
js關(guān)閉瀏覽器時(shí)退出賬號(hào)的處理
某些網(wǎng)站，尤其是涉及錢的網(wǎng)站，現(xiàn)在基本都有一個(gè)機(jī)制是兩小時(shí)后登陸自動(dòng)失效，要重新登陸確認(rèn)身份，那么js關(guān)閉瀏覽器時(shí)退出賬號(hào)如何實(shí)現(xiàn)，感興趣的可以了解一下2021-12-12
JS中的prototype與面向?qū)ο蟮膶?shí)例講解
JS中的prototype與面向?qū)ο蟮膶?shí)例講解，需要的朋友可以參考一下2013-05-05
淺談JavaScript中Date(日期對(duì)象),Math對(duì)象
這篇文章主要簡(jiǎn)單介紹了JavaScript中Date(日期對(duì)象),Math對(duì)象的相關(guān)資料,需要的朋友可以參考下2015-02-02
JS/jQuery實(shí)現(xiàn)默認(rèn)顯示部分文字點(diǎn)擊按鈕顯示全部?jī)?nèi)容
默認(rèn)顯示部分文字，點(diǎn)擊按鈕顯示全部，類似這樣的功能在一些特殊的地方會(huì)見(jiàn)到吧，下面與大家分享下JS、jQuery如何實(shí)現(xiàn)，感興趣的朋友可以參考下哈，希望對(duì)你有所幫助2013-05-05
javascript的繼承機(jī)制并不是明確規(guī)定的,而是通過(guò)模仿實(shí)現(xiàn)的,意味著繼承不是由解釋程序處理,開(kāi)發(fā)者有權(quán)決定最適合的繼承方式.2009-08-08
之前雖然介紹過(guò)一種求數(shù)組最大最小值的方法，但那個(gè)方法只是用于數(shù)組中都是數(shù)字的，下面為大家介紹個(gè)方法適用于任何數(shù)組，有此需求的朋友可以參考下2013-08-08
棧內(nèi)存主要用于存儲(chǔ)各種基本類型的變量，包括Boolean、Number、String、Undefined、Null，以及對(duì)象變量的指針（地址值），這篇文章主要介紹了JS堆棧內(nèi)存的運(yùn)行機(jī)制,需要的朋友可以參考下2022-06-06
詳解js如何優(yōu)雅處理后端返回的單元格數(shù)據(jù)
這篇文章主要為大家詳細(xì)介紹了JavaScript如何優(yōu)雅處理后端返回的單元格數(shù)據(jù),文中的示例代碼講解詳細(xì),有需要的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10