注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

snoopyxdy的博客

https://github.com/DoubleSpout

 
 
 

日志

 
 

ajax队列、ajax并发管理插件 - AsyncProxy_browser.js  

2011-10-13 13:46:28|  分类: web前端技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
一、简介
AsyncProxy_browser.js是相当轻巧的异步代理jquery插件,我们知道jquery1.5+引入的Deferred对象,能够实现ajax并发管理和队列。但是jq1.5的文件大小达到了90KB左右,而1.4+的jquery大小仅为58kb,差距30KB,而这30kb中大部分功能就是为了实现我们之前提到的ajax并发管理和队列。
之前编写的AsyncProxy是在node.js端运行的基于emitter事件驱动的小模块,而AsyncProxy_browser.js作为给浏览器端使用的插件,它更为轻巧,未压缩版带注释版仅为25行1kb,压缩过后仅为700个字节,放便放入任何一个js类库或全站调用脚本。

AsyncProxy_browser.js的用法示例和源代码以及测试用例地址:

二、什么是异步代理?
比如有A1、A2和A3这三个异步ajax请求,有B函数需要将这3个异步ajax请求返回的结果汇总。
传统的做法是,发起异步A1,保存A1返回结果,发起A2,保存A2返回结果,发起A3,保存A3返回结果,最后调用B函数汇总结果。代码看上去是这样的:

var data=[]; //定义返回结果数组
$.get(A1, function(data1){  //发起请求A1
data.push(data1);  //保存A1返回结果
$.get(A2, function(data2){ //发起请求A2
data.push(data2); //保存A2返回结果
$.get(A3, function(data3){ //发起请求A3
data.push(data3); //保存A3返回结果
B(data); //最后执行B函数,汇总3个返回结果
})
})
})
代码深度嵌套,而且A2,A3都需要等待之前的异步请求结果返回以后才会发起,执行效率当然不高。
那为什么我们不同时发出A1,A2,A3这3个异步ajax请求,然后等全部返回以后再调用B方法呢?原因很简单,因为ajax异步请求不一定先发出去的就先返回,所以我们无法得知是否3个异步请求都已经返回了。
而AsyncProxy_browser.js帮你做到了上面这一点,它支持的ajax并发管理,在同时发出A1,A2,A3后,无论谁先返回或是谁最后返回,B函数总会在三个异步AJAX请求都返回结果以后调用,这样不仅解决了代码的深度嵌套,也提高了执行的速度,因为A2,A3不必等前一个异步请求返回以后再发起,他们是并行的,这就是异步代理。

三、优缺点
AsyncProxy_browser.js的优点
1、支持链式调用,什么是链式调用呢?比如“异步1”、“异步2”,如果"异步2"需要用到"异步1"返回的数据,则必须等待"异步1"返回以后再开始异步2。对于这样耦合度高的异步请求完全支持,可以很方便的取到上一步,或者上几步的数据。
2、增加异步返回状态,能够在每次异步请求返回后,知道当前已经返回异步请求数和总共需要返回请求数,方便查找系统的瓶颈。
3、支持AJAX并发管理,异步并发发起,全部返回后再执行最后回调,大大提高了性能。
4、支持同时多条ajax队列,只需实例化多次即可,互不影响
AsyncProxy_browser.js的缺点:
1、gc(垃圾回收)需要手动处理。
2、增加了匿名函数,代码量上有一点点增加

四、应用实例
有一个需求,发送ary.length个异步请求到ary[x]存着的url中,,并且将对应返回的结果按ary内的顺序插入到ary2中,当所有数据返回调用ADD方法。因为ary.length的长度不确定,所以使用普通嵌套式编写只能递归编写,而且请求只能链式调用,如果我们使用 AsyncProxy_browser 插件则不但可以并发,更可以避免递归。看代码:

var as = new AsyncProxy_browser(),  ary2, asary=[];
var allfunc = function(data){
ary2 = data;
alert('全部完成');
}
for(var i=0; i<ary.length; i++){
var asfunc = function(order){
$.get(ary[order],{'action':'getdata'},function(data){
as.rec(order, data);
},'json')
}
asary.push(asfunc )
}
asfunc.push(allfunc)
as.ap.apply(as, asary);
这样就将数据按顺序返回至ary2数组中去了。

使用中有任何BUG或者问题欢迎留言:http://spout.cnodejs.net/message/


  评论这张
 
阅读(2422)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016