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

2011/02/07

Javascript


初次接觸 Javascript 時,沒有認真把它當成一門程式語言來對待。
我想,這應該也是許多人的通病。

它的名字真的害人不淺,如果本身有以貌取人的毛病,那慘了:
「輕量級的 Java 語言嘛,Java 式的 Script 嘛,對吧?」

千 萬 別 這 麼 想 !

Javascript 跟 Java 沒有關係!
Javascript 絕對不只是 Script 那麼單純!

最近要做一份 Javascript Frameworks 的文件。
我發現,如果要寫一份關於 Javascript Frameworks 的文件,
沒有先弄清楚 Javascript,似乎不大對。

但是要全部記錄在同一篇,也太自不量力了。
Javascript Frameworks 每一套幾乎都可以各自出一本書了。
Javascript 當然更不用說了,市面上 Javascript 的書成百上千。

我寫這篇文章,記錄跟整理我對 Javascript 的瞭解,幫自己作個備忘。
內容會持續更新與修正,希望大家指正與教導!




資訊技術的世界,一個十年大概就像社會中一個世紀那麼遙遠。
Javascript 的出現,對 2010 的我們來說,就像是曾祖輩的事情。
雖然 Javascript 第一次出現只不過是在 1995 年而已。

有些古老的歷史對現在新接觸 Javascript 的人來說,似乎不是那麼重要了。
因爲瀏覽器大戰實在太遙遠了,就像是第一次世界大戰那樣。
但 Javascript 的由來、爲何而存在、是怎麼樣的一個存在,我想都應該值得搞清楚。



故事的開始,要從網際網路(Internet)說起。

Internet 的出現,最初是美國在學術與軍事應用上的考量。
從學術方面簡單說,就是爲了讓各地學術單位、研究人員可以交流分享成果。

那該怎麼樣來呈現 Internet 上的資訊呢?
又該用什麼樣的工具來瀏覽 Internet 上的資訊呢?
於是,HTML 和瀏覽器粉末登場。

從學術分享的目的出發,HTML 最初設計出來就是爲了呈現文字。
因爲科學研究報告的許多內容就是文字,或者再加上些圖片。

HTML 完整的稱呼是 HyperText Markup Language。

Markup Language 是標記語言,就是用規定的格式將某些內容標記起來。
例如,買手搖式飲料的時候,老闆會在杯子上面寫好哪杯是珍奶,哪杯是綠茶。
老闆「寫上去」那個動作就是「標記」的意思。

Hyper 在英文中則有過度的、超過的等意思。
爲什麼叫它過度的文字,或者說它是超越文字的文字?
因爲 HTML 除了可以標記出內容的結構:哪邊是段落、哪邊是標題、哪些又是表格;
HTML 還可以標記出「連結」:從這裡可以連結到哪個文件、哪個位置。