AJAX 輕鬆上手：一起來用 YUI 函式庫吧！

為什麼要使用 JavaScript 函式庫

自從 Web 2.0 這個名詞出來，許多 JavaScript 的技術變得很重要。可惜問題出在瀏覽器差異性大，使得想學 JavaScript 的新手不知從何開始、老手則不斷地找尋跨瀏覽器的技巧，這些都不是 JavaScript 的本質。

而這兩年來，許多廠商開始開發 JavaScript 的函式庫，基本的目標是在不同的瀏覽器上、建立相同的存取方式，讓開發人員無需煩惱跨瀏覽器的問題。進一步就是提供好用的工具，讓大家可以不需要浪費時間開發相同的東西。

相關閱讀：John Resig: Advancing JavaScript With Libraries

為什麼要選擇 YUI？

既然有許多 JavaScript 函式可以選擇，那你一定會提出疑問：YUI 好在那裡？因為它好，所以我們不怕你問！

• 你想得到的範例我們都有

  YUI 提供了官方的範例集、超過 230 個範例。所以當你想要開發任何的東西時，可以先上來找找，幾乎你能想到的我們都有，不管是直接拿來用、或用做參考，都可以節省你的開發時間！

  相關閱讀：YUI Examples Gallery

• 最符合使用者及開發者需求

  每天有成千上億的使用者在使用 Yahoo!，所以 YUI 的目標就是在協助開發者能快速產生符合使用者期待的功能，既符合開發、也能順應潮流。偷偷告訴你，甚至連我們競爭者也是 YUI 愛好者唷！

  相關閱讀：原來 iGoogle 是用 YUI 排版的… | 相關閱讀：Powered By YUI

• 提供穩定且快速的專屬主機

  YUI 的檔案是存放在 Yahoo! 分佈在全世界的主機上，利用 DNS 轉址、GZip、以及 Expire Header 等技術最佳化後，提供開發者利用外部聯結的方式直接讀取。聽不懂前面那串名詞沒關係，你只要知道，這樣做必定比放在你自己主機快且穩定。

  相關閱讀： Serving YUI Files from Yahoo! Servers | 美國 Presenstation 照片 | YUI Blog 的相關新聞

• 各類文件把你教到會

  YUI 提供了各類不同取向的文件，例如讓新手一步步來的入門、提供高手查詢的 API 文件、以及隨時可用的速查表。這些都還不夠？沒關係，我們還提供專屬討論區，有許多高手駐站喔！

  相關閱讀：事件工具組的入門使用 | 事件工具組的速查表 | 事件工具組 API 文件

• 雜誌評比名列前茅

  國外知名的 Dr. Dobb's 曾經依他們的需求評選 YUI 在內的四個 AJAX 函式庫，最後是 YUI 的分數最高。主要原因就是上面提的這幾點。

  相關閱讀：AJAX: Selecting the Framework that Fits

• 客製化容易

  大部份的函式庫都提供了很強大的功能，但是碰到要客製化、或者是增加自己想要的功能時往往顯得抓襟見肘。YUI 遵詢網頁標準化的精神，把 HTML/CSS/JavaScript 做完全的分離，也因此你可以輕易地客製外觀、結構與行為。

• 提供專業視覺設計師的樣式

  再好的功能，若沒有適當的設計感，願意用的人一定少。 YUI 深知這一點， 所以請 Yahoo! 的視覺設計師 Sam Lind 來設計、 讓開發者輕輕鬆鬆擁有專業的樣式，而且有陸續增加其它樣式的計劃喔！

  相關閱讀：Skinning YUI

YUI 有哪些東東？

• CSS 基礎 (CSS Tools)

  雖說 CSS 很容易上手，但當你玩到深的時候，就會發現有很多的問題，這點由 Yahoo! 有人專門在寫 CSS 的架構就可以看出來。 你可以把 YUI 提供的視為一個網頁所必需的基礎：幫你解決掉每個瀏覽器預設樣式的不同、字型大小的問題，甚至複雜的排版解決方案。 筆者強烈建議要好好學這套工具（可以參考下面的聯結），並且嵌入在每一個網頁當成基礎喔！

• JavaScript 核心 (Core)

  若問我 JavaScript 中最常用的功能是什麼？我的答案會是事件處理、DOM 物件取得及設定，及瀏覽器偵測莫屬了！ 而這些基本功能在不同的瀏覽器卻有不同的做法，實在另人頭大，因為不管寫到什麼都要去解決跨瀏覽器的問題，會讓程式碼備增！ YUI 知道開發者的痛苦，也為了自己其它功能的開發，把這些核心功能包裝得好用又強大。
  記得在使用 YUI 的任何功能，都一定要包含核心的 yahoo, event, 與 dom 的函式庫喔！

• JavaScript 工具組 (Utilities)

  除了核心的功能外，進階的開發者會寫動畫特效、拖拉、或者是 AJAX 等的功能。 YUI 把這些功能包裝地就像瑞士刀一樣，既輕巧又好用。

  值得一提的，大家所關注用 CSS 及 XPath 語法取得 DOM 物件的方式也在 Select 工具組實作出來，喜歡用 jQuery 的可以考慮跳槽了 :-D。

• JavaScript 控制項 (Controls/Widgets)

  控制項跟工具組不同的地方在於，它本身會有一個介面，而 YUI 工具組則沒有、只有功能性。 像是你在 Yahoo! 奇摩首頁打字搜尋時會有的搜尋建議以及中間的頁籤組 ，還有常見的 HTML 編輯器皆屬於此一範疇。

  從 2.4.0 開始，YUI 更提供了圖表控制項，利用相同的 JavaScript，可以輕鬆地產出用 Flash 做成的圖表，這樣的混合真是太讚了！

用 YUI 做的有趣東西

• YUI Tetris

  這是俄羅斯方塊遊戲，但令人吃驚的是它不是 Flash，而是以 YUI 做成的喔！

如何開始使用 YUI？

講了很多，但最重要的某過於你開始動手做！ 我通常會鼓勵新手自己用 YUI 做一個可收摺與顯示內容的模組（範例）， DOM 物件的取得、綁事件，甚至動畫都可以在這個模組裡用到。 開始試看看吧！ 一步步教你如何做！