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 還可以標記出「連結」:從這裡可以連結到哪個文件、哪個位置。