Yahoo YUI的Ajax工具包

YUI簡介

雅虎前不久推出了稱為YUI的Ajax工具包,同時Yahoo發表了一系列的Ajax設計模式. Yahoo的這些工具包是Yahoo在收購了多個Web2.0網站後推出的Ajax工具包，代碼的注釋也寫的很好，文檔也很豐富和詳盡。

YUI的組件也在不斷的增加中，yahoo為YUI設了一個Yahoo使用者組，裡面的郵件很活躍，問的問題基本都有人回答，而且比較細緻和具體。

YUI分為兩個大類,一個是Ajax組件,裡麵包括對底層javascript封裝後的幾個 工具包,分別是connection,event, dom,animation,dnd.還包括一組進階的javascript控制項，目前包括AutoComplete,Calendar, Container,Menu,Slider,TreeView.

另一類是幾個很有用的幾個CSS檔案，一個是CSS Page Grids，用它可以很方便的布局你的網頁。另外兩個是Standard CSS Fonts和Standard CSS Reset,利用這兩個CSS可以對字型等在不同瀏覽器中獲得一致的效果.

Yahoo的Ajax設計模式是在目前的WEB2.0網站中常用的一些改善使用者體驗,增強交 互效果的文章,格式和Design Pattern類似.有時會提供一些例子網站或網頁,當然都是yahoo自己的幾個網站,上面的javascript可能還沒有整理到YUI裡面去,但是 也都是格式化很好的javascript,也沒有混淆.

YUI Utilities(Connection Manager)

Yahoo的javascript檔案都有一個注釋的很好的，格式化很好的版本和一個去掉注釋和空格的版本，學習看原始碼當然用前者，而最後在網頁上使用的時候就可以選用後者。

1. Connection Manager

這個工具包用來管理XMLHttpRequest,通過這個工具包可以查詢正在執行的請求的狀態，可以註冊正確返回的回呼函數，錯誤處理的回呼函數，還可以根據提供的表單Id方便的收集和發送表單欄位。下面給出的代碼是基本調用形式

var callback =

{

success: function(res) {/*success handler code*/}, //正常返回處理函數

failure: function(res) {/*failure handler code*/}, //出錯返回處理函數

argument: [argument1, argument2, argument3] //可以在success函數和failure函數中訪問的變數

}

var transaction = YAHOO.util.Connect.asyncRequest(’GET’, sUrl, callback, null);

下面的表給出的是通過正確返回時res參數可以獲得的屬性值。

屬性明 描述

tId 該Http請求的事務表示

status 返回的Http狀態代碼

statusText 對應狀態代碼的字串表示

getResponseHeader[label] 返回label名稱標識的Http頭的值

getAllResponseHeader 所有的Http頭的字串表示，用”\n”分隔

responseText 返回內容的字串表示

responseXML 返回內容的XML表示

argument 回呼函數中傳入的變數

錯誤返回時可以通過res返回的屬性

屬性明 描述

tId 該Http請求的事務表示

status 0

statusText “communication failure”

argument 回呼函數中傳入的變數

如果想發送的是表單資料，那麼使用下面的代碼就可以了：

YAHOO.util.Connect.setForm(formId);

var cObj = YAHOO.util.Connect.asyncRequest(’POST’, ‘http://www.yahoo.com’, callback);

查看請求是否已經處理完

var cObj = YAHOO.util.Connect.asyncRequest(’GET’,'http://www.yahoo.com’,callback);

var callStatus = YAHOO.util.Connect.isCallInProgress(cObj);

逾時取消請求

var cObj = YAHOO.util.Connect.asyncRequest(’GET’, sUrl, callback);

setTimeout(”YAHOO.util.Connect.abort(cObj)”,10000);

YUI Utilities(Event)

使用Event工具包可以簡化瀏覽器端的事件驅動程式的開發，通過使用簡單的介面就可以訂製響應DOM事件的代碼，同時獲得瀏覽器Event對象的各種屬性也很方便。通過Event工具包我們還可以訂製自己的事件，這樣頁面組件可以接收這些事件並做出響應。

基本的事件代碼

var oElement = document.getElementById(”elementid”);//獲得事件來源

function fnCallback(e) { alert(”click”); }//定義回呼函數

YAHOO.util.Event.addListener(oElement, “click”, fnCallback);//註冊回呼函數，當oElement的click事件發生的時候，fnCallback函數將被調用。

//或者更簡單的直接傳遞Id YAHOO.util.Event.addListener(”elementid”, “click”, fnCallback);

註冊響應多個頁面元素的事件

var ids = [”el1″, “el2″, “el3″];//該數組中可以包括元素ID，元素的引用，或者兩者混合的情況。

function fnCallback(e) { alert(this.id); }

YAHOO.util.Event.addListener(ids, “click”, fnCallback);

Yui的Event包解決了一些比較實際的問題，第一頁面元素通常在Javacript註冊 事件代碼後載入，這個時候Yui會正確延遲註冊，直到指 定Id的元素可以訪問。第二微軟的ＩＥ瀏覽器在事件處理函數中的this指向的是Window對象，而不是發生事件的那個元素，YUI也會正確的傳遞事件 發生的源元素。第三可以把任意的對象傳遞給事件處理函數。

建立和使用自訂的事件

1.使用CustomerEvent對象建立自己的事件

function TestObj(name) {

this.name = name;

this.event1 = new YAHOO.util.CustomEvent(”event1″, this);

}

YAHOO.util.CustomEvent = function(type, oScope);

type表示事件類型的字串

2。註冊對自訂事件的響應函數

function Consumer(name, testObj) {

this.name = name;

this.testObj = testObj;

this.testObj.event1.subscribe(this.onEvent1, this);

}

3。響應函數

Consumer.prototype.onEvent1 = function(type, args, me) {

alert(” this: ” + this +

“\n this.name: ” + this.name +

“\n type: ” + type +

“\n args[0].data: ” + args[0].data +

“\n me.name: ” + me.name);

}

4。觸發自訂事件

function TestData(data) {

this.data = data;

}

var t1 = new TestObj(”mytestobj1″);

var c1 = new Consumer(”mytestconsumer1″, t1);

var d1 = new TestData(”mydata1″);

t1.event1.fire(d1);

YUI(Dom Collection)

YUI的dom工具包屏蔽了各種瀏覽器的差別，使用dom工具包可以方便的的操作頁面元素，包括控制元素的座標，以及改變元素的CSS風格。

獲得和設定元素座標

var pos = YAHOO.util.Dom.getXY(’test’);

YAHOO.util.Dom.setXY(’target’, pos);

設定元素的CSS屬性

YAHOO.util.Dom.setStyle([’test’, ‘test2′], ‘opacity’, 0.5);

var opacity = YAHOO.util.Dom.getStyle(’test2′, ‘opacity’);

獲得顯示當前文檔的視窗的大小。

var viewport = [

YAHOO.util.Dom.getViewportWidth(),

YAHOO.util.Dom.getViewportHeight()

];

擷取和設定與CSS相關的屬性

getElementByClassName(className,tagName,rootNode)

hasClass(element,className)

addClass(element,className)

removeClass(element,className)

replaceClass(element,oldClassName,newClassName)