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 相关文章推荐
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 Javascript
canvas实现粒子时钟效果
Feb 06 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
Jan 05 Javascript
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
Feb 24 Javascript
基于javascript实现日历功能原理及代码实例
May 07 Javascript
JavaScript实现网页tab栏效果制作
Nov 20 Javascript
JS实现公告上线滚动效果
Jan 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
国内咖啡文化
2021/03/03 咖啡文化
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
关于jquery的多个选择器的使用示例
2013/10/18 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
2017/04/13 Javascript
Vue.js常用指令的使用小结
2017/06/23 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
vue element-ui读取pdf文件的方法
2019/11/26 Javascript
[06:10]6.81新信使新套装!给你一个炫酷的DOTA2
2014/05/06 DOTA
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
PyQt5+requests实现车票查询工具
2019/01/21 Python
python KNN算法实现鸢尾花数据集分类
2019/10/24 Python
Python数据持久化存储实现方法分析
2019/12/21 Python
python实现tail -f 功能
2020/01/17 Python
Python 格式化输出_String Formatting_控制小数点位数的实例详解
2020/02/04 Python
aws 通过boto3 python脚本打pach的实现方法
2020/05/10 Python
Html5百叶窗效果的示例代码
2017/12/11 HTML / CSS
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
外科实习自我鉴定
2013/10/06 职场文书
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
毕业生求职的求职信
2013/12/05 职场文书
JAVA程序员自荐书
2014/01/30 职场文书
采购部部长岗位职责
2014/02/06 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
心理学专业大学生职业生涯规划范文
2014/02/19 职场文书
社区工作者感言
2014/03/02 职场文书
年检委托书
2014/08/30 职场文书
朝花夕拾读书笔记
2015/06/29 职场文书
五一放假通知怎么写
2015/08/18 职场文书
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
MongoDB支持的数据类型
2022/04/11 MongoDB