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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
jQuery实现tab选项卡效果的方法
Jul 08 Javascript
使用jQuery中的wrap()函数操作HTML元素的教程
May 24 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
js学习总结_选项卡封装(实例讲解)
Jul 13 Javascript
jQuery中each循环的跳出和结束实例
Aug 16 jQuery
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
vuejs实现折叠面板展开收缩动画效果
Sep 06 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
小程序封装路由文件和路由方法(5种全解析)
May 26 Javascript
JavaScrip如果基于url实现图片下载
Jul 03 Javascript
jQuery实现增删改查
Dec 22 jQuery
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
献给php初学者(入门学习经验谈)
2010/10/12 PHP
PHP中的Memcache详解
2014/04/05 PHP
PHP输入输出流学习笔记
2015/05/12 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
微信公众平台开发-微信服务器IP接口实例(含源码)
2017/03/05 PHP
javascript TextArea动态显示剩余字符
2008/10/22 Javascript
关于div自适应高度/左右高度自适应一致的js代码
2013/03/22 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
2013/11/26 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
JS锚点的设置与使用方法
2016/09/05 Javascript
jQuery继承extend用法详解
2016/10/10 Javascript
JavaScript实现经典排序算法之插入排序
2016/12/28 Javascript
JavaScript实现自定义媒体播放器方法介绍
2017/01/03 Javascript
详解JS中的立即执行函数
2017/02/24 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
React中使用collections时key的重要性详解
2017/08/07 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
vue自定义指令用法经典实例小结
2019/03/16 Javascript
jQuery操作cookie的示例代码
2019/06/05 jQuery
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
jQuery轮播图功能制作方法详解
2019/12/03 jQuery
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
Python Property属性的2种用法
2015/06/21 Python
python 将print输出的内容保存到txt文件中
2018/07/17 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
python 提取key 为中文的json 串方法
2018/12/31 Python
python数据库操作mysql:pymysql、sqlalchemy常见用法详解
2020/03/30 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
Currentbody德国站:健康与美容技术专家
2020/04/05 全球购物
个人房屋租赁合同(标准范本)
2019/09/16 职场文书
《没有任何借口》读后感:完美的执行能力
2020/01/07 职场文书
Python 内置函数速查表一览
2021/06/02 Python