jQuery 學習心得筆記 (1)
想要為自己學習 jQuery 的歷程作個記錄，這篇文章就是一些前言跟我喜歡 jQuery 的原因。
為什麼要學 JavaScript?
有作過網頁的人都知道，目前所謂的網頁，是用一種標記式語言(也就是 HTML)來表示網頁的內容，然後再透過定義樣式表(CSS)來設計網頁內容的呈現面貌，基本上只要有這兩個東西，瀏覽器(IE, Firefox等)就可以把網頁繪製出來給使用者看，但這樣只能呈現給使用者一個靜態的頁面，如果希望使用者能在這個網頁上作些動作，然後動態地改變網頁的內容，那我們就需要一個工具來完成這件事。這個工具至少需要具備兩個條件：
這樣的工具，一般會用 script(腳本) 來稱呼它，因為它的作用就像是演員的腳本，動作都要照著腳本中的敘述來完成才行。JavaScript 就是這樣的一個工具，它可以寫在 HTML 檔案裡（用 <script> 這個 HTML 標籤），也可以寫成一個 js 檔案再由 HTML 引入使用。開發網頁的人，透過 JavaScript 便能夠處理使用者的動作，然後改變網頁的呈現。
目前愈來愈多軟體採用 JavaScript (或其變形) 作為開發的語言，如 Google (Desktop) Gadgets, Mozilla(Firefox) extensions 等。學會 JavaScript，不只能夠隨心所欲地操控網頁的介面，也能夠去作些別的開發。
Why jQuery?雖然有了 JavaScript，但並不代表開發網頁的人就可以高枕無憂了，使用 JavaScript 最快碰到的問題就是瀏覽器實作 JavaScript 的標準不一，舉例來說，現在最火紅的 AJAX 技術，在 Mozilla/Firefox 上面直接有 XMLHttpRequest 這個物件可以用來進行 HTTP request 的動作，而在 IE 上面卻要透過 Microsoft.XMLHTTP 這個 ActiveX 物件。對於開發 Web 應用程式的人來說，在寫純 JavaScript 程式碼時就不容易專心了，因為要不斷測試某一段程式碼在各個瀏覽器間的表現，這樣寫起程式來一點都不健康。
所幸很多開發團隊替大家稍稍解決了一些開發之苦，推出一些包裝過的 JavaScript framework，這些 framework 提供了一些 JavaScript 的物件或函式來完成某些工作，開發 web 的人只需要知道要用 framework 中的哪個物件完成想作的事就好，瀏覽器間的衝突、矛盾就讓這些 framework 幫你做完。以 Prototype.js 這個 framework 為例，當你需要作一個 AJAX 呼叫時，只需使用 Ajax.Request 這個物件就可以完成，Prototype.js 會幫你去判斷使用者的瀏覽器而選擇正確的 JavaScript 物件來完成 AJAX 呼叫。
如前一段所述，類似的 JavaScript framework 很多，如：Prototype.js, jQuery, Dojo, Yahoo! UI, Google Web Toolkit 等，其實用什麼 framework 倒是隨個人高興就好，不過根據我使用的經驗，大概有以下這樣的心得：
使用概念為: API(DOM物件) ，也就是使用上是先想到要用哪一個 Protoype.js 的物件來作事，再決定是哪個網頁上的東西會被影響。擴充 Prototyp.js 很容易，可以使用其定義的 Class 或 Object.extend 物件來擴充。比較明顯的缺點是 Prototype.js 會擴充 JavaScript 內建物件（如 Object.extend 就是 Prototype.js 擴充得來），寫久了之後有時會分不太清楚原生物件上哪些東西是 Prototype.js 的傑作。另外 Script.aculo.us 這個以特效為主的 framework 就是基於 Prototype.js 所開發的。
值得一提的是，Ruby on Rails 預設使用的 JavaScript framework 正是 Prototype.js 與 Script.aculo.us，所以在 ActionView 裡定義了不少 helper methods 方便 Rails 的開發者產生 Prototype-based JavaScript code。
使用的概念為: jQuery物件.API(); 也就是先想到是網頁上哪個東西要被影響，然後再決定要作什麼事，比較有「以網頁物件為中心」的思考。jQuery 所有的 API 都是定義在 jQuery 這個物件下，沒有對 JavaScript 原生的物件作任何修改。同時 jQuery 的 selector（取得網頁物件的 API）符合 CSS 的語法，同時寫 jQuery 及 CSS 一點都不會錯亂。
廣告一下，因為在下喜歡 Ruby on Rails 這個 web 開發框架，同時也偏愛 jQuery ，所以寫了一個 Rails 的 plugin 叫 jq4r，這個 plugin 就像原本那些產生 prototype-based JavaScript code 的 helper methods 一樣產生了 jquery-based JavaScript code。
由 Yahoo! 官方的團隊的 JavaScript framework，感覺相當地專業，code 也有善用 namespace 的概念，除了這個 framework 本身之外，與其它 framework 間混用時也不會有名稱衝突的問題。YUI 的特色是有很豐富的視覺化界面、方便排版的 CSS 等。而 YUI 最棒的地方是他參考文件非常齊全，而且範例也夠多，在學習上比較快樂一點點。不過 YUI 因為用了 namespace 的關係，常常一個物件的名字就會非常長，寫起來不較不那麼輕巧一點。不過也因為如此，擴充 YUI 也很容易，只要自己定義了新的 namespace，想作什麼就作什麼。
Yahoo! UI 的 code 結構非常明確，可以想用什麼元件就引入對應的 js 檔案，可以不用一次引入一大包結果沒用到幾個部份，而害使用者多下載了一些沒用的東西。
Google 大神的產品，Google 家的產品大多是使用 GWT 寫成的，GWT 的設計理念跟上述三個 framework 不太一樣，在 Prototype.js, jQuery, 還是 YUI 下，開發者都還是撰寫 JavaScript ，但是 GWT 卻是要開發者寫 Java 的程式碼，再透過 GWT 的函式庫把這些 Java code 編譯成 JavaScript 的程式碼，這對於本來就會 Java 且不想學 JavaScript 的人來說倒也是好事一件，不用理會 JavaScript 太自由而比較雜亂的程式碼，而專注在開發上。而且 GWT 也可與 Eclipse 或 Netbeans 這樣的 IDE 整合來開發，在開發上比較方便且容易 debug，要專心作一個 web application，GWT 算是一個很好選擇。
不過由於 GWT 這樣的設計理念，擴充 GWT 的功能對於一般人來說稍稍困難了一點，因為你得寫新的 Java Class，然後修改 GWT 的 compiler 以產生對應的 JS code，比較起來還真是麻煩多了。
我最近開發時大多會選擇 jQuery 來作 JavaScript framework，主要喜歡它的理由就是符合 CSS selector，以及是以 DOM 物件為中心的思考方式，我自己覺得這樣比較直覺，因為寫 JavaScript 本來就是要讓網頁上某個東西「動」，jQuery 的思考邏輯比較不容易失焦。
, gwt, , jquery, jquery-tut, prototypejs, yui
chph
YUI也是符合CSS selector呀～
YUI.2.4.X版推出新的YAHOO.util.Selector模組，其中的query方法就是採用CSS selector。
chunghe
相关文章
精彩导读
热门资讯
关注我们
