time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > Jquery > jQuery回调、递延对象总结(二)then方法详解

jQuery回调、递延对象总结(二)then方法详解

时间:2014-01-07 21:16 点击:5127次 字体:[ ]




前言:

什么叫做递延对象,生成一个递延对象只需调用jQuery.Deferred函数,deferred这个单词译为延期,推迟,即延迟的意思,那么在jQuery中

又是如何表达延迟的呢,从递延对象中的then方法或许能找到这种延迟的行为,本文重点解读递延对象中的then方法

 

设计思路:

在递延对象构造中,分别有三组回调对象,每一组回调对象都有与之对应的行为(action,add listener),和状态(final state),

这些行为都归纳为递延对象中的(触发回调,添加函数到回调列表中等)方法

 

jQuery.Deferred构造源码

Deferred构造源码除了then函数源码外,其他都非常简单,这里不做过多解读,后面将重点讨论then方法
 

  1. jQuery.extend({  
  2.  
  3.     Deferred: function( func ) {  
  4.         var tuples = [  
  5.                 // action, add listener, listener list, final state  
  6.                 [ "resolve""done", jQuery.Callbacks("once memory"), "resolved" ],  
  7.                 [ "reject""fail", jQuery.Callbacks("once memory"), "rejected" ],  
  8.                 [ "notify""progress", jQuery.Callbacks("memory") ]  
  9.             ],  
  10.             state = "pending",  
  11.             promise = {  
  12.                 state: function() {  
  13.                     return state;  
  14.                 },  
  15.                 always: function() {  
  16.                     deferred.done( arguments ).fail( arguments );  
  17.                     return this;  
  18.                 },  
  19.                 then: function/* fnDone, fnFail, fnProgress */ ) {  
  20.                     var fns = arguments;  
  21.                     return jQuery.Deferred(function( newDefer ) {  
  22.                         jQuery.each( tuples, function( i, tuple ) {  
  23.                             var action = tuple[ 0 ],  
  24.                                 fn = jQuery.isFunction( fns[ i ] ) && fns[ i ];  
  25.                             // deferred[ done | fail | progress ] for forwarding actions to newDefer  
  26.                             deferred[ tuple[1] ](function() {  
  27.                                 var returned = fn && fn.apply( this, arguments );  
  28.                                 if ( returned && jQuery.isFunction( returned.promise ) ) {  
  29.                                     returned.promise()  
  30.                                         .done( newDefer.resolve )  
  31.                                         .fail( newDefer.reject )  
  32.                                         .progress( newDefer.notify );  
  33.                                 } else {  
  34.                                     newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );  
  35.                                 }  
  36.                             });  
  37.                         });  
  38.                         fns = null;  
  39.                     }).promise();  
  40.                 },  
  41.                 // Get a promise for this deferred  
  42.                 // If obj is provided, the promise aspect is added to the object  
  43.                 promise: function( obj ) {  
  44.                     return obj != null ? jQuery.extend( obj, promise ) : promise;  
  45.                 }  
  46.             },  
  47.             deferred = {};  
  48.  
  49.         // Keep pipe for back-compat  
  50.         promise.pipe = promise.then;  
  51.  
  52.         // Add list-specific methods  
  53.         jQuery.each( tuples, function( i, tuple ) {  
  54.             var list = tuple[ 2 ],  
  55.                 stateString = tuple[ 3 ];  
  56.  
  57.             // promise[ done | fail | progress ] = list.add  
  58.             promise[ tuple[1] ] = list.add;  
  59.  
  60.             // Handle state  
  61.             if ( stateString ) {  
  62.                 list.add(function() {  
  63.                     // state = [ resolved | rejected ]  
  64.                     state = stateString;  
  65.  
  66.                 // [ reject_list | resolve_list ].disable; progress_list.lock  
  67.                 // 可以看看上篇中lock方法的各种场景调用  
  68.                 }, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock );  
  69.             }  
  70.  
  71.             // deferred[ resolve | reject | notify ]  
  72.             deferred[ tuple[0] ] = function() {  
  73.                 // 如果方法不被借用,那么回调中的this对象为promise,没有触发回调的方法  
  74.                 deferred[ tuple[0] + "With" ]( this === deferred ? promise : this, arguments );  
  75.                 return this;  
  76.             };  
  77.             deferred[ tuple[0] + "With" ] = list.fireWith;  
  78.         });  
  79.  
  80.         // Make the deferred a promise  
  81.         promise.promise( deferred );  
  82.  
  83.         // Call given func if any  
  84.         // 作用于then方法  
  85.         if ( func ) {  
  86.             func.call( deferred, deferred );  
  87.         }  
  88.  
  89.         // All done!  
  90.         return deferred;  
  91.     }  
  92. }); 

 



本文地址 : http://www.fengfly.com/plus/view-214465-1.html
标签: jquery 回调 递延对象 then方法
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: