jquery1.83 之前所有与异步列队相关的模块详细介绍

程序员文章站 2022-11-18 11:38:43

jQuery在1.5引入了Deferred对象（异步列队），当时它还没有划分为一个模块，放到核心模块中。直到1.52才分割出来。它拥有三个方法:_Deferred， Deferre...

jQuery在1.5引入了Deferred对象（异步列队），当时它还没有划分为一个模块，放到核心模块中。直到1.52才分割出来。它拥有三个方法:_Deferred， Deferred与when。

出于变量在不同作用域的共用，jQuery实现异步列队时不使用面向对象方式，它把_Deferred当作一个工厂方法，返回一个不透明的函数列队。之所以说不透明，是因为它的状态与元素都以闭包手段保护起来，只能通过列队对象提供的方法进行操作。这几个方法分别是done(添加函数)，resolveWith（指定作用域地执行所有函数），resolve（执行所有函数），isResolved（判定是否已经调用过resolveWith或resolve方法），cancel（中断执行操作）。但_Deferred自始至终都作为一个内部方法，从没有在文档中公开过。

Deferred在1.5是两个_Deferred的合体，但1+1不等于2，它还是做了增强。偷偷爆料，Deferred本来是python世界大名鼎鼎的Twisted框架的东西，由早期七大JS类库中的MochiKit取经回来，最后被dojo继承衣钵。jQuery之所以这样构造Deferred，分明不愿背抄袭的恶名，于是方法改得一塌糊涂，是jQuery命名最差的API，完全不知所云。它还加入当时正在热烈讨论的promise机制。下面是一个比较列表：

dojo	jQuery	注解
addBoth	then	同时添加正常回调与错误回调
addCallback	done	添加正常回调
addErrback	fail	添加错误回调
callback	done	执行所有正常回调
errback	reject	执行所有错误回调
	doneWith	在指定作用域下执行所有正常回调，但dojo已经在addCallback上指定好了
	rejectWith	在指定作用域下执行所有错误回调，但dojo已经在addErrback上指定好了
	promise	返回一个外界不能改变其状态的Deferred对象（外称为Promise对象）

jQuery的when方法用于实现回调的回调，或者说，几个异列列队都执行后才执行另外的一些回调。这些后来的回调也是用done, when, fail添加的，但when返回的这个对象已经添加让用户控制它执行的能力了。因为这时它是种叫Promise的东西，只负责添加回调与让用户窥探其状态。一旦前一段回调都触发了，它就自然进入正常回调列队（deferred ，见Deferred方法的定义）或错误回调列队（failDeferred ）中去。不过我这样讲，对于没有异步
if (( tmp = jQuery.data( elements[ i ], deferDataKey, undefined, true ) ||
( jQuery.data( elements[ i ], queueDataKey, undefined, true ) ||
jQuery.data( elements[ i ], markDataKey, undefined, true ) ) &&
jQuery.data( elements[ i ], deferDataKey, jQuery._Deferred(), true ) )) {
count++;
tmp.done( resolve );
}
}
resolve();
return defer.promise();
}
});
})( jQuery );
jQuery.ajax模块也被染指，$.XHR对象，当作HTTPXMLRequest对象的仿造器是由一个Deferred对象与一个_Deferred的对象构成。

. 代码如下:

deferred = jQuery.Deferred(),
completeDeferred = jQuery._Deferred(),
jqXHR ={/**/}
//....
deferred.promise( jqXHR );
jqXHR.success = jqXHR.done;
jqXHR.error = jqXHR.fail;
jqXHR.complete = completeDeferred.done;

jQuery1.7，从deferred模块中分化出callback模块，其实就是之前的_Deferred的增强版，添加去重，锁定，return false时中断执行下一个回调，清空等功能。

. 代码如下:

这期间有还个小插曲，jQuery团队还想增加一个叫Topic的模块，内置发布者订阅者机制，但这封装太溥了，结果被否决。

. 代码如下:

虽然把大量代码移动callbacks，但1.7的Deferred却一点没有没变小，它变得更重型，它由三个函数列队组成了。并且返回的是Promise对象，比原来多出了pipe, state, progress, always方法。ajax那边就变成这样：

. 代码如下:

deferred = jQuery.Deferred(),
completeDeferred = jQuery.Callbacks( "once memory" ),
deferred.promise( jqXHR );
jqXHR.success = jqXHR.done;
jqXHR.error = jqXHR.fail;
jqXHR.complete = completeDeferred.add;

queue那边也没变多少。

. 代码如下:

这时候，钩子机制其实已经在jQuery内部蔓延起来，1.5是css模块的cssHooks，1.6是属性模块的attrHooks, propHooks, boolHooks, nodeHooks,1.7是事件模块的fixHooks， keyHooks, mouseHooks,1.8是queue模块的_queueHooks，由于_queueHooks，queue终于瘦身了。

. 代码如下:

View Code?//1.8
jQuery.extend({
queue: function( elem, type, data ) {
var queue;
if ( elem ) {
type = ( type || "fx" ) + "queue";
queue = jQuery._data( elem, type );
// Speed up dequeue by getting out quickly if this is just a lookup
if ( data ) {
if ( !queue || jQuery.isArray(data) ) {
queue = jQuery._data( elem, type, jQuery.makeArray(data) );
} else {
queue.push( data );
}
}
return queue || [];
}
},
dequeue: function( elem, type ) {
type = type || "fx";
var queue = jQuery.queue( elem, type ),
fn = queue.shift(),
hooks = jQuery._queueHooks( elem, type ),
next = function() {
jQuery.dequeue( elem, type );
};
// If the fx queue is dequeued, always remove the progress sentinel
if ( fn === "inprogress" ) {
fn = queue.shift();
}
if ( fn ) {
// Add a progress sentinel to prevent the fx queue from being
// automatically dequeued
if ( type === "fx" ) {
queue.unshift( "inprogress" );
}
// clear up the last queue stop function
delete hooks.stop;
fn.call( elem, next, hooks );
}
if ( !queue.length && hooks ) {
hooks.empty.fire();
}
},
// not intended for public consumption - generates a queueHooks object, or returns the current one
_queueHooks: function( elem, type ) {
var key = type + "queueHooks";
return jQuery._data( elem, key ) || jQuery._data( elem, key, {
empty: jQuery.Callbacks("once memory").add(function() {
jQuery.removeData( elem, type + "queue", true );
jQuery.removeData( elem, key, true );
})
});
}
});
jQuery.fn.extend({
queue: function( type, data ) {
var setter = 2;
if ( typeof type !== "string" ) {
data = type;
type = "fx";
setter--;
}
if ( arguments.length < setter ) {
return jQuery.queue( this[0], type );
}
return data === undefined ?
this :
this.each(function() {
var queue = jQuery.queue( this, type, data );
// ensure a hooks for this queue
jQuery._queueHooks( this, type );
if ( type === "fx" && queue[0] !== "inprogress" ) {
jQuery.dequeue( this, type );
}
});
},
dequeue: function( type ) {
return this.each(function() {
jQuery.dequeue( this, type );
});
},
// Based off of the plugin by Clint Helfers, with permission.
// https://blindsignals.com/index.php/2009/07/jquery-delay/
delay: function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[ time ] || time : time;
type = type || "fx";
return this.queue( type, function( next, hooks ) {
var timeout = setTimeout( next, time );
hooks.stop = function() {
clearTimeout( timeout );
};
});
},
clearQueue: function( type ) {
return this.queue( type || "fx", [] );
},
// Get a promise resolved when queues of a certain type
// are emptied (fx is the type by default)
promise: function( type, obj ) {
var tmp,
count = 1,
defer = jQuery.Deferred(),
elements = this,
i = this.length,
resolve = function() {
if ( !( --count ) ) {
defer.resolveWith( elements, [ elements ] );
}
};
if ( typeof type !== "string" ) {
obj = type;
type = undefined;
}
type = type || "fx";
while( i-- ) {
if ( (tmp = jQuery._data( elements[ i ], type + "queueHooks" )) && tmp.empty ) {
count++;
tmp.empty.add( resolve );
}
}
resolve();
return defer.promise( obj );
}
});

同时，动画模块迎来了它第三次大重构，它也有一个钩子Tween.propHooks。它多出两个对象，其中Animation返回一个异步列队，Tween 是用于处理单个样式或属性的变化，相当于之前Fx对象。animate被抽空了，它在1.72可是近百行的规模。jQuery通过钩子机制与分化出一些新的对象，将一些巨型方法重构掉。现在非常长的方法只龟缩在节点模块，回调模块。

. 代码如下:

animate: function( prop, speed, easing, callback ) {
var empty = jQuery.isEmptyObject( prop ),
optall = jQuery.speed( speed, easing, callback ),
doAnimation = function() {
// Operate on a copy of prop so per-property easing won't be lost
var anim = Animation( this, jQuery.extend( {}, prop ), optall );
// Empty animations resolve immediately
if ( empty ) {
anim.stop( true );
}
};
return empty || optall.queue === false ?
this.each( doAnimation ) :
this.queue( optall.queue, doAnimation );
},

到目前为止，所有异步的东西都被jQuery改造成异步列队的“子类”或叫“变种”更合适些。如domReady, 动画，AJAX，与执行了promise或delay或各种特效方法之后的jQuery对象。于是所有异步的东西在promise的加护下，像同步那样编写异步程序。

上一篇：就是它了！无核显的九代酷睿F系列玩家好评如潮

下一篇： Intel处理器诊断工具爆出漏洞：高危级别赶快升级

jquery1.83 之前所有与异步列队相关的模块详细介绍

jquery1.83 之前所有与异步列队相关的模块详细介绍

jquery1.83 之前所有与异步列队相关的模块详细介绍_jquery

jquery1.83 之前所有与异步列队相关的模块详细介绍

jquery1.83 之前所有与异步列队相关的模块详细介绍_jquery