jQuery之Deferred源码剖析.docVIP

jQuery之Deferred源码剖析 一、前言 大约在夏季，我们谈过ES6的Promise（详见here），其实在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对象，即mise()—后续源码解读中我们会更加全面地了解到。因此，上述代码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 mise( 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 ], [ r