Ming Apps

JQUERY 1.5.2 RELEASED: Deferred Object Tutorial

Posted on: 2011/04/02

jQuery logo
原文網址: http://blog.jquery.com/2011/03/31/jquery-152-released/

 

大家已經可以利用Google CDN及Microsoft CDN 載入jQuery 1.5.2:

Google CDN: https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js
Microsoft CDN: http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js

 

jQuery是我實習時第一種接觸到的javascript library/framework,

使用起來極其方便,

大部份function可以chain起來,

更了解更多AJAX和callback的使用。

 

jQuery 的update速度不錯,

筆者上年實習的時候剛出1.4,

那時還說運算速度上有很大的提升。

 

今次一看,原來在今年1月尾推出了jQuery 1.5,

3月31號剛推出了 jQuery 1.5.2!

Version 1.5與之前version有兩大分別,

一個是Ajax Rewrite,另一個是Deferred Object.

 

jQuery新增了一個jqXHR的Object,

當大家開始Ajax call,

return object正是jqXHR,

它可算是一個cross browser platform的XMLHttpRequest Object(superset of the XMLHTTPRequest object) ,

大家可以當正常Ajax call之外,

還有Statuscode(404! page not found!),

還有很多可以參考

 

Deferred Object又是是甚麼呢?

Deferred Object原意是在function中實現callback function,

亦支援chainable functions,

是first in first out的形式,

按先後次序進行function call.

 

大家可以到: http://jsfiddle.net/hN5Eb/1/ 測試一下Deferred Object是甚麼。

$.when( x(), y(), z()) 可以輸入多個function按次序進行這些function,

大家便可以跟據Event不同的情況作出相應動作,

例如大家可在進行中run其他function(Deferred.then),

完成callback(Deferred.done)等多個default function.

 

Ajax方面亦都包含了deferred object,

大家可以看看原來jquery的ajax call是:

$.post("test.php",{func:"getNameAndTime"},
function(data){
alert(data.name); // John
console.log(data.time); //  2pm
}, "json");

但現在你則可以利用deferred object寫成 :

// $.get, an ajax request, is asynchronous by default.
var req = $.get('foo.htm')
.success(function( response ){
// do something with the response
})
.error(function(){
// do something if the request failed
});

// this might execute before the $.get() above is complete
doSomethingAwesome();

// something additional to execute upon success,
// which might, or might not,
// have fired by now.  With $.ajax deferreds built-in, it doesn't matter.
req.success(function( response ){
// do something more with the response
// this will fire when success normally fires, or fire immediately
// if prior success callbacks have already fired
});

Success, error,或者 complete handler 已經可以不只一個,

而且可以以先後次序方式,自己管理callback 次序。

 

大家可以從上面的example看到,

callback已經可以在AJAX request,

甚至係其他function完結(Deferred.done)後,

進行你的callback.

從前的ajax callback總是要密密麻麻在function(data)中進行,

這種寫法看來是更加簡潔和具直覺性,

是個相當好的「Reordering」哈哈~

 

絕對建議大家到呢一個jQuery tutorial on deferred object,

了解更多deferred object的使用。

 

或者筆者遲些將其翻譯成中文吧~

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

%d 位部落客按了讚: