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 相关文章推荐
理解Javascript_13_执行模型详解
Oct 20 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 Javascript
对Web开发中前端框架与前端类库的一些思考
Mar 27 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
Angular动态绑定样式及改变UI框架样式的方法小结
Sep 03 Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 jQuery
js的Object.assign用法示例分析
Mar 05 Javascript
JS正则表达式常见函数与用法小结
Apr 13 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 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年最新CPU天梯图
2021/03/04 数码科技
PHP 和 MySQL 基础教程(四)
2006/10/09 PHP
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
各种效果的jquery ui(接口)介绍
2008/09/17 Javascript
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
js实现在同一窗口浏览图片
2014/09/17 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
2016/03/07 Javascript
jQuery四种选择器使用及示例
2016/06/05 Javascript
关于动态生成dom绑定事件失效的原因及解决方法
2016/08/06 Javascript
vue-axios使用详解
2017/05/10 Javascript
js分页之前端代码实现和请求处理
2017/08/04 Javascript
详解js几个绕不开的事件兼容写法
2017/08/30 Javascript
详细分析JS函数去抖和节流
2017/12/05 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
浅谈ECMAScript 中的Array类型
2019/06/10 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)
2020/08/28 Javascript
vue 使用localstorage实现面包屑的操作
2020/11/16 Javascript
python 全文检索引擎详解
2017/04/25 Python
设置python3为默认python的方法
2018/10/31 Python
Python+opencv+pyaudio实现带声音屏幕录制
2019/12/23 Python
简单了解python关键字global nonlocal区别
2020/09/21 Python
世界上最大的二手相机店:KEN
2017/05/17 全球购物
菲律宾领先的在线时尚商店:Zalora菲律宾
2018/02/08 全球购物
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
公司总经理助理岗位职责
2014/07/09 职场文书
django上传文件的三种方式
2021/04/29 Python
MySQL性能指标TPS+QPS+IOPS压测
2022/08/05 MySQL