Jquery:$Deffered() 异步队列(一)

来源:互联网 发布:131458淘宝买家工具箱 编辑:程序博客网 时间:2024/05/22 08:57


这是一个管理事件的工具:异步队列,
小编在jQ代码中搜索了一下,发现在ajax的代码中有应用。您可以在阅读代码时想象下,在ajax场景的应用
下面我们来看下整体代码结构:

var Deferred = function( func ) {    //使用Callbacks()进行对事件的管理:    //memory模式,fire后再添加的事件将直接被触发    //once模式,触发过的事件讲不会再被触发    var doneList = jQuery.Callbacks( "once memory" ),    failList = jQuery.Callbacks( "once memory" ),    progressList = jQuery.Callbacks( "memory" ),    //初始化的状态描述:等待    state = "pending",    //这个对象变量下面有应用 resolve:解决, reject:拒绝, notify:通知    lists = {        resolve: doneList,        reject: failList,        notify: progressList     },    promise = {        //保存各自的添加事件的方法        done: doneList.add,        fail: failList.add,        progress: progressList.add,        //批量添加        then: function( doneCallbacks, failCallbacks, progressCallbacks ) {            deferred.done( doneCallbacks ).fail( failCallbacks ).progress( progressCallbacks );            return this;        },        //同步添加到done/fail队列        always: function() {            deferred.done.apply( deferred, arguments ).fail.apply( deferred, arguments );            return this;        },        //获取当前状态的描述        state: function() {            return state;        },        isResolved: doneList.fired,        isRejected: failList.fired,        pipe: function( fnDone, fnFail, fnProgress ) {            //...        },        // 复制自身 如果传入的是一个对象,则将promise对象复制一份返回        promise: function( obj ) {            if ( obj == null ) {                obj = promise;            } else {                for ( var key in promise ) {                    obj[ key ] = promise[ key ];                }            }            return obj;        }    },    //返回一个对象副本    deferred = promise.promise({}),    key;    // { resolve: doneList.fire, reject: failList.fire, notify: progressList.fire }    // 就是对应各自列表的fire,fireWith函数    for ( key in lists ) {        deferred[ key ] = lists[ key ].fire;        deferred[ key + "With" ] = lists[ key ].fireWith;    }    /*        这里小编稍微解释下,在此三个列表中,done表示的是事件成功时执行的列表,        fail表示的是事件失败时执行的列表【可以想象ajax】        这里系统级的对两个事件列表添加3个事件:更改状态描述,禁用对立的列表,锁定消息列表        这里出现了连锁操作,回到之前的callback文中,代码中,我们看到 self.add 函数内部尾部返回了this        那对于这里来说呢this指向的就是deferred对象,所以出现了 .done().fail();    */    deferred.done( function() {        state = "resolved";    }, failList.disable, progressList.lock ).fail( function() {        state = "rejected";    }, doneList.disable, progressList.lock );    //  对于传入的函数进行调用,这里小编下一张在进行介绍    if ( func ) {        func.call( deferred, deferred );    }    return deferred;}

小编在稍微解释下promise里的几个api:
done, fail, progress, then, always 这5个api都是用来添加事件到相应的队列
done, fail, progress 这3个单个添加到各自的队列
then 可以一次指定1-3个事件添加到各自的队列中
always 可以将传入的所有事件同时添加到成功和失败队列中

最后,小编来举个极其简单的操作的例子..

var def = new Deferred();//添加一个事件def.done(function(data){     console.log( '>>>', data );});
//进行一些异步逻辑后进行了事件触发 def.resolve({'a':1,'b':2});

0 0
原创粉丝点击