【51CTO快譯】Yahoo用戶界面（YUI）是一個用于開發(fā)基于AJAX的富用戶界面的開源Javascript庫。新的Yahoo郵箱使用的就是YUI，可以想象這個庫有多么強(qiáng)大的功能了。本文是三篇文章系列中的***篇，旨在幫助并不精通JavaScript的Java開發(fā)者在服務(wù)器端框架下（如JavaServer Pages，Struts或Spring等）開發(fā)web應(yīng)用。從本文中，JavaScript的新手們可以學(xué)習(xí)到如何使用YUI來開發(fā)及設(shè)計(jì)，并了解到很多面向?qū)ο蟮腏avaScript編程。JavaScript熟手們可以把本文當(dāng)做YUI庫的一個介紹。

YUI簡介

基本上，YUI庫是一個web應(yīng)用各個方面相關(guān)組件的集合。主要分為一下幾類：

◆組件/控件:

容器型組件（Container components），如面板，工具提示欄，對話框等。

UI控件（UI widgets），如按鈕，日歷，數(shù)據(jù)表格，下拉菜單，頁碼標(biāo)注器，富文本編輯器等。

◆用于與服務(wù)器端交換信息的組件

◆用于控制DOM以及事件的組件

◆用于管理動畫，拖曳，頁面等的組件

每個組件的YUI源代碼都有三種類型，在為你寫的應(yīng)用程序排錯的時候很有助益。

◆標(biāo)準(zhǔn)型（Standard form）：此類型用于理解組件的執(zhí)行。

◆排錯型（Debug enabled）：開啟此類型會顯示排錯信息。

◆壓縮型（Compressed）：此類型將代碼中的空白清理掉，以提升下載速度。

JavaScript編程常見錯誤

JavaScript應(yīng)用的開發(fā)與排錯是相當(dāng)繁瑣的工作，尤其是對于Java開發(fā)者來說。錯誤不明顯，即使用Firebug一類的JavaScript排錯器也是一樣。以下列出一些常見的JavaScript編程失誤，以及其解決方法。

◆在定義變量的時候忘記使用關(guān)鍵詞var定義本地變量，導(dǎo)致程序調(diào)用了函數(shù)外的變量。這種錯誤很難排除。

◆JavaScript中全都是函數(shù)，所以每次創(chuàng)建一個類的新實(shí)例時都必須使用關(guān)鍵字new。不然的話，JavaScript會調(diào)用該函數(shù)，并將結(jié)果賦值于等號左邊的變量。

◆引用函數(shù)時不可在函數(shù)名稱后使用圓括號，否則會變成調(diào)用函數(shù)。

◆輸入DataTable組件的列寬，在IE和Firefox下顯示不同。Firefox下比IE下要短20像素。

◆JavaScript在不同瀏覽器中行為不同。所以當(dāng)你修改應(yīng)用的時候要在不同的瀏覽器下測試效果。

◆如果你使用一個新的YUI組件，卻忘記了include你的JavaScript源代碼文件，你不會看到錯誤提示，但組件也無法工作。此問題可通過YUI加載器（YUI Loader）下載請求的源文件來解決，當(dāng)然我更傾向于將組件與其所需求的源文件相聯(lián)系。這樣便可以精確的控制什么需要下載什么不要下載——和Java程序中import類的過程有點(diǎn)像。

#p#

YUI之OO（面向?qū)ο蟮模㎎avaScript設(shè)計(jì)

AJAX框架問世之前，JavaScript還算不上是一個應(yīng)用開發(fā)平臺。盡管它支持OO設(shè)計(jì)，JavaScript僅僅被當(dāng)做一個腳本語言，用于實(shí)現(xiàn)有限的動態(tài)網(wǎng)頁效果。為充分發(fā)揮JavaScript的OO設(shè)計(jì)，YUI在自己所有組件中都使用了OO設(shè)計(jì)。

以下部分舉例說明了JavaScript中的OO編程方法，并介紹了構(gòu)建OO JavaScript應(yīng)用類的思路。YUI庫提供的類十分有助于這種開發(fā)過程。

創(chuàng)建名字空間（Namespaces）

在企業(yè)軟件中，將類按照名字空間下的行為來分類是非常普遍的做法。所以在學(xué)習(xí)創(chuàng)建類和對象之前，有必要了解名字空間。

如果你要把你所有的名字空間歸到Y(jié)AHOO名字空間之下，你在創(chuàng)建它們的時候可以這樣寫：

以上代碼創(chuàng)建了三個名字空間以及一個YAHOO.myapp名字空間下的類。

或者你也可以這樣定義你自己的名字空間：

管理文件

你可以在同一個JavaScript文件中定義多個類，但***的做法是一個文件只定義一個類。

定義類

定義一個類有兩種方法：建立一個實(shí)體對象（object literal），或定義一個函數(shù)。實(shí)體對象一般用于建立靜態(tài)類，此類包含靜態(tài)方法，無需通過構(gòu)造器初始化便可使用。以下代碼通過建立實(shí)體對象的方法定義了一個Util類。

假設(shè)util.js文件中有如下代碼：

使用這個類無需創(chuàng)建Util的實(shí)例。此類可以直接使用，方法如下：

if(DevX.myapp.Util.isBrowserIE()) {

  // IE specific behavior

  }

定義類的另一個方法，定義一個函數(shù)。假設(shè)main.js中有如下代碼：

以下為創(chuàng)建實(shí)例和使用類的方法：

var main = new DevX.myapp.Main('Home page');

  main.refresh();

當(dāng)你往類中添加功能時，你的構(gòu)造器也由于定義在其中的功能而越來越龐大。通過YAHOO.lang.augment這個方法可以在構(gòu)造器之外定義方法和域?？纯匆韵麓a是如何往Main類中添加login功能的：

YAHOO.lang.augment(DevX.myapp.Main, {

  login : function(username, password) {

  //實(shí)現(xiàn)login功能的代碼

  }

  });

實(shí)現(xiàn)類的繼承

繼承可以通過YAHOO.lang.extend方法來實(shí)現(xiàn)?？紤]以下Main的繼承類refresh方法是如何創(chuàng)建的：

main.js文件：

關(guān)鍵詞prototype（原型）指的是類的構(gòu)造。

Web應(yīng)用設(shè)計(jì)

至此，一個Java開發(fā)者對以上myapp的例子一定心存一些疑問。使用YUI就不用寫HTML了嗎？這個庫和Java Swing API一樣么？對于這兩個問題，答案都是“否”。之前描述的應(yīng)用使用HTML頁面實(shí)現(xiàn)基本的UI元素。只是，每個頁面現(xiàn)在都得到了JavaScript的支持，而且當(dāng)需要時，這個JavaScript又可以使用YUI和其他的JavaScript庫。YUI將被用來實(shí)現(xiàn)頁面UI元素的事件處理（event handling），AJAX服務(wù)器交流，類似數(shù)據(jù)表格一類的UI元素，標(biāo)注頁碼等等。

表格1提供了一些為web應(yīng)用設(shè)計(jì)類時需要考慮的原則。假設(shè)你的應(yīng)用有兩個頁面，每個頁面都有一些UI元素，HTML和JavaScript類應(yīng)當(dāng)如同表格1中描述的方式工作。

表格1 你的應(yīng)用中的HTML和JavaScript類

如果你的應(yīng)用比這樣的簡單頁面+富UI的模式更復(fù)雜，那么你設(shè)計(jì)類的時候還是考慮一些其他的策略吧。

結(jié)束語

通過以上文字，你應(yīng)該了解了YUI能為你的應(yīng)用做些什么，如何以O(shè)O設(shè)計(jì)的思路去開發(fā)網(wǎng)頁和類，JavaScript的良好代碼習(xí)慣，以及如何基于一個繼承的類來創(chuàng)建符合自己需求的類。

原文：Yahoo's Rich Web UIs for Java developers

作者：Narayanan A.R.

【編輯推薦】

1. 2008年RIA平臺發(fā)展回顧
2. 如何使用ASP.NET AJAX訪問Web Services
3. Sun正式推出JavaFX 1.0 RIA三足鼎立局面確立