标签：变化 callbacks 创建 pre lock test log 升级 返回
通过艾伦的博客，我们能看出，jQuery的promise和其他回调都是通过jQuery.Callbacks实现的。所以我们一起简单看看jQuery.Deferred和jQuery.Callbacks。来看看关于他们的一些提问。
jQuery.Callbacks有四种配置，分别是once、memory、unique、stopOnFalse。而jQuery.Callbacks的配置形式却和以往我们熟悉的不同，不是使用json，而是使用字符串的形式配置的，这是为什么呢？
答：jQuery.Callbacks的配置形式，确实很怪异，jQuery.Callbacks使用了一个createOptions函数将字符串转为了json。
var rnotwhite = ( /\S+/g ); function createOptions( options ) { var object = {}; jQuery.each( options.match( rnotwhite ) || [], function( _, flag ) { object[ flag ] = true; }); return object; }
如"once memory unique"字符串，最终会转为{"once":true,"memory":true,"unique":true}。但是笔者想问为什么不直接使用json呢？
像这种使用字符串配置的形式，JavaScript中也是有的，js中的正则表达式就是这种配置形式。
如：
var patt = new RegExp("e","gim");
这里的“gim”就是配置项。但是这种配置方法很难让人理解，这样不符合jQuery追求的理念，所以笔者认为jQuery.Callbacks使用字符串配置代替数组配置是jQuery里面的一个败笔。
答：这是笔者以前一直疑惑的一个问题。我们先跳出jQuery，先使用标准的JavaScript，看看他的异步函数一定是异步的吗？
测试代码如下：
setTimeout(function(){ console.log(0); },0); setTimeout(function(){ console.log(1); },0);
console.log(2);
非常简单的一行代码，我们也很清楚输出结果是“201”。JavaScript是单线程执行的，所以异步函数的回调会在后边执行。同时异步的回调函数会被放入队列中，所以会按照进入队列的顺序执行下来。注意setTimeout的时间参数一定要给0，因为setTimeout的回调时间默认值不一定是0。
我们把中间的输出1的函数的setTimeout去除，让其不再异步。
setTimeout(function(){ console.log(0); },0); console.log(1); console.log(2);
结果变为了“120”。这个结果不需要作说明，仅是为了做对比而做的实验。
现在换位使用异步函数的语法，将输出1的部分用es7的异步函数包裹：
async function test(){ console.log(1); } setTimeout(function(){ console.log(0); },0); test(); //注意test执行的时候不能给await修饰，否则log(2)一定在test之后执行
console.log(2);
结果是“120”。
我们再将异步函数转为promise。
setTimeout(function(){
console.log(0);
},0);
new Promise(function(resolve){
console.log(1)
resolve();
})
console.log(2);
上述代码应该和异步函数结果相同，结果也确实相同，结果是“120”。
从这些例子我们可以看出，使用promise封装的函数（异步函数），如果其内容不是异步的，promise执行的行为也与非异步函数的执行结果是相同。这说明异步函数也好，promise也好，仅是改变了回调方式，并不改变执行顺序。如果使用异步函数去封装非异步函数，回调的方法会发生变化，但是回调部分并不会“异步执行”。
因此jQuery.Deferred封装的函数，也应该有这样的行为。
setTimeout(function(){ console.log(0); },0); $.Deferred().resolve().then(function(){ console.log(1); }); console.log(2);
如上的结果也是“120”。
我们也可以看看jQuery.Callbacks源码，里面是不含有setTimeout，或者其他可以返回异步回调的。因此异步函数也好，promise也好，jQuery.Deferred也好，他们改变的都只是回调的方式。不过这是jQuery2.0的结果，jQuery3.0的结果是“201”，有兴趣的话大家可以自己尝试。
答：简单的分析一下源码结构：
jQuery.Callbacks = function( options ) { var list = []; var fire = function() { list[ firingIndex ].apply( memory[ 0 ], memory[ 1 ] ) ; } return { add: function() { ( function add( args ) { jQuery.each( args, function( _, arg ) { list.push( arg ); } ); } )( arguments ); return this; }, fireWith: function( context, args ) { args = [ context, args.slice ? args.slice() : args ]; queue.push( args ); if ( !firing ) { fire(); } return this; }, fire: function() { self.fireWith( this, arguments ); return this; }, }; };
从这段代码可以清楚看到，通过add我们将函数保存在内部私有变量list里面，然后使用apply调用。对外暴露的函数有fireWith和fire。fireWith的context参数是最终传递给了apply，所以是我们回调中的this就是这个context。而fire函数里面调用了fireWith，传递的是自身this，所以回调的函数中的this是Callbacks对象。
答：标准的promise中的this，是指向全局作用域的，例如window。
var d = new Promise((r)=>{r()}) d.then(function(){console.log(this)}) //注意，此处不可以用()=>{console.log(this)}
输出的是window，证明列我们之前的说法。
我们再来看看jQuery.Deferred的示意源码：
jQuery.extend( { Deferred: function( func ) { var tuples = [ [ "resolve", "done", jQuery.Callbacks( "once memory" ), "resolved" ], [ "reject", "fail", jQuery.Callbacks( "once memory" ), "rejected" ], [ "notify", "progress", jQuery.Callbacks( "memory" ) ] ], state = "pending", promise = { then: function( /* fnDone, fnFail, fnProgress */ ) { var fns = arguments; return jQuery.Deferred( function( newDefer ) { jQuery.each( tuples, function( i, tuple ) { var fn = jQuery.isFunction( fns[ i ] ) && fns[ i ]; // deferred[ done | fail | progress ] for forwarding actions to newDefer deferred[ tuple[ 1 ] ]( function() { var returned = fn && fn.apply( this, arguments ); if ( returned && jQuery.isFunction( returned.promise ) ) { returned.promise() .progress( newDefer.notify ) .done( newDefer.resolve ) .fail( newDefer.reject ); } else { newDefer[ tuple[ 0 ] + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments ); } } ); } ); fns = null; } ).promise(); }, promise: function( obj ) { return obj != null ? jQuery.extend( obj, promise ) : promise; } }, deferred = {}; jQuery.each( tuples, function( i, tuple ) { var list = tuple[ 2 ], stateString = tuple[ 3 ]; promise[ tuple[ 1 ] ] = list.add; if ( stateString ) { list.add( function() { state = stateString; }, tuples[ i ^ 1 ][ 2 ].disable, tuples[ 2 ][ 2 ].lock ); } deferred[ tuple[ 0 ] ] = function() { deferred[ tuple[ 0 ] + "With" ]( this === deferred ? promise : this, arguments ); return this; }; deferred[ tuple[ 0 ] + "With" ] = list.fireWith; } ); promise.promise( deferred ); if ( func ) { func.call( deferred, deferred ); } return deferred; } } );
代码中构建了两个对象——deferred和promise。deferred相当于对异步过程的封装，而promise是对promise模型的封装。代码的最后将promise织入到deferred中。
resolve、reject、notify是promise的三种设置状态的函数，实际上这三个函数的执行策略相似，所以jQuery采用策略模式，用一个二维数组tuples将这3种策略封装起来。
代码下半部分对tuples的遍历，我们可以看到，jQuery实现了promise的done、fail、progress这三个函数，这三个函数实现方式都是对jQuery.Callbacks.add的封装。对deferred扩展了六个函数——resolve、reject、notify和resolveWith、rejectWith、notifyWith，前三个函数是对后三个函数的封装，后三个函数都是对jQuery.Callbacks.fireWith封装的。前三个函数调用后三个函数的时候，context参数都是传递的promise（除非回调函数被用bind、reject、resolve改变了上下文）。所以当deferred执行resolve、reject、notify的时候，回调函数的this是promise对象；当this使用resolveWith、rejectWith、notifyWith，或者用bind、call、apply改变了resolve、reject、notify的执行上下文的时候，回调的this是指向给定的对象。
再看上边then方法的定义，同样是遍历tuples。tuples数组定义的done、fail、progress这三个函数名称，与then的三个参数一致（done、catch、notify），这三个参数都是回调函数。回调他们的方式是deferred的done、fail、progress三个函数，我们知道这三个函数是使用promise织入进来的，真正的方法是promise的resolve、reject、notify这三个函数，因此then中的回调的this也是指向的是promise或者之前被指定的上下文。
this指向promise其实并没有太多意义，而通过xxxWith函数或者用bind、call、apply改变了resolve、reject、notify的上下文的方式调用，才是jQuery的亮点。jQuery提供这样的api的目的是为了我们可以指定promise的this，这样貌似更灵活，更方便我们操作回调。
但是，回调中this的不同，是jQuery.Deferred和标准promise一个很大的区别，这是不标准的用法，这一点一定要切记。jQuery提供的api虽然很方便，但是这样改变列promise模型，是不推荐的用法，尤其是promise如今已经收纳到es6的语法中，es7的异步语法也是基于promise的，在不支持promise的浏览器上创建出标准的promise才是jQuery更该做的，因为只有这样才能实现promise语法的对接。
答：按照jQuery的思路，deferred相当于对异步过程的封装，是promise的创建者与指挥者，但是根据jQuery的思路，将二者统一能更好的简化异步对象的模型，如：
var d = $.Deferred(); d.resolve(); d.promise().then(()=>{ ... }) //等效于 var d = $.Deferred(); d.resolve() .then(()=>{ ... })
下边的写法是不是更加简单紧凑呢？同时也符合jQuery的链式操作。简单来说，少了一个对象的概念，大家当然更容易理解。
事实上，promise还可以织入到其他对象中，如：
var d = $.Deferred(); d.resolve(); d.promise(myObj); myObj.then(()=>{ ... })
通过这种方式，jQuery可以很灵活的把promise的操作嵌入到任何对象中，非常方便。
答：是的，这个无需看源码，仅看api也很清楚，jQuery.Deferred.promise()没有实现promises/A+。例如jQuery增加了done、fail、progress等函数，这三个函数都不是promises/A+模型标准的函数名，但是却近似实现了promises/A+的概念模型。同时，promises/A+里面有catch函数，但是jQuery却没有实现，主要原因是catch是早期的ie浏览器中的关键字，因此使用了fail代替。done、progress是jQuery根据自身需要进行的扩展。
jQuery.Deferred.promise和promises/A+还有一个重要区别，就是对异常的处理。实例代码如下：
d = new Promise((resolve)=>{resolve()}) d.then(()=>{throw "error"}) .catch((e)=>{alert(e)})
标准的promise弹出error字样的alert框。
再换位jQuery.Deferred.promise测试：
$.Deferred().resolve().then(()=>{throw "error"}).fail((e)=>{alert(e)})
结果直接报错，并没有弹出alret框。
源码中jQuery没有对回调的调用做异常处理，所以无法把回调的异常自动返回rejected的promise。这一点不同使得jQuery.Deferred的异常处理非常不灵活，需要手动进行。修改为：
$.Deferred() .resolve() .then(()=>{ try{ throw "error" }catch(e){ return $.Deferred().reject(e); } }).fail((e)=>{ alert(e) })
这样才能弹出error字样的alert框。
答：当然不能直接调用，需要做转换，转换代码这里就不演示了。不能直接调用的原因是jQuery.Deferred.promise没有实现promises/A+。但是这只是一部分原因，最大的原因还是历史问题，jQuery2.0的时候，浏览器的promise模型还没有建立，所以根本不可能去考虑与浏览器的promise相互调用的问题。
答：首先要对promises/A+做到完整实现，去掉jQuery个性化的东西，如xxxWith调用、Deferred代替promise、done等不规范的函数命名。因此，在jQuery3中jQuery.Deferred做了不可升级式的调整，新的jQuery.Deferred.promise提供了一套新的api，完全实现了promises/A+规范，并且可以调用浏览器的promise相互调用。
标签：变化 callbacks 创建 pre lock test log 升级 返回
原文地址：http://www.cnblogs.com/laden666666/p/6034695.html
