码迷,mamicode.com
首页 > Web开发 > 详细

jQuery->Deferred then

时间:2014-05-10 02:42:46      阅读:473      评论:0      收藏:0      [点我收藏+]

标签:style   blog   class   code   java   tar   

 

合格的项目经理应该具备哪些技能?

奥,不知道哎!但我知道不合格的项目经理具备哪些特点

1. 不看代码

2. 识别不了平庸与卓越

3. 催进度

 

1. then返回值是什么?var a = aDeferred.then(),a和aDeferred是什么关系?

then的返回值是一个promise,也就是没有触发功能(resolve,reject,notify)的Deferred对象
a和aDeferred啥关系也不是,a是新生成的promise。

 

 

2. $.Deferred(fn)是什么意思?

$.Deferred(fn)等价于:
var t = $.Deferred(); fn.call(t , t);
即在t的作用域上,函数fn以t为参数做调用。

 

3. var t = $.Deferred().then(); t和下面代码中then函数中的newDefer参数是什么关系?

newDefer中的属性copy自t,t是newDefer的子集

1
2
3
4
5
then: function() {
    var fns = arguments;
    return jQuery.Deferred(function( newDefer ) {...
    }).promise();
}  



4 tuples来自哪里?deferred指的是谁?

假设调用t.then(),tuples是生成t时产生的,deferred同理

bubuko.com,布布扣
    then: function( /* fnDone, fnFail, fnProgress */ ) {
        var fns = arguments;
        return jQuery.Deferred(function( newDefer ) {
            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() {
                    var returned = fn && fn.apply( this, arguments );
                    if ( returned && jQuery.isFunction( returned.promise ) ) {
                        returned.promise()
                            .done( newDefer.resolve )
                            .fail( newDefer.reject )
                            .progress( newDefer.notify );
                    } else {
                        newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
                    }
                });
            });
            fns = null;
        }).promise();
    }
bubuko.com,布布扣

 


5.$.each(arr, fn);函数fn中的this对象是谁?

arr[i],$.each中对fn的调用进行了作用域的绑定

bubuko.com,布布扣
each: function( obj, callback, args ) {
    ... 
    } else {
         if ( isArray ) {
             for ( ; i < length; i++ ) {
                 value = callback.call( obj[ i ], i, obj[ i ] );
                 ...
             }
        }
    }
    return obj;
}
bubuko.com,布布扣


6. deferred[ tuple[1] ](fn)在做什么?

将fn添加到deferred的回调函数列表,以便deferred.resolve/reject()触发后回调fn

7. jQuery.isFunction( returned.promise )是什么意思?

判断returned是否至少是promise对象。

8. returned.promise().done( newDefer.resolve )在做什么?

为returned添加处理完成的回调函数,以便returned.resolve()后去执行newDefer.resolve()

9 fn是函数,
jQuery.isFunction( fn().promise ) === false;
$.Deferred().done(fn)与$.Deferred().then(fn)有何区别?

$.Deferred().then(fn)缺少回调函数绑定时,两者没有区别,后者会在结束时触发新生成的Deferred对象的resolveWith方法。

10 then 和pipe的区别

jquery早期版本中pipe的功能和目前(jquery1.10.1)then的功能是一致的,目前pipe是then的别名,考虑向后兼容

11.then的实际用途[1]

上面的情况下,done和then方式的调用几乎没有区别
看看下面这种情况,ajax请求,返回的数据用于修改页面的值。

bubuko.com,布布扣
$.ajax("your/url", {
    dataType: "json"
}).done(
    function(data) {
        $.each(data, function(key, value) {
    $("#" + key).val(value);
    });
});

bubuko.com,布布扣

现在假设value并不是最终要展示的值,需要对value进行转换,value = doSomethingWith(value);如果doSomethingWith包含了异步操作,怎么确保异步操作之后将正确的结果显示出来呢?

这个时候就用到了then,第一个ajax,称作ajax1,响应完成后,流程转到了then,then中返回ajax(延迟对象) ajax2,最终,ajax2调用完成触发resolve执行done添加的函数队列,将结果显示出来。

 

bubuko.com,布布扣
    $.ajax("your/url", {
        dataType: "json"
    }).then(function(theOriginalData) {
        return $.ajax("your/web/service/doSomethingWith", {
            data: theOriginalData,
            dataType: "json"
        });
    }).done(function(theFinalData) {
        $.each(theFinalData, function(key, value) {
            $("#" + key).val(value);
        });
    });
bubuko.com,布布扣

 

12 异步操作之间数据是如何传递?

以上面的示例说明,ajax1处理成功之后,会调用resolveWith触发回调函数队列

bubuko.com,布布扣
  deferred.resolveWith( callbackContext, [ theOriginalData, statusText, jqXHR ] );->
    
  (function() {
        var returned = fn && fn.apply( this, arguments );
        if ( returned && jQuery.isFunction( returned.promise ) ) {
            returned.promise()
                .done( newDefer.resolve )
                .fail( newDefer.reject )
                .progress( newDefer.notify );
        } else {
            newDefer[ action + "With" ]( this === promise ? newDefer.promise() : this, fn ? [ returned ] : arguments );
        }
    }).apply(callbackContext, [ theOriginalData, statusText, jqXHR ]); ->
    
    fn.apply( this, arguments )-> //触发另一个
    
    (function(theOriginalData) {
        return $.ajax("your/web/service/doSomethingWith", {
            data: theOriginalData,
            dataType: "json"
        });
    }).apply(callbackContext, [ theOriginalData, statusText, jqXHR ]);->
    
    $.ajax("your/web/service/doSomethingWith", {
            data: theOriginalData,
            dataType: "json"
    }); -> //异步操作完成后
    
    deferred.resolveWith( callbackContext, [ theFinalData, statusText, jqXHR ] );->
    
    newDefer.resolve( callbackContext, [ theFinalData, statusText, jqXHR ] ); ->
    
    (function(theFinalData) {
        $.each(theFinalData, function(key, value) {
            $("#" + key).val(value);
        });
    }).apply( callbackContext, [ theFinalData, statusText, jqXHR ] ); 
bubuko.com,布布扣

 


[1]代码来源:understanding-deferred-pipe 

[2]函数上下文中确定this的值的规则

this的值由调用者提供,由调用函数的方式决定,如果调用括号()左边是引用类型,this为这个引用类型值的base对象,其他情况this为全局对象

bubuko.com,布布扣
function foo() {
    console.log(this);
}

foo(); // global, because

var fooReference = {
    base: global,
    propertyName: ‘foo‘
};

// 另一种调用形式
foo.prototype.constructor(); //foo.prototype, because

var fooPrototypeConstructorReference = {
    base: foo.prototype,
    propertyName: ‘constructor‘
};

思考下面函数表达式:
(function() {
    console.log(this); // null => global
})();

function foo() {// 解释 http://dmitrysoshnikov.com/ecmascript/chapter-3-this/#comment-342
    function bar() {
        console.log(this); // => global
    }
    bar();
}
bubuko.com,布布扣

 [3]源码1.10.1

 

jQuery->Deferred then,布布扣,bubuko.com

jQuery->Deferred then

标签:style   blog   class   code   java   tar   

原文地址:http://www.cnblogs.com/sudo/p/3719700.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!