JavaScript 异步调用框架 (Part 3 - 代码实现)


Posted in Javascript onAugust 04, 2009

类结构
首先我们来搭一个架子,把需要用到的似有变量都列出来。我们需要一个数组,来保存回调函数列表;需要一个标志位,来表示异步操作是否已完成;还可以学IAsyncResult,加一个state,允许异步操作的实现者对外暴露自定义的执行状态;最后加一个变量保存异步操作结果。

Async = { 
Operation: { 
var callbackQueue = []; 
this.result = undefined; 
this.state = "waiting"; 
this.completed = false; 
} 
}

addCallback方法
接下来,我们要实现addCallback方法,它的工作职责很简单,就是把回调函数放到callbackQueue中。此外,如果此时completed为true,说明异步操作已经yield过了,则立即调用此回调。
this.yield = function(callback) { 
callbackQueue.push(callback); 
if (this.completed) { 
this.yield(this.result); 
} 
return this; 
}

我们假设yield方法会把callbackQueue中的回调函数逐个取出来然后调用,因此如果compeleted为true,则使用已有的result再调用一次yield就可以了,这样yield自然会调用这次添加到callbackQueue的回调函数。
至于最后的return this;,只是为了方便jQuery风格的链式写法,可以通过点号分隔连续添加多个回调函数:
asyncOperation(argument) 
.addCallback(firstCallback) 
.addCallback(secondCallback);

yield方法
最后,我们要实现yield方法。它需要将callbackQueue中的回调函数逐个取出来,然后都调用一遍,并且保证这个操作是异步吧。
this.yield = function(result) { 
var self = this; 
setTimeout(function() { 
self.result = result; 
self.state = "completed"; 
self.completed = true; 
while (callbackQueue.length > 0) { 
var callback = callbackQueue.shift(); 
callback(self.result); 
} 
}, 1); 
return this; 
}

通过使用setTimeout,我们确保了yield的实际操作是异步进行的。然后我们把用户传入yield的结果及相关状态更新到对象属性之上,最后遍历callbackQueue调用所有的回调函数。
小结
这样我们就做好了一个简单的JavaScript异步调用框架,完整的代码可以看这里:异步调用框架Async.Operation。
这个框架能够很好的解决调用栈中出现同步异步操作并存的情况,假设所有函数都返回Async.Operation,框架的使用者可以使用一种统一的模式来编写代码,处理函数返回,而无需关心这个函数实际上是同步返回了还是异步返回了。
对于串行调用多个异步函数的情况,我们现在可以用嵌套addCallback的方式来书写,但随着嵌套层数的增多,代码会变得越来越不美观:
firstAsyncOperation().addCallback(function() { 
secondAsyncOperation().addCallback(function() { 
thirdAsyncOperation().addCallback(function() { 
finalSyncOperation(); 
}); 
}); 
});

我们能否把嵌套形式改为jQuery风格的链式写法呢?这是我们接下来要思考的问题,如果你不希望错过相关讨论的话
Javascript 相关文章推荐
js 遍历对象的属性的代码
Dec 29 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
jQuery滚动新闻实现代码
Jun 26 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
Jul 18 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
Dec 13 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
让axios发送表单请求形式的键值对post数据的实例
Aug 11 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
详解Vue基于vue-quill-editor富文本编辑器使用心得
Jan 03 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
记录vue做微信自定义分享的一些问题
Sep 12 Javascript
node.js 如何监视文件变化
Sep 01 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
Aug 03 #Javascript
JavaScript 异步调用框架 (Part 1 - 问题 & 场景)
Aug 03 #Javascript
jQuery 相关控件的事件操作分解
Aug 03 #Javascript
利用javascript实现一些常用软件的下载导航
Aug 03 #Javascript
jQuery 隔行换色 支持键盘上下键,按Enter选定值
Aug 02 #Javascript
一句话JavaScript表单验证代码
Aug 02 #Javascript
JavaScript 关键字屏蔽实现函数
Aug 02 #Javascript
You might like
php生成rss类用法实例
2015/04/14 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
详解php协程知识点
2018/09/21 PHP
JavaScript CSS修改学习第五章 给“上传”添加样式
2010/02/19 Javascript
jQuery.extend 函数的详细用法
2012/06/27 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
2015/06/08 Javascript
JS验证IP,子网掩码,网关和MAC的方法
2015/07/02 Javascript
提升jQuery的性能需要做好七件事
2016/01/11 Javascript
javascript基本语法
2016/05/31 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
详解Vue路由开启keep-alive时的注意点
2017/06/20 Javascript
JavaScript对JSON数组简单排序操作示例
2019/01/31 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
微信小程序云开发如何实现数据库自动备份实现
2019/08/16 Javascript
如何在JavaScript中等分数组的实现
2020/12/13 Javascript
python操作日期和时间的方法
2014/03/11 Python
Python 文件管理实例详解
2015/11/10 Python
理解python正则表达式
2016/01/15 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
Win10下python3.5和python2.7环境变量配置教程
2018/09/18 Python
Python批量生成幻影坦克图片实例代码
2019/06/04 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
英国床和浴室商场:Bed & Bath Emporium
2018/05/20 全球购物
给民警的表扬信
2014/01/08 职场文书
《天安门广场》教学反思
2014/04/23 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
2015年社区党建工作汇报材料
2015/06/25 职场文书
世界十大儿童漫画书排名,法国国宝漫画排第五,第二是轰动日本连环
2022/03/18 欧美动漫
Apache Hudi数据布局黑科技降低一半查询时间
2022/03/31 Servers