close

    在這個號稱 web 2.0 的時代,寫網站,還是必須用到大量的 JavaScript,如果與使用者的互動還沒有用到 Ajax 技術的話,似乎是一件很神奇的事。

    JavaScript 最怕碰到的問題就是瀏覽器實作 JavaScript 的標準不一,尤其像現在,遇到琳瑯滿目的各式瀏覽器,舉例來說,現在最火紅的Ajax 技術,在 Firefox 上面直接有 XMLHttpRequest 這個物件可以用來進行 HTTP request 的動作,而在 IE 上面卻要透過 Microsoft.XMLHTTP 這個 ActiveX 物件。不同瀏覽器對文件的解析與語法的支援並不一致,在各種作業系統或版本上有時也會表現出不同的行為(例如IE6與IE7的差異),讓許多JavaScript應用程式的瓶頸,都發生在相容性上。對於開發 Web 應用程式的人來說,在寫純 JavaScript 程式碼時就不容易專心了,因為要不斷測試某一段程式碼在各個瀏覽器間的表現,這樣寫起程式來一點都不健康。

    所幸很多開發團隊替大家稍稍解決了一些開發之苦,推出一些包裝過的 JavaScript  framework,這些 framework 提供了一些 JavaScript 的物件或函式來完成某些工作,開發 web 的人只需要知道要用 framework 中的哪個物件完成想作的事就好,瀏覽器間的衝突、矛盾就讓這些 framework 幫你做完。以 Prototype.js 這個 framework 為例,當你需要作一個 Ajax  呼叫時,只需使用 Ajax.Request 這個物件就可以完成,Prototype.js 會幫你去判斷使用者的瀏覽器而選擇正確的 JavaScript 物件來完成 Ajax呼叫。 

    最近因為工作上需要使用這些特效,所以找了一些JavaScript  framework 的資料,大概有以下這樣的心得:

    1. Prototype:API(DOM物件) ,也就是使用上是先想到要用哪一個 Protoype.js 的物件來作事,再決定是哪個網頁上的東西會被影響。 擴充 Prototyp.js 很容易,可以使用其定義的 Class 或 Object.extend 物件來擴充。

    2. script.aculo.us:基於prototype的library,Ruby on Rails及與CakePHP的指定框架,它提供許多特效,文件也都滿完整的。

    3. Rico:我覺得它的Round Corner, Accordion跟Live Grid做的不錯。

    4. moo.fx:輕量級的library,如果你不需要Prototype的一些其他的功能可以用這個。 mootools: 基於上面的moo.fx的概念,更提供了模組化的管理方式(詳情去他的下載頁 看便知),也提供壓縮過的JS檔,應該是20KB左右吧,我覺得它的Dynamic Sortables做的很棒。
   

    5. jQuery:使用的概念為: jQuery物件.API(); 也就是先想到是網頁上哪個東西要被影響,然後再決定要作什麼事,比較有「以網頁物件為中心」的思考。jQuery 所有的 API 都是定義在 jQuery 這個物件下,沒有對 JavaScript 原生的物件作任何修改。同時 jQuery 的 selector(取得網頁物件的 API)符合 CSS 的語法,同時寫 jQuery 及 CSS 一點都不會錯亂。 

    6. Yahoo! UI Library:由 Yahoo! 官方的團隊的 JavaScript framework,感覺相當地專業,code 也有善用 namespace 的概念,除了這個 framework 本身之外,與其它 framework 間混用時也不會有名稱衝突的問題。YUI 的特色是有很豐富的視覺化界面、方便排版的 CSS 等。而 YUI 最棒的地方是他參考文件非常齊全,而且範例也夠多,在學習上比較快樂一點點。

    7. Google Web Toolkit :Google 大神的產品,Google 家的產品大多是使用 GWT 寫成的,GWT 的設計理念跟上述三個 framework 不太一樣,在 Prototype.js, jQuery, 還是 YUI 下,開發者都還是撰寫 JavaScript ,但是 GWT 卻是要開發者寫 Java 的程式碼,再透過 GWT 的函式庫把這些 Java code 編譯成 JavaScript 的程式碼。

  

    我最近開發時大多會選擇 jQuery 來作 JavaScript  framework,主要喜歡它的理由就是符合 CSS selector,以及它是以 DOM 物件為中心的思考方式,我自己覺得這樣比較直覺。

    iThome這篇文章對Ajax有完整的介紹,我覺得很不錯!!

   

 

 

arrow
arrow
    全站熱搜

    qa567 發表在 痞客邦 留言(0) 人氣()