JavaScript 异步调用框架 (Part 2 - 用例设计)


Posted in Javascript onAugust 03, 2009

传递回调
我们首先要考虑的一个问题是,如何传递回调入口。在最传统的XHR调用当中,回调函数会被作为最后一个参数传递给异步函数:

function asyncOperation(argument, callback)

在参数相当多的时候,我们可以把参数放到一个JSON里面,这样参数就如同具名参数一样,可以通过参数名选择性的传递参数,不传递的参数相当于使用默认值。这是从Prototype开始就流行起来的做法:
function asyncOperation(argument, options)

然而这两种做法都有一个坏处,就是把同步函数改为异步函数(或同步异步混合函数)时,必须显式地修改函数签名,在最后增加一个(或多个)参数。

由于在调用栈的底层引入异步函数对我们来说太常见了,为此可能要更改一大堆上层调用函数签名的成本实在是太高了,所以我们还是想一个不用修改函数签名的做法吧。

在这里我参考了.NET Framework的IAsyncResult设计,把异步操作有关的一切信息集中到一个对象上来,从而避免了对函数签名的修改。在此,我们假设一个异步函数的调用原型是这样子的:

function asyncOperation(argument) { 
operation = new Async.Operation(); 
setTimeout(function() { operation.yield("hello world"); }, 1000); 
return operation; 
}

在这段代码里,我们返回了一个Operation对象,用于将来传递回调函数。同时,我们通过setTimeout模拟了异步返回结果,而具体的返回方式就是yield方法。

接着,我们还要设计传递回调函数的方法。由于我们不能好像C#那样重载+=运算符,所以只能用函数传递回调函数:

var operation = asyncOperation(argument); 
operation.addCallback(function(result) { alert(result); });

在C#里面做这样的设计是不安全的,因为在异步操作可能在添加回调之前就完成了。但在JavaScript里面这样写是安全的,因为JavaScript是单线程的,紧接着asyncOperation的同步addCallback必然先执行,asyncOperation中的异步yield必然后执行。

调用顺序
可能有人要问,如果用户使用同步的方式来调用yield,这时候执行顺序不一样依赖于yield的实现吗?没错,不过yeild是在框架中一次性实现的,我们只要把它做成异步的就可以了,这样即使对它进行同步调用,也不影响执行顺序:

function psudoAsyncOperation(argument) { 
operation = new Async.Operation(); 
operation.yield("hello world"); 
return operation; 
} 
var operation = asyncOperation(argument); 
operation.addCallback(function(result) { alert(result); });

就算把代码写成这个样子,我们也能确保addCallback先于yield的实际逻辑执行。

事后回调
有时候,框架的使用者可能真的写出了先yield后addCallback的代码。这时候,我认为必须保证addCallback中添加的回调函数会被立即触发。因为用户添加这个回调函数,意味着他期望当异步操作有结果时通知这个回调函数,而这与添加回调函数时异步操作是否完成无关。为此,我们再添加一个用例:

function psudoAsyncOperation(argument) { 
operation = new Async.Operation(); 
operation.yield("hello world"); 
return operation; 
} 
var operation = asyncOperation(argument); 
setTimeout(function() { 
operation.addCallback(function(result) { alert(result); }); 
}, 1000);

小结
到这里,我们就设计好了一个名为Async.Operation的异步操作对象,具体如何实现关键的yield方法和addCallback方法将在下一篇文章讲述如果。
Javascript 相关文章推荐
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
Jul 31 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
jQuery 实现图片的依次加载图片功能
Jul 06 jQuery
Vue shopCart 组件开发详解
Jan 26 Javascript
Redux实现组合计数器的示例代码
Jul 04 Javascript
解决layui中table异步数据请求不支持自定义返回数据格式的问题
Aug 19 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
使用Node.js实现一个多人游戏服务器引擎
Mar 13 Javascript
今天,小程序正式支持 SVG
Apr 20 Javascript
JavaScript面向对象中接口实现方法详解
Jul 24 Javascript
nuxt踩坑之Vuex状态树的模块方式使用详解
Sep 06 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
Javascript 验证上传图片大小[客户端]
Aug 01 #Javascript
You might like
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
php计算多维数组中所有值总和的方法
2015/06/24 PHP
Linux(CentOS)下PHP扩展PDO编译安装的方法
2016/04/07 PHP
php探针使用原理和技巧讲解
2019/09/17 PHP
JavaScript面向对象之静态与非静态类
2010/02/03 Javascript
javascript 同时在IE和FireFox获取KeyCode的代码
2010/02/07 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
深入理解Angular4中的依赖注入
2017/06/07 Javascript
清空元素html("") innerHTML="" 与 empty()的区别和应用(推荐)
2017/08/14 Javascript
node.js+captchapng+jsonwebtoken实现登录验证示例
2017/08/17 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
解决使用Vue.js显示数据的时,页面闪现原始代码的问题
2018/02/11 Javascript
基于vue中css预加载使用sass的配置方式详解
2018/03/13 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
vue 实现setInterval 创建和销毁实例
2020/07/21 Javascript
微信小程序完美解决scroll-view高度自适应问题的方法
2020/08/08 Javascript
详解 javascript对象创建模式
2020/10/30 Javascript
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
Python实现生成随机数据插入mysql数据库的方法
2017/12/25 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
python多进程读图提取特征存npy
2019/05/21 Python
解决Django中修改js css文件但浏览器无法及时与之改变的问题
2019/08/31 Python
逼真的HTML5树叶飘落动画
2016/03/01 HTML / CSS
大三预备党员入党思想汇报
2014/01/08 职场文书
教师旷工检讨书
2014/01/18 职场文书
节约能源标语
2014/06/17 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
督导岗位职责
2015/02/04 职场文书
2015年科协工作总结
2015/05/19 职场文书
红高粱观后感
2015/06/10 职场文书