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 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
让table变成exls的示例代码
Mar 24 Javascript
IE浏览器下PNG相关功能
Jul 05 Javascript
jquery实现仿Flash的横向滑动菜单效果代码
Sep 17 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
基于JavaScript表单脚本(详解)
Oct 18 Javascript
实时监控input框,实现输入框与下拉框联动的实例
Jan 23 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
解决vue 格式化银行卡(信用卡)每4位一个符号隔断的问题
Sep 14 Javascript
VUE实现自身整体组件销毁的示例代码
Jan 13 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 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
全面解读PHP的Yii框架中的日志功能
2016/03/17 PHP
理解php依赖注入和控制反转
2016/05/11 PHP
PHP设计模式(三)建造者模式Builder实例详解【创建型】
2020/05/02 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
JavaScript和ActionScript的交互实现代码
2010/08/01 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
详解React 的几种条件渲染以及选择
2018/10/23 Javascript
微信小程序用户授权、位置授权及获取微信绑定手机号
2019/07/18 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
vue计算属性无法监听到数组内部变化的解决方案
2019/11/06 Javascript
Vue如何实现监听组件原生事件
2020/07/03 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
解决vuex数据页面刷新后初始化操作
2020/07/26 Javascript
Vue + Element-ui的下拉框el-select获取额外参数详解
2020/08/14 Javascript
nuxt 每个页面head标签内容设置方式
2020/11/05 Javascript
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
在python下使用tensorflow判断是否存在文件夹的实例
2019/06/10 Python
python pillow模块使用方法详解
2019/08/30 Python
wxpython实现按钮切换界面的方法
2019/11/19 Python
通过python连接Linux命令行代码实例
2020/02/18 Python
python语言是免费还是收费的?
2020/06/15 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
CSS3弹性盒模型flex box快速入门心得(必看篇)
2016/05/24 HTML / CSS
Burberry英国官网:英国标志性奢侈品牌
2017/03/29 全球购物
编写类String的构造函数、析构函数和赋值函数
2012/05/29 面试题
户外亲子活动策划方案
2014/02/07 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
党员专题组织生活会发言材料
2014/10/17 职场文书
先进个人自荐书
2015/03/06 职场文书
办公室主任岗位竞聘书
2015/09/15 职场文书
运动会口号霸气押韵
2015/12/24 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
Python函数中apply、map、applymap的区别
2021/11/27 Python