JavaScript中使用Callback控制流程介绍


Posted in Javascript onMarch 16, 2015

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)->

作为睿智的你,会选择哪一种呢。

Javascript 相关文章推荐
JQuery 学习笔记 选择器之一
Jul 23 Javascript
Javascript JSQL,SQL无处不在,
May 05 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
easyui validatebox验证
Apr 29 Javascript
JavaScript中的this引用(推荐)
Aug 05 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
浅谈node中的exports与module.exports的关系
Aug 01 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
jquery图片切换插件
Mar 16 #Javascript
JavaScript中的方法重载实例
Mar 16 #Javascript
jquery中attr和prop的区别分析
Mar 16 #Javascript
JavaScript中扩展Array contains方法实例
Aug 23 #Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 #Javascript
jQuery实现的支持IE的html滑动条
Mar 16 #Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 #Javascript
You might like
《心理测量者3》剧场版动画预告
2020/03/02 日漫
php中截取字符串支持utf-8
2007/01/18 PHP
php入门学习知识点六 PHP文件的读写操作代码
2011/07/14 PHP
解析php开发中的中文编码问题
2013/08/08 PHP
php设计模式之单例模式实例分析
2015/02/25 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
轻松实现php文件上传功能
2017/02/17 PHP
php实现大文件断点续传下载实例代码
2019/10/01 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
JS 控制非法字符的输入代码
2009/12/04 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
2013/06/08 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
2014/10/09 Javascript
JS+CSS实现美化的下拉列表框效果
2015/08/11 Javascript
关于网页中的无缝滚动的js代码
2016/06/09 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
详解Vue中的scoped及穿透方法
2019/04/18 Javascript
jQuery实现颜色打字机的完整代码
2020/03/19 jQuery
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
使用Python写CUDA程序的方法
2017/03/27 Python
对Python的多进程锁的使用方法详解
2019/02/18 Python
python实现大文件分割与合并
2019/07/22 Python
python中pow函数用法及功能说明
2020/12/04 Python
python 装饰器重要在哪
2021/02/14 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
Urban Outfitters美国官网:美国生活方式品牌
2016/08/26 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
电子商务专员岗位职责
2013/12/11 职场文书
先进党支部事迹材料
2014/12/24 职场文书
八年级上册语文教学计划
2015/01/22 职场文书
清明节主题班会
2015/08/14 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
Python中第三方库Faker的使用详解
2022/04/02 Python