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 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
js 方法实现返回多个数据的代码
Apr 30 Javascript
服务器端的JavaScript脚本 Node.js 使用入门
Mar 07 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
JS实现页面打印功能
Mar 16 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
Feb 18 Vue.js
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
php 动态执行带有参数的类方法
2009/04/10 PHP
对laravel的session获取与存取方法详解
2019/10/08 PHP
javascript 获取iframe里页面中元素值的方法
2014/02/17 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
JavaScript利用闭包实现模块化
2017/01/13 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
React-Native中禁用Navigator手势返回的示例代码
2017/09/09 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
vue中使用sessionStorage记住密码功能
2018/07/24 Javascript
[54:47]Liquid vs VP Supermajor决赛 BO 第五场 6.10
2018/07/05 DOTA
探索Python3.4中新引入的asyncio模块
2015/04/08 Python
python3 打开外部程序及关闭的示例
2018/11/06 Python
python读取几个G的csv文件方法
2019/01/07 Python
opencv python统计及绘制直方图的方法
2019/01/21 Python
PyTorch: 梯度下降及反向传播的实例详解
2019/08/20 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
Pytorch环境搭建与基本语法
2020/06/03 Python
plt.figure()参数使用详解及运行演示
2021/01/08 Python
CSS Houdini实现动态波浪纹效果
2019/07/30 HTML / CSS
中国最大隐形眼镜网上商城:视客眼镜网
2016/10/30 全球购物
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
kfc实习自我鉴定
2013/12/14 职场文书
跳槽求职信范文
2014/05/26 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
2014年体检中心工作总结
2014/12/23 职场文书
大学生求职信怎么写
2015/03/19 职场文书
垂直极限观后感
2015/06/08 职场文书
2015秋季开学演讲稿范文
2015/07/16 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫
vue修饰符.capture和.self的区别
2022/04/22 Vue.js
JS前端canvas交互实现拖拽旋转及缩放示例
2022/08/05 Javascript