面向Java開發(fā)者的Yahoo富UI組件庫(kù)
原創(chuàng)【51CTO快譯】Yahoo用戶界面（YUI）是一個(gè)用于開發(fā)基于AJAX的富用戶界面的開源Javascript庫(kù)。新的Yahoo郵箱使用的就是YUI，可以想象這個(gè)庫(kù)有多么強(qiáng)大的功能了。本文是三篇文章系列中的***篇，旨在幫助并不精通JavaScript的Java開發(fā)者在服務(wù)器端框架下（如JavaServer Pages，Struts或Spring等）開發(fā)web應(yīng)用。從本文中，JavaScript的新手們可以學(xué)習(xí)到如何使用YUI來(lái)開發(fā)及設(shè)計(jì)，并了解到很多面向?qū)ο蟮腏avaScript編程。JavaScript熟手們可以把本文當(dāng)做YUI庫(kù)的一個(gè)介紹。
YUI簡(jiǎn)介
基本上，YUI庫(kù)是一個(gè)web應(yīng)用各個(gè)方面相關(guān)組件的集合。主要分為一下幾類：
◆組件/控件:
容器型組件（Container components），如面板，工具提示欄，對(duì)話框等。
UI控件（UI widgets），如按鈕，日歷，數(shù)據(jù)表格，下拉菜單，頁(yè)碼標(biāo)注器，富文本編輯器等。
◆用于與服務(wù)器端交換信息的組件
◆用于控制DOM以及事件的組件
◆用于管理動(dòng)畫，拖曳，頁(yè)面等的組件
每個(gè)組件的YUI源代碼都有三種類型，在為你寫的應(yīng)用程序排錯(cuò)的時(shí)候很有助益。
◆標(biāo)準(zhǔn)型（Standard form）：此類型用于理解組件的執(zhí)行。
◆排錯(cuò)型（Debug enabled）：開啟此類型會(huì)顯示排錯(cuò)信息。
◆壓縮型（Compressed）：此類型將代碼中的空白清理掉，以提升下載速度。
JavaScript編程常見錯(cuò)誤
JavaScript應(yīng)用的開發(fā)與排錯(cuò)是相當(dāng)繁瑣的工作，尤其是對(duì)于Java開發(fā)者來(lái)說(shuō)。錯(cuò)誤不明顯，即使用Firebug一類的JavaScript排錯(cuò)器也是一樣。以下列出一些常見的JavaScript編程失誤，以及其解決方法。
◆在定義變量的時(shí)候忘記使用關(guān)鍵詞var定義本地變量，導(dǎo)致程序調(diào)用了函數(shù)外的變量。這種錯(cuò)誤很難排除。
◆JavaScript中全都是函數(shù)，所以每次創(chuàng)建一個(gè)類的新實(shí)例時(shí)都必須使用關(guān)鍵字new。不然的話，JavaScript會(huì)調(diào)用該函數(shù)，并將結(jié)果賦值于等號(hào)左邊的變量。
◆引用函數(shù)時(shí)不可在函數(shù)名稱后使用圓括號(hào)，否則會(huì)變成調(diào)用函數(shù)。
◆輸入DataTable組件的列寬，在IE和Firefox下顯示不同。Firefox下比IE下要短20像素。
◆JavaScript在不同瀏覽器中行為不同。所以當(dāng)你修改應(yīng)用的時(shí)候要在不同的瀏覽器下測(cè)試效果。
◆如果你使用一個(gè)新的YUI組件，卻忘記了include你的JavaScript源代碼文件，你不會(huì)看到錯(cuò)誤提示，但組件也無(wú)法工作。此問(wèn)題可通過(guò)YUI加載器（YUI Loader）下載請(qǐng)求的源文件來(lái)解決，當(dāng)然我更傾向于將組件與其所需求的源文件相聯(lián)系。這樣便可以精確的控制什么需要下載什么不要下載——和Java程序中import類的過(guò)程有點(diǎn)像。
#p#
YUI之OO（面向?qū)ο蟮模㎎avaScript設(shè)計(jì)
AJAX框架問(wèn)世之前，JavaScript還算不上是一個(gè)應(yīng)用開發(fā)平臺(tái)。盡管它支持OO設(shè)計(jì)，JavaScript僅僅被當(dāng)做一個(gè)腳本語(yǔ)言，用于實(shí)現(xiàn)有限的動(dòng)態(tài)網(wǎng)頁(yè)效果。為充分發(fā)揮JavaScript的OO設(shè)計(jì)，YUI在自己所有組件中都使用了OO設(shè)計(jì)。
以下部分舉例說(shuō)明了JavaScript中的OO編程方法，并介紹了構(gòu)建OO JavaScript應(yīng)用類的思路。YUI庫(kù)提供的類十分有助于這種開發(fā)過(guò)程。
創(chuàng)建名字空間（Namespaces）
在企業(yè)軟件中，將類按照名字空間下的行為來(lái)分類是非常普遍的做法。所以在學(xué)習(xí)創(chuàng)建類和對(duì)象之前，有必要了解名字空間。
如果你要把你所有的名字空間歸到Y(jié)AHOO名字空間之下，你在創(chuàng)建它們的時(shí)候可以這樣寫：
|
YAHOO.namespace("myapp"); YAHOO.myapp.Main = function() { |
以上代碼創(chuàng)建了三個(gè)名字空間以及一個(gè)YAHOO.myapp名字空間下的類。
或者你也可以這樣定義你自己的名字空間：
|
if(!DevX) DevX = {}; DevX.myapp.Main = function() { |
管理文件
你可以在同一個(gè)JavaScript文件中定義多個(gè)類，但***的做法是一個(gè)文件只定義一個(gè)類。
定義類
定義一個(gè)類有兩種方法：建立一個(gè)實(shí)體對(duì)象（object literal），或定義一個(gè)函數(shù)。實(shí)體對(duì)象一般用于建立靜態(tài)類，此類包含靜態(tài)方法，無(wú)需通過(guò)構(gòu)造器初始化便可使用。以下代碼通過(guò)建立實(shí)體對(duì)象的方法定義了一個(gè)Util類。
假設(shè)util.js文件中有如下代碼：
|
if(!DevX) DevX = {}; DevX.myapp.Util = { |
使用這個(gè)類無(wú)需創(chuàng)建Util的實(shí)例。此類可以直接使用，方法如下：
if(DevX.myapp.Util.isBrowserIE()) { |
定義類的另一個(gè)方法，定義一個(gè)函數(shù)。假設(shè)main.js中有如下代碼：
|
if(!DevX) DevX = {}; DevX.myapp.Main = function (title) { // 構(gòu)造器 |
以下為創(chuàng)建實(shí)例和使用類的方法：
var main = new DevX.myapp.Main('Home page'); |
當(dāng)你往類中添加功能時(shí)，你的構(gòu)造器也由于定義在其中的功能而越來(lái)越龐大。通過(guò)YAHOO.lang.augment這個(gè)方法可以在構(gòu)造器之外定義方法和域。看看以下代碼是如何往Main類中添加login功能的：
YAHOO.lang.augment(DevX.myapp.Main, { |
實(shí)現(xiàn)類的繼承
繼承可以通過(guò)YAHOO.lang.extend方法來(lái)實(shí)現(xiàn)?？紤]以下Main的繼承類refresh方法是如何創(chuàng)建的：
main.js文件：
|
if(!DevX) DevX = {}; DevX.myapp.AppMain = function () { YAHOO.lang.extend(DevX.myapp.AppMain, DevX.myapp.Main); DevX.myapp.AppMain.prototype.refresh = function () { |
關(guān)鍵詞prototype（原型）指的是類的構(gòu)造。
Web應(yīng)用設(shè)計(jì)
至此，一個(gè)Java開發(fā)者對(duì)以上myapp的例子一定心存一些疑問(wèn)。使用YUI就不用寫HTML了嗎？這個(gè)庫(kù)和Java Swing API一樣么？對(duì)于這兩個(gè)問(wèn)題，答案都是“否”。之前描述的應(yīng)用使用HTML頁(yè)面實(shí)現(xiàn)基本的UI元素。只是，每個(gè)頁(yè)面現(xiàn)在都得到了JavaScript的支持，而且當(dāng)需要時(shí)，這個(gè)JavaScript又可以使用YUI和其他的JavaScript庫(kù)。YUI將被用來(lái)實(shí)現(xiàn)頁(yè)面UI元素的事件處理（event handling），AJAX服務(wù)器交流，類似數(shù)據(jù)表格一類的UI元素，標(biāo)注頁(yè)碼等等。
表格1提供了一些為web應(yīng)用設(shè)計(jì)類時(shí)需要考慮的原則。假設(shè)你的應(yīng)用有兩個(gè)頁(yè)面，每個(gè)頁(yè)面都有一些UI元素，HTML和JavaScript類應(yīng)當(dāng)如同表格1中描述的方式工作。
表格1 你的應(yīng)用中的HTML和JavaScript類
| HTML 和 JavaScript 類 | 描述 |
|---|---|
| /cxt/page1/Page1.html | UI元素，版面 |
| /cxt/page1/page1.css | page1的樣式css |
| /cxt/page1/page1.js | page1的主類。組件初始化，注冊(cè)事件，處理方法回調(diào)，與服務(wù)器交換信息 |
| /cxt/page1/page1_util.js | page1的Utility方法 |
| /cxt/page1/page1_datatable.js | page1的數(shù)據(jù)表格實(shí)例濃縮 |
| /cxt/page2/Page2.html | ? |
| /cxt/page2/page2.js | ? |
| /cxt/shared/js/util.js | 通用utility方法 |
| /cxt/shared/js/myapp-datasource.js | 自定義的數(shù)據(jù)源 |
| /cxt/shared/js/myapp-connection.js | 自定義的服務(wù)器連接類 |
| /cxt/shared/css/myapp-table-skin.css | 數(shù)據(jù)表格的CSS |
如果你的應(yīng)用比這樣的簡(jiǎn)單頁(yè)面+富UI的模式更復(fù)雜，那么你設(shè)計(jì)類的時(shí)候還是考慮一些其他的策略吧。
結(jié)束語(yǔ)
通過(guò)以上文字，你應(yīng)該了解了YUI能為你的應(yīng)用做些什么，如何以O(shè)O設(shè)計(jì)的思路去開發(fā)網(wǎng)頁(yè)和類，JavaScript的良好代碼習(xí)慣，以及如何基于一個(gè)繼承的類來(lái)創(chuàng)建符合自己需求的類。
原文：Yahoo's Rich Web UIs for Java developers
作者：Narayanan A.R.
【編輯推薦】
