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 相关文章推荐
extjs 学习笔记(二) Ext.Element类
Oct 13 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
Oct 06 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
JavaScript两种跨域技术全面介绍
Apr 16 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
Oct 16 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
Mar 21 Javascript
浅谈在react中如何实现扫码枪输入
Jul 04 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 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
Content-type 的说明
2006/10/09 PHP
php数据库连接
2006/10/09 PHP
解析php php_openssl.dll的作用
2013/07/01 PHP
jQuery+PHP+ajax实现微博加载更多内容列表功能
2014/06/27 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
JS Array对象入门分析
2008/10/30 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
开启Javascript中apply、call、bind的用法之旅模式
2015/10/28 Javascript
图解js图片轮播效果
2015/12/20 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
Node.js学习之TCP/IP数据通讯(实例讲解)
2017/10/11 Javascript
vue-infinite-loading2.0 中文文档详解
2018/04/08 Javascript
vue自定义表单生成器form-create使用详解
2019/07/19 Javascript
Vue.js中Line第三方登录api的实现代码
2020/06/29 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
Python程序语言快速上手教程
2012/07/18 Python
python新手经常遇到的17个错误分析
2014/07/30 Python
python3读取MySQL-Front的MYSQL密码
2017/05/03 Python
Python下实现的RSA加密/解密及签名/验证功能示例
2017/07/17 Python
Python 函数基础知识汇总
2018/03/09 Python
python指定写入文件时的编码格式方法
2018/06/07 Python
python中的插值 scipy-interp的实现代码
2018/07/23 Python
3行Python代码实现图像照片抠图和换底色的方法
2019/10/10 Python
Pygame的程序开始示例代码
2020/05/07 Python
自荐书范文
2013/12/08 职场文书
学校万圣节活动方案
2014/02/13 职场文书
勤俭节约倡议书
2014/04/14 职场文书
宣传口号大全
2014/06/16 职场文书
金融与证券专业求职信
2014/06/22 职场文书
2014年“世界无车日”活动方案
2014/09/21 职场文书
python 实现定时任务的四种方式
2021/04/01 Python
Vue+Element UI实现概要小弹窗的全过程
2021/05/30 Vue.js
Echarts如何重新渲染实例详解
2022/05/30 Javascript