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 相关文章推荐
js中的内部属性与delete操作符介绍
Aug 10 Javascript
谈谈我对JavaScript原型和闭包系列理解(随手笔记9)
Dec 24 Javascript
js轮播图代码分享
Jul 14 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
微信小程序 生命周期和页面的生命周期详细介绍
Jan 19 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
Apr 01 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
Vue使用vux-ui自定义表单验证遇到的问题及解决方法
May 10 Javascript
React 实现拖拽功能的示例代码
Jan 06 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 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缓存机制Output Control详解
2014/07/14 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
最新28个很棒的jQuery 教程
2011/05/28 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
js获取Html元素的实际宽度高度的方法
2016/05/19 Javascript
js表单元素checked、radio被选中的几种方法(详解)
2016/08/22 Javascript
关于js原型的面试题讲解
2016/09/25 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
详解Vue中状态管理Vuex
2017/05/11 Javascript
js实现放大镜特效
2017/05/18 Javascript
微信小程序动态添加分享数据
2017/06/14 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
jQuery读取本地的json文件(实例讲解)
2017/10/31 jQuery
vue页面跳转后返回原页面初始位置方法
2018/02/11 Javascript
Angular6 写一个简单的Select组件示例
2018/08/20 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
vue实现路由懒加载的3种方法示例
2020/09/01 Javascript
Python下的Softmax回归函数的实现方法(推荐)
2017/01/26 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
Python Series从0开始索引的方法
2018/11/06 Python
django mysql数据库及图片上传接口详解
2019/07/18 Python
python通过robert、sobel、Laplace算子实现图像边缘提取详解
2019/08/21 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
PIL包中Image模块的convert()函数的具体使用
2020/02/26 Python
部署Django到阿里云服务器教程示例
2020/06/03 Python
Python实现网络聊天室的示例代码(支持多人聊天与私聊)
2021/01/27 Python
2014自荐信的写作技巧
2014/01/28 职场文书
公司办公室岗位职责
2014/03/19 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
集体生日活动方案
2014/08/18 职场文书
2014镇党委书记党建工作汇报材料
2014/11/02 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
晚会开场白和结束语
2015/05/29 职场文书
二胎满月酒致辞
2015/07/29 职场文书