您的位置:知识库 » Web前端

javascript 异步编程2

作者: 司徒正美  来源: 博客园  发布时间: 2011-03-24 07:51  阅读: 2156 次  推荐: 0   原文链接   [收藏]  

  上篇:javascript 异步编程

  好像有这么一句名言——"每一个优雅的接口,背后都有一个龌龊的实现"。最明显的例子,jQuery。之所以弄得这么复杂,因为它本来就是那复杂。虽然有些实现相对简明些,那是它们的兼容程度去不了那个地步。当然,世上总有例外,比如mootools,但暴露到我们眼前的接口,又不知到底是那个父类的东西,结构清晰但不明撩。我之所以说这样的话,因为异步列队真的很复杂,但我会尽可能让API简单易用。无new实例化,不区分实例与类方法,链式,等时髦的东西都用上。下面先奉上源码:

;(function(){
var dom = this.dom = this.dom || {
mix :
function(target, source ,override) {
var i, ride = (override === void 0) || override;
for (i in source) {
if (ride || !(i in target)) {
target[i]
= source[i];
}
}
return target;
}
}
//////////////////////////////////////////////////////////////////////
//=======================异步列队模块===================================
var Deferred = dom.Deferred = function (fn) {
return this instanceof Deferred ? this.init(fn) : new Deferred(fn)
}
var A_slice = Array.prototype.slice;
dom.mix(Deferred, {
get:
function(obj){//确保this为Deferred实例
return obj instanceof Deferred ? obj : new Deferred
},
ok :
function (r) {//传递器
return r
},
ng :
function (e) {//传递器
throw e
}
});
Deferred.prototype
= {
init:
function(fn){//初始化,建立两个列队
this._firing = [];
this._fired = [];
if(typeof fn === "function")
return this.then(fn)
return this;
},
_add:
function(okng,fn){
var obj = {
ok:Deferred.ok,
ng:Deferred.ng,
arr:[]
}
if(typeof fn === "function")
obj[okng]
= fn;
this._firing.push(obj);
return this;
},
then:
function(fn){//_add的包装方法1,用于添加正向回调
return Deferred.get(this)._add("ok",fn)
},
once:
function(fn){//_add的包装方法2,用于添加负向回调
return Deferred.get(this)._add("ng",fn)
},
wait:
function(timeout){
var self = Deferred.get(this);
self._firing.push(
~~timeout)
return self
},
_fire:
function(okng,args,result){
var type = "ok",
obj
= this._firing.shift();
if(obj){
this._fired.push(obj);//把执行过的回调函数包,从一个列队倒入另一个列队
var self = this;
if(typeof obj === "number"){//如果是延时操作
var timeoutID = setTimeout(function(){
self._fire(okng,self.before(args,result))
},obj)
this.onabort = function(){
clearTimeout(timeoutID );
}
}
else if(obj.arr.length){//如果是并行操作
var i = 0, d;
while(d = obj.arr[i++]){
d.fire(args)
}
}
else{//如果是串行操作
try{//
result = obj[okng].apply(this,args);
}
catch(e){
type
= "ng";
result
= e;
}
this._fire(type,this.before(args,result))
}
}
else{//队列执行完毕,还原
(this.after || Deferred.ok)(result);
this._firing = this._fired;
this._fired = [];
}
return this;
},
fire:
function(){//执行正向列队
return this._fire("ok",this.before(arguments));
},
error:
function(){//执行负向列队
return this._fire("ng",this.before(arguments));
},

abort:
function(){//中止列队
(this.onabort || Deferred.ok)();
return this;
},
//每次执行用户回调函数前都执行此函数,返回一个数组
before:function(args,result){
return result ? result instanceof Array ? result : [result] : A_slice.call(args)
},
//并行操作,并把所有的子线程的结果作为主线程的下一个操作的参数
paiallel : function (fns) {
var self = Deferred.get(this),
obj
= {
ok:Deferred.ok,
ng:Deferred.ng,
arr:[]
},
count
= 0,
values
= {}
for(var key in fns){//参数可以是一个对象或数组
if(fns.hasOwnProperty(key)){
(
function(key,fn){
if (typeof fn == "function")
fn
= Deferred(fn);
fn.then(
function(value){
values[key]
= value;
if(--count <= 0){
if(fns instanceof Array){//如果是数组强制转换为数组
values.length = fns.length;
values
= A_slice.call(values)
}
self._fire(
"ok",[values])
}
}).once(
function(e){
self._fire(
"ng",[e])
});
obj.arr.push(fn);
count
++
})(key,fns[key])
}
}
self.onabort
= function(){
var i = 0, d;
while(d = obj.arr[i++]){
d.abort();
}
}
self._firing.push(obj);
return self
},
//处理相近的迭代操作
loop : function (obj, fn, result) {
obj
= {
begin : obj.begin
|| 0,
end : (
typeof obj.end == "number") ? obj.end : obj - 1,
step : obj.step
|| 1,
last :
false,
prev :
null
}
var step = obj.step,
_loop
= function(i,obj){
if (i <= obj.end) {
if ((i + step) > obj.end) {
obj.last
= true;
obj.step
= obj.end - i + 1;
}
obj.prev
= result;
result
= fn.call(obj,i);
Deferred.get(result).then(_loop).fire(i
+step,obj);
}
else{
return result;
}
}
return (obj.begin <= obj.end) ? Deferred.get(this).then(_loop).fire(obj.begin,obj) : null;
}
}
//将原型方法转换为类方法
"loop wait then once paiallel".replace(/\w+/g, function(method){
Deferred[method]
= Deferred.prototype[method]
});
})();

  Deferred提供的接口其实不算多,then once loop wait paialle就这五个,我们可以new一个实例出来,用它的实例方法,可以直接用类名加方法名,其实里面还是new了一个实例。另外,还有两个专门用于复写的方法,before与after。before执行于每个回调函数之前,after执行于所有回调之后,相当于complete了。既然是列队,就有入队操作与出队操作,我不可能使用queue与dequeue这样土的命名。queue换成两个时间状语,then与once,相当于jQuery的done、fail,或dojo的addCallback、addErrback。dequeue则用fire与error取替,jQuery1.5的beta版也曾经用过fire,不知为何换成resolve这样难记的单词。好了,我们先不管其他API,现在就试试身手吧。 

var log = function (s) {
window.console
&& window.console.log(s);
}
dom.Deferred(
function () {
log(
1);//1
})
.then(
function () {
log(
2);//2
})
.then(
function () {
log(
3);//3
})
.fire();
//如果不使用异步列队,实现这种效果,就需要用套嵌函数
/*

var fun = function(fn){
fn()
};
fun(function(){
log(1);
fun(function(){
log(2);
fun(function(){
log(3);
})
});
});
*/

  当然,现在是同步操作。注意,第一个回调函数是作为构造器的参数传入,可以节约了一个then^_^。

  默认如果回调函数存在返回值,它会把它作为下一个回调函数的参数传入,如:

dom.Deferred(function (a) {
a
+= 10
log(a);
//11
return a
})
.then(
function (b) {
b
+= 12
log(b);
//23
return b
})
.then(
function (c) {
c
+= 130
log(c);
//153
})
.fire(
1);

  我们可以重载before函数,让它的结果不影响下一个回调函数。在多投事件中,我们也可以在before中定义,如果返回false,就中断队列了。

  我们再来看它如何处理异常。dom.Deferred的负向列队与jQuery的是完全不同的,jQuery的只是正向列队的一个克隆,而在dom.Deferred中,负向列队只是用于突发情况,是配角。

dom.Deferred(function () {
log(
1111111111)//11111111111
}).
then(
function () {
throw "error!";//发生错误
}).
then(
function (e) {//这个回调函数不执行
log(e+"222222")
return 2222222
}).
once(
function(e){//直到 遇上我们自定义的负向回调
log(e+'333333')//error!333333
return 333333333
}).
then(
function (c) {//回到正向列队中
log(c)//33333333
}).fire()

  上面几个例子严格来说是同步执行,想实现异步就要用到setTimeout。当然除了setTimeout,我们还有许多方案,img.onerror script.onreadystatechange script.onload xhr.onreadystatechange self.postMessage……但它们 都有一个缺点,就是不能指定回调函数的执行时间。更何况setTimeout是没有什么兼容问题,如img.onerrot就不能用于IE6-8,postMessage虽然很快,但只支持非常新的浏览器版本。我说过,异步就是延时,延时就是等待,因此这方法叫做wait。

dom.Deferred(function(){
log(
1)
}).wait(
1000).then(function(){
log(
2)
}).wait(
1000).then(function(){
log(
3)
}).wait(
1000).then(function(){
log(
4)
}).fire()

  好了,我们看异步列队中最难的部分,并行操作。这相当于模拟线程了,两个不相干的东西各自做自己的事,互不干扰。当然在时间我们还是能看出先后顺序来的。担当这职责的方法为paiallel。

dom.Deferred.paiallel([function(){
log(
"司徒正美")
return 11
},
function(i){
log(
"上官莉绮")
return 12
},
function(i){
log(
"朝沐金风")
return 13
}]).then(
function(d){
log(d)
}).fire(
10)

  不过,上面并没有用到异步,都是同步,这时,paiallel就相当于一个map操作。

var d = dom.Deferred
d.paiallel([
d.wait(
2000).then(function(a){
log(
"第1个子列队");
return 123
}),
d.wait(
1500).then(function(a){
log(
"第2个子列队");
return 456
}),
d.then(
function(a){
log(
"第3个子列队")
return 789
})]).then(
function(a){
log(a)
}).fire(
3000);

  最后要介绍的是loop方法,它只要改变一下就能当作animate函数使用。

d.loop(10, function(i){
log(i);
return d.wait(500)
});

  添加多个列队,让它们交错进行,模拟“多线程”效果。

d.loop(10, function(i){
log(
"第一个列队的第"+i+"个操作");
return d.wait(100)
});
d.loop(
10, function(i){
log(
"第二个列队的第"+i+"个操作");
return d.wait(100)
});
d.loop(
10, function(i){
log(
"第三个列队的第"+i+"个操作");
return d.wait(100)
});

  当然这些例子都很简单,下次再结合ajax与动画效果说说。

0
0

Web前端热门文章

    Web前端最新文章

      最新新闻

        热门新闻