谈谈jQuery之Deferred源码剖析

一、前言

大约在夏季，我们谈过ES6的Promise，其实在ES6前jQuery早就有了Promise，也就是我们所知道的Deferred对象，宗旨当然也和ES6的Promise一样，通过链式调用，避免层层嵌套，如下：

//jquery版本大于1.8
function runAsync(){
  var def = $.Deferred();
  setTimeout(function(){
    console.log('I am done');
    def.resolve('whatever');
  }, 1000);
  return def;
}
runAsync().then(function(msg){
  console.log(msg);//=>打印'whatever'
}).done(function(msg){
  console.log(msg);//=>打印'undefined'
});

注：从jQuery1.8版本开始，then方法会返回一个新的受限制的deferred对象，即deferred.promise()—后续源码解读中我们会更加全面地了解到。因此，上述代码done中会打印'undefined'。

好了，通过上述示例代码，短暂的回顾了jQuery的Deferred使用后，我们一起来看看jQuery是怎么实现Deferred，当然解读jQuery的版本是大于1.8。

二、jQuery之Deferred源码剖析

整体架构，如下：

jQuery.extend( {
  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",
      promise = {
        state: function() {...},
        always: function() {...},
        then: function() {...},
        promise: function( obj ) {...}
      },
      deferred = {};
    // Keep pipe for back-compat
    promise.pipe = promise.then;
    // Add list-specific methods
    jQuery.each( tuples, function( i, tuple ) {} );
    // Make the deferred a promise
    promise.promise( deferred );
    // Call given func if any
    if ( func ) {
      func.call( deferred, deferred );
    }
    // All done!
    return deferred;
  }
}

整体架构上，如果你了解设计模式中的工厂模式，那么不难看出，jQuery.Deferred就是一个工厂，每次执行jQuery.Deferred时，都会返回一个加工好的deferred对象。

接下来，我们再一步一步剖析上述代码。

首先，是数组tuples：

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" ) ]
]

tuples一开始就为我们预先定义了三种状态—‘resolved'、'rejected'以及'pending'，以及它们所对应的一系列值和操作，值得注意的是每种状态中，都调用了一个jQuery.Callbacks方法，如下：

它是个什么玩意儿？

jQuery.Callbacks = function( options ) {

  // Convert options from String-formatted to Object-formatted if needed
  // (we check in cache first)
  options = typeof options === "string" ?
    createOptions( options ) :
    jQuery.extend( {}, options );

  var // Flag to know if list is currently firing
    firing,

    // Last fire value for non-forgettable lists
    memory,

    // Flag to know if list was already fired
    fired,

    // Flag to prevent firing
    locked,

    // Actual callback list
    list = [],

    // Queue of execution data for repeatable lists
    queue = [],

    // Index of currently firing callback (modified by add/remove as needed)
    firingIndex = -1,

    // Fire callbacks
    fire = function() {

      // Enforce single-firing
      locked = options.once;

      // Execute callbacks for all pending executions,
      // respecting firingIndex overrides and runtime changes
      fired = firing = true;
      for ( ; queue.length; firingIndex = -1 ) {
        memory = queue.shift();
        while ( ++firingIndex < list.length ) {

          // Run callback and check for early termination
          if ( list[ firingIndex ].apply( memory[ 0 ], memory[ 1 ] ) === false &&
            options.stopOnFalse ) {

            // Jump to end and forget the data so .add doesn't re-fire
            firingIndex = list.length;
            memory = false;
          }
        }
      }

      // Forget the data if we're done with it
      if ( !options.memory ) {
        memory = false;
      }

      firing = false;

      // Clean up if we're done firing for good
      if ( locked ) {

        // Keep an empty list if we have data for future add calls
        if ( memory ) {
          list = [];

        // Otherwise, this object is spent
        } else {
          list = "";
        }
      }
    },

    // Actual Callbacks object
    self = {

      // Add a callback or a collection of callbacks to the list
      add: function() {
        if ( list ) {

          // If we have memory from a past run, we should fire after adding
          if ( memory && !firing ) {
            firingIndex = list.length - 1;
            queue.push( memory );
          }

          ( function add( args ) {
            jQuery.each( args, function( _, arg ) {
              if ( jQuery.isFunction( arg ) ) {
                if ( !options.unique || !self.has( arg ) ) {
                  list.push( arg );
                }
              } else if ( arg && arg.length && jQuery.type( arg ) !== "string" ) {

                // Inspect recursively
                add( arg );
              }
            } );
          } )( arguments );

          if ( memory && !firing ) {
            fire();
          }
        }
        return this;
      },

      // Remove a callback from the list
      remove: function() {
        jQuery.each( arguments, function( _, arg ) {
          var index;
          while ( ( index = jQuery.inArray( arg, list, index ) ) > -1 ) {
            list.splice( index, 1 );

            // Handle firing indexes
            if ( index <= firingIndex ) {
              firingIndex--;
            }
          }
        } );
        return this;
      },

      // Check if a given callback is in the list.
      // If no argument is given, return whether or not list has callbacks attached.
      has: function( fn ) {
        return fn ?
          jQuery.inArray( fn, list ) > -1 :
          list.length > 0;
      },

      // Remove all callbacks from the list
      empty: function() {
        if ( list ) {
          list = [];
        }
        return this;
      },

      // Disable .fire and .add
      // Abort any current/pending executions
      // Clear all callbacks and values
      disable: function() {
        locked = queue = [];
        list = memory = "";
        return this;
      },
      disabled: function() {
        return !list;
      },

      // Disable .fire
      // Also disable .add unless we have memory (since it would have no effect)
      // Abort any pending executions
      lock: function() {
        locked = true;
        if ( !memory ) {
          self.disable();
        }
        return this;
      },
      locked: function() {
        return !!locked;
      },

      // Call all callbacks with the given context and arguments
      fireWith: function( context, args ) {
        if ( !locked ) {
          args = args || [];
          args = [ context, args.slice ? args.slice() : args ];
          queue.push( args );
          if ( !firing ) {
            fire();
          }
        }
        return this;
      },

      // Call all the callbacks with the given arguments
      fire: function() {
        self.fireWith( this, arguments );
        return this;
      },

      // To know if the callbacks have already been called at least once
      fired: function() {
        return !!fired;
      }
    };

  return self;
};