破解jQuery Deferred()异步执行的神秘世界

本文解析jQuery.Deferred()源代码,学习异步执行实现原理和编程技术。

测试代码:
var f1=function(){
  var deferred = $.Deferred();
  deferred.resolve('f1 resolved');
  return deferred.promise();
}
f1().then(function(data){
  //$.when().then(function(){
    console.log(data);
    var deferred = $.Deferred();
    setTimeout(function(){
      deferred.resolve('then resolved');
    },2000);
    return deferred.promise();
}).done(function(data){ // 也可以写.then(f1,f2,f3)
  console.log(data);
}).fail(function(){
  console.log('fail');
}).progress(function(){
  console.log('progress');
});

jQuery Deferred()源代码分为两个嵌入到jquery对象的函数块:

jQuery.Callbacks = function( options ) {
  定义promise/deferred对象的内部操作方法以及内部数据...

jQuery.extend({
  Deferred: function( func ) {
    定义promise/deferred对象以及暴露的方法比如resolve/then...

Deferred()代码:

Deferred: function( func ) {

  var tuples = [
    // action, add listener, listener list, final state
    [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ], // jQuery.Callbacks调用结果是返回一个self{}对象,含内部处理函数
    [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
    [ "notify", "progress", jQuery.Callbacks("memory") ]
  ],

  state = "pending",  // 这个就是当前Deferred实例的状态

  promise = {}; //返回的实例(子实例)

  deferred = {}; //当前实例(父实例,含子实例)


  jQuery.each( tuples, function( i, tuple ) {
    var list = tuple[ 2 ], // tuples是调Callbacks获取self对象,因此list引用self对象
    // deferred[ resolve | reject | notify ]
    deferred[ tuple[0] ] = function() { // 循环三次分别构造deferred.resolve/reject/notify函数代码
      deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments ); //调deferred.resolveWith,构造参数,resolve函数是deferrred
                    的内置函数,this就是deferred,arguments就是调resolve时的入口参数,比如resolve(data)。此句即为:
                      deferred.resolveWith(promise,arguments);
                    传递的作用域object是promise而不是deferred。
                    resolveWith就是fireWith,因此就是调fireWith(promise.arguments),fireWith函数代码如下:       

                    // Call all callbacks with the given context and arguments
                    fireWith: function( context, args ) { // context是promise,args是调resolve传递的参数
                      fire( args );  // fire函数在jQuery.Callbacks函数中定义,下面是Callbacks函数结构
                        

                        //jQuery.Callbacks相当于定义一个类,从外部调self里面的public方法,public方法再调private方法
                        jQuery.Callbacks = function( options ) {
                          list = [],  // 执行then时把内部callback存储在list[],内部callback会调用应用callback

                          // Fire callbacks
                          fire = function( data ) {
                            list[ firingIndex ].apply( data[ 0 ], data[ 1 ] ) // 执行list[]里面的内部callback
                          }

                          

                          // Actual Callbacks object
                          self = {
                            // Call all callbacks with the given context and arguments
                            fireWith: function( context, args ) {
                              fire( args );
                            }
                          }

                          return self; // Deferred()会调用这个函数,引用self,因此Callbacks函数执行完之后self还存在,list[]也是。  

    deferred[ tuple[0] + "With" ] = list.fireWith; // deferred.resolveWith

    //因此resolve方法其实就是调用 resolve -> resoveWith = list.fireWith (引用self) -> fire (执行list[]里面的callback),代码设计非常复杂深奥,它没有用new实例方法,而是利用了js对象引用机制,函数定义一个对象,在其它位置引用这个对象,这个对象就一直存在,直到引用它的函数不存在为止,其实用new实例方法可以简化设计不用这么深奥。

});

下面来看then代码,Deferrred最复杂深奥的代码在then代码,体现了作者高超的编程技术,令人叹为观止:

then: function( /* fnDone, fnFail, fnProgress */ ) {

  var fns = arguments;
  return jQuery.Deferred(function( newDefer ) {  // then是Deferred实例里面的方法,注意这是递归再次调用Deferred创建子实例,当前有一个deferred,又递归再次执行函数新建一个deferred,至此就有两个deferred实例,也就是父子实例,子实例返回以便连写.then(callback),对于下一个.then来说就是父实例,执行下一个.then时又递归执行Deferred函数新建一个子实例返回,以此类推,连写嵌套多少层都一样。

    jQuery.each( tuples, function( i, tuple ) {
      var action = tuple[ 0 ],
      fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];
      // deferred[ done | fail | progress ] for forwarding actions to newDefer
      deferred[ tuple[1] ](function() { // 循环三次就是执行:
        //deferrred.done(callback); // done是注册callback,意思是完成以后执行callback,前一个promise对象resolve时会执行callback。
        //deferrred.reject(callback); // 类似
        //deferrred.notify(callback); // 类似
        //每次都用相同的callback。

        //这是注册内部callback(匿名函数),要注册到当前deferred实例,deferred是then所在的实例,then递归调用Deferred新产生的实例也是deferred,但它是传递给回调,因此回调的newDefer是新建的子实例。奥妙就在于回调匿名函数function(newDefer){},在递归调用Deferred新建一套实例时用回调函数代码引用当前已经存在的实例!

        //当resolve时会执行内部callback匿名函数,会执行应用callback(也就是then里面的callback),然后再resolve当前promise对象,执行下一个then里面的callback。

        //为什么不直接执行应用callback是因为要处理解决当前promise对象,要判断应用callback是否返回promise对象,所以写了一段内部callback。

        var returned = fn && fn.apply( this, arguments ); //fn是从then参数获取的应用callback,执行then里面的应用callback。
        if ( returned && jQuery.isFunction( returned.promise ) ) { //下面代码的目的就是要 resolve当前then返回的promise对象从而执行下一个then里面的callback
          returned.promise()
            .done( newDefer.resolve ) //如果执行then里面的callback返回promise对象,就注册一个callback,否则就直接执行resolveWith
            .fail( newDefer.reject )
            .progress( newDefer.notify );
        } else {
          newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
          // 第一次循环时执行newDefer.resolveWith(promise,[returned]),就是直接去执行下一个then里面的callback并且传递执行应用callback返回的数据。

          //其它循环执行rejectWith/NotifyWith,类似。

        }
      });
      fns = null;
    }).promise(); //用promise()方法获取promise对象实例返回,promise对象实例只有部分方法,而deferred对象实例有所有的方法
  },

可能有点乱有点晕,下面小结一下:

执行then时把内部callback注册存储在list[],当resolve当前promise对象时,就是去list[]找callback执行,内部callback会执行应用callback(then里面的callback),再根据返回值resolve当前promise对象,从而执行下一个then里面的callback。

jQuery Derferred代码比es6-promise复杂,es6-promise用父子实例,then返回的实例是子实例,then把callback存储到父实例,这样当resolve父实例时就从父实例找callback执行即可,比较简单。但jQuery defer设计了一个Callbacks函数,相当于定义了一个类,有public/private方法,有self{}和list[]。执行then时构造一个内部callback存储在当前实例(父实例)的list[],当resolve当前实例时就去list[]找内部callback执行,内部callback会执行应用callback(then里面的callback),再resolve返回的子实例去list[]执行内部callback,这就是执行下一个then()里面的callback。每一层then都要重新递归执行jQuery.Deferred(func)新建一套子实例返回,下一个then就是新建子实例的内置方法,当执行下一个then时,then所在的实例就是父实例,递归执行Deferred新建实例就是子实例,如果连写多个.then则如此层层嵌套递归。递归是很复杂的,它是把当前程序代码又执行一遍,又产生一套实例,两套代码和实例完全一样,嵌套递归多少层重复执行多少次都不出错,如何区分处理父子实例需要高超的对象编程技术。

 所以jQuery Deferred程序和前端框架编译程序一样都是递归程序,重复执行多次就产生多个实例,就递归多个子节点,每一次递归执行时的位置和环境有所变化。

所以通用软件要解决复杂编程技术问题,而相比之下应用软件一般都不涉及复杂编程技术,是两个相当不同的编程世界。

最后一个问题就是如何修改实例的state状态:

state是在Deferred实例中定义的:
  Deferred: function( func ) {
    var tuples = [
      // action, add listener, listener list, final state
      [ "resolve", "done", jQuery.Callbacks("once memory"), "resolved" ],
      [ "reject", "fail", jQuery.Callbacks("once memory"), "rejected" ],
      [ "notify", "progress", jQuery.Callbacks("memory") ]
    ],
    state = "pending",

有一个内部callback负责修改state状态,其代码和注册位置:
    jQuery.each( tuples, function( i, tuple ) {
      stateString = tuple[ 3 ];
      // Handle state
      if ( stateString ) { // resolved或rejected
        list.add(function() {
        // state = [ resolved | rejected ]
        state = stateString;

        // [ reject_list | resolve_list ].disable; progress_list.lock
      }, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock ); //如果resolved就disable rejected,如果rejected就disable resolved
    }

执行内部callback时传递promise为作用域:
list[ firingIndex ].apply( data[ 0 ], data[ 1 ] // data[0]=promise data[1]=resolve参数

那么执行function(){state = stateString;} 时就是修改实例中的state,传递作用域为promise有何意义?执行这个方法时是在Callbacks程序空间,如何能访问到deferred实例中的state呢?

这个函数是在Deferred程序空间构造的,因此可以访问state,很简单,虽然把它放到list[]中,再调用执行,但函数是对象,就是引用,这个函数对象是在Deferred
程序空间定义的,就能访问Deferred程序空间的变量数据。

jQuery Deferred没有采用new实例方法,而是利用js对象引用机制,给阅读程序带来很大的迷惑,函数封装绕来绕去就是访问函数定义的一个对象,按程序机制,函数执行完就清除不存在了,包括局部数据都清除不存在了,但它还能在之后访问函数定义的对象。

promise机制其实类似trigger/on机制,都是先注册保存callback,再事件触发执行callback,只是它可以连写,形式上非常直观简洁,能连写是因为它返回promise对象,返回promise对象可不简单,就要涉及递归编程技术,trigger/on之类的程序不是递归程序,所以不能连写,能连写必然是递归程序。而callback的注册保存方法各种软件各不相同,用new实例方法最简明,没有迷惑,不用new实例方法就更复杂,很迷惑,因为那么多独立定义的函数和变量,在不同的程序空间,有些看似没关系,你如何能保证随时随地从某一个函数能访问到某一个变量?

还有一些处理细节也挺复杂的,本文不再分析。。。

bye

原文地址:https://www.cnblogs.com/pzhu1/p/9106349.html