2011/02/08

Javascript Frameworks

【jQuery】

jQuery 雖然稱爲 Javascript 的「Framework」,但它其實更像一套「Toolkit」。
而且是一套非常強的 Javascript Toolkit,族繁不及備載的外掛、五花八門的特效等等。

jQuery 包好了許多函式,叫用這些函式,可以很快速地完成從前需要花許多功夫的效果。
在 jQuery 這個自成體系的工具包裡,DOM 的操作變得簡單、易用、快速。
除了這些,jQuery 也提供了它自成一系的 Ajax 操作,還有各種動畫特效等。

撰寫 Javascript 很多時候都是在處理或控制 DOM 元素。
修改某個 div 裡的內容、刪除某列 tr、爲某個 id 的元素加上指定的 class ...
許多想得到的 DOM 操作,使用 jQuery 的話,可以省下不少程式碼數量。

引入 jQuery:


在 HTML 文件中引入 jQuery 函式庫之後,就可以透過「jQuery」或其別名「$」使用它。
例如很多時候,我們希望使用者在整個 DOM 文件建構好之後,再來執行 Javascript 的直譯動作,
傳統的 Javascript 會這樣控制:
window.onReady = function()
{
    // your codes
}
在 jQuery 裡,則是這樣作:
jQuery(document).ready(function()
{
    // your codes
});
或是
$(document).ready(function()
{
    // your codes
});
另一種比較嚴謹的做法是:
(function($){
    $(document).ready(function(){
        // your codes
    });
}(jQuery));
最後一種寫法直接定義並執行一個匿名函式 function($),
function($) 中的 $ 指的是要傳入這個匿名函式的參數,
而這個傳入的參數,寫在最後一行的掛號裡,即 (jQuery)。
這樣的作法可以避免跟其他也使用 $ 作爲名稱空間 prefix 的框架衝突,
如此一來,在這個匿名函式 function($) 的範圍內,$ 確定僅是 jQuery。

如果有用 Javascript 做過 DOM 元素控制(寫過 Javascript 幾乎都做過),
那麼改用 jQuery 來作同樣事情時,一定會驚豔於 jQuery 的簡便、易用。
例如選擇 DOM 裡面某個 id 的元素,單純的 Javascript 寫法是:
var a = document.getElementById("some_id");
使用 jQuery 則可以這樣寫:
var a = $("#some_id");





【Mootools】

MooTools 是一個用 JavaScript 原本應有的方式來寫 JavaScript 的框架(Framework)。
其立意是實作一個跟 JavaScript 非常相似的 API 並且針對各個部分加以強化。

引入 Mootools:



【YUI】

YUI 使用:




【ExtJS】

ExtJS 使用:



【RightJS】

RightJS 使用:






Roadmap

http://docs.jquery.com/JQuery_1.5_Roadmap
http://www.sencha.com/products/js/roadmap.php
http://yuilibrary.com/projects/yui3/roadmap
http://rightjs.org/blog



Reference:
01. http://www.ibm.com/developerworks/cn/web/wa-jsframeworks
02. http://www.ibm.com/developerworks/web/library/wa-aj-extjs
03. http://clay0529.blogspot.com/2010/02/yui-3.html
04. http://yufei34514.blog.163.com/blog/static/407836552009114154340
05. http://www.ajaxray.com/blog/2009/04/05/extjs-quick-start-guide-for-jquery-developers-javascript-howto
06. http://jqueryvsmootools.com