用YUI快速開發Ajax的訣竅

蔣定宇 Yahoo!前端工程師，熱衷網頁前端及 Open API 等新技術，希望藉由前端應用的改善，讓使用者能更容易與網站互動，創造出更多的可能性。

Yahoo! User Interface（YUI）是由Yahoo!推出的JavaScript函式集，它除了大量應用在Yahoo！所推出的網站服務上，以提供使用者豐富的互動效果與Ajax功能。透過BSD授權的方式，所有開發人員也可以使用在自己的網站或Web應用程式上，簡化前端互動介面的開發難度與時間。

YUI目前在Sourceforge下載數量位居Ajax框架第二名，不過比起其他一些知名Ajax框架，YUI在臺灣應用的情況尚未普及，因此我們專訪Yahoo!軟體工程師蔣定宇，進一步了解YUI的特色與限制。

問：隨著Ajax盛行，開發框架也越來越多，請為我們簡介YUI的發展背景？
答：YUI是由美國Yahoo!的Presentation Platform小組成員所開發，包括各種的工具、控制項等，而Yahoo!其他網頁應用的開發團隊，再利用YUI為基礎，撰寫專案。

在臺灣，Front-end Engineering（前端工程）這個小組，也利用YUI進行開發及應用，像大家所熟知的字典、拍賣、手機等，這類服務，也都是用YUI開發，加快我們內部的開發速度，也使服務更容易維護。

必須要澄清一點，Ajax只是非同步傳輸的一種應用，有許多人用Ajax框架稱呼YUI，這是流行風潮的緣故，其實比較精確的說法應該稱作JavaScript函式集。

問：YUI和其他JavaScript或Ajax框架的差異在哪裡？
答：首先YUI著重維持JavaScript語法本質，目前有許多JavaScript框架都著重在易用性上，引入許多自創的語法，因此寫起JavaScript像在走捷徑，變得比較簡單，但也讓不熟悉這種特定語法的人不容易理解。YUI則是保留JavaScript的原汁原味，我們認為只要懂JavaScript，就能用YUI。

YUI的語法架構相當重視樣式、結構和行為分離，因此對於開發人員來說，很容易利用YUI進行客製化。

另外，使用YUI時，開發人員除了可以下載相關的檔案到網站伺服器上，也可選擇直接在網頁中指向Yahoo!所提供YUI檔案的伺服器，透過這種方式，日後如果YUI工具、元件改版，只要將作為路徑名稱的版號修正即可更新，維護上相當方便。

問：提供YUI檔案的主機會不會有斷線的疑慮？
答：這點不用擔心，它是由多臺主機組成，如果使用者的頁面發出請求而沒有回應，它會自動繞轉到使用者所在地的鄰近主機，具備了負載平衡與容錯移轉的機制，確保不會因為連線中斷而影響到使用該服務的網站功能。

問：YUI能為開發人員帶來哪些好處？
答：YUI對開發人員而言就像是一把瑞士刀，針對不同的狀況，馬上可以使用對應工具。YUI的工具充份模組化，使用者可以依照需求指定相關的工具，不管是需要動畫工具或像Ajax常見的AutoComplete，只要呼叫相關的JavaScript檔案，就能使用。而且在Yahoo!的開發者網站上，有詳細的說明文件與原始碼可供參考，減低初學者的障礙。

而YUI物件導向的語法設計，也讓程式碼的維護與擴充更為容易，開發人員可以繼承原有的物件，再去擴充更進階的功能。

YUI也能幫助開發人員快速產出使用CSS和DIV組成的版面，可以避掉過去用表格、圖片去拼出精準版面的作法。這對於網頁的維護工作幫助很大，讓開發人員不會困在一堆巢狀＜td＞、＜tr＞語法中，很快就能找出需要修改的地方。

問：相容性是JavaSript框架經常遇到的問題，YUI如何因應與處理？
答：相容性是每個JavaSript函式庫或框架的基本核心，是一定要解決的問題。不管是事件處理、DOM、非同步傳輸或是瀏覽器的上、下頁這些行為控制，在瀏覽器上都有不同的做法，而框架的基本精神就是在這些參差不齊的做法上，建構一層API，讓開發人員不用再分心去處理相容性的問題。

Yahoo!本身是網站公司，對這一點特別注重，對於幾種主流瀏覽器與作業平臺，甚至連版本都必須交叉比對，確定都可以正常運作，才會釋出工具。

問：YUI目前在使用上有哪些不足之處？
答：以目前YUI的發展而言，在DOM物件方面的選取功能是較弱的，尤其是與jQuery相比。jQuery利用相當簡潔的語法，就能存取、操作文件中的節點，因為它的目標就是瞄準易用性，反觀YUI要做到相同的工作，必須花費較多的工夫。就我自己的觀點，在實務上結合YUI和jQuery也是不錯的用法，各取所長，因此我打算介紹jQuery給我們部門內的工程師。

YUI比較可惜的一點是在臺灣的推廣起步較慢，使用的人少，不能激起更多的應用與想法，這部分我們後續會努力。整理⊙黃天賜