Yahoo YUI的Ajax工具包
YUI簡介
雅虎前不久推出了稱為YUI的Ajax工具包,同時(shí)Yahoo發(fā)表了一系列的Ajax設(shè)計(jì)模式. Yahoo的這些工具包是Yahoo在收購了多個(gè)Web2.0網(wǎng)站后推出的Ajax工具包,代碼的注釋也寫的很好,文檔也很豐富和詳盡。
YUI的組件也在不斷的增加中,yahoo為YUI設(shè)了一個(gè)Yahoo用戶組,里面的郵件很活躍,問的問題基本都有人回答,而且比較細(xì)致和具體。
YUI分為兩個(gè)大類,一個(gè)是Ajax組件,里面包括對(duì)底層javascript包裝后的幾個(gè)工具包,分別是connection,event, dom,animation,dnd.還包括一組高級(jí)的javascript控件,目前包括AutoComplete,Calendar, Container,Menu,Slider,TreeView.
另一類是幾個(gè)很有用的幾個(gè)CSS文件,一個(gè)是CSS Page Grids,用它可以很方便的布局你的網(wǎng)頁。另外兩個(gè)是Standard CSS Fonts和Standard CSS Reset,利用這兩個(gè)CSS可以對(duì)字體等在不同瀏覽器中獲得一致的效果.
Yahoo的Ajax設(shè)計(jì)模式是在目前的WEB2.0網(wǎng)站中常用的一些改善用戶體驗(yàn),增強(qiáng)交互效果的文章,格式和Design Pattern類 似.有時(shí)會(huì)提供一些例子網(wǎng)站或網(wǎng)頁,當(dāng)然都是yahoo自己的幾個(gè)網(wǎng)站,上面的javascript可能還沒有整理到Y(jié)UI里面去,但是 也都是格式化很 好的javascript,也沒有混淆.
YUI Utilities(Connection Manager)
Yahoo的javascript文件都有一個(gè)注釋的很好的,格式化很好的版本和一個(gè)去掉注釋和空格的版本,學(xué)習(xí)看源代碼當(dāng)然用前者,而最后在網(wǎng)頁上使用的時(shí)候就可以選用后者。
1. Connection Manager
這個(gè)工具包用來管理XMLHttpRequest,通過這個(gè)工具包可以查詢正在執(zhí)行的請求的狀態(tài),可以注冊正確返回的回調(diào)函數(shù),錯(cuò)誤處理的回調(diào)函數(shù),還可以根據(jù)提供的表單Id方便的收集和發(fā)送表單字段。下面給出的代碼是基本調(diào)用形式
var callback =
{
success: function(res) {/*success handler code*/}, //正常返回處理函數(shù)
failure: function(res) {/*failure handler code*/}, //出錯(cuò)返回處理函數(shù)
argument: [argument1, argument2, argument3] //可以在success函數(shù)和failure函數(shù)中訪問的變量
}
var transaction = YAHOO.util.Connect.asyncRequest(’GET’, sUrl, callback, null);
下面的表給出的是通過正確返回時(shí)res參數(shù)可以獲得的屬性值。
屬性明 | 描述 |
tId | 該Http請求的事務(wù)表示 |
status | 返回的Http狀態(tài)碼 |
statusText | 對(duì)應(yīng)狀態(tài)碼的字符串表示 |
getResponseHeader[label] | 返回label名稱標(biāo)識(shí)的Http頭的值 |
getAllResponseHeader | 所有的Http頭的字符串表示,用”\n”分隔 |
responseText | 返回內(nèi)容的字符串表示 |
responseXML | 返回內(nèi)容的XML表示 |
argument | 回調(diào)函數(shù)中傳入的變量 |
錯(cuò)誤返回時(shí)可以通過res返回的屬性
屬性明 | 描述 |
tId | 該Http請求的事務(wù)表示 |
status | 0 |
statusText | “communication failure” |
argument | 回調(diào)函數(shù)中傳入的變量 |
如果想發(fā)送的是表單數(shù)據(jù),那么使用下面的代碼就可以了:
YAHOO.util.Connect.setForm(formId);
var cObj = YAHOO.util.Connect.asyncRequest(’POST’, ‘http://www.yahoo.com’, callback);
查看請求是否已經(jīng)處理完
var cObj = YAHOO.util.Connect.asyncRequest(’GET’,'http://www.yahoo.com’,callback);
var callStatus = YAHOO.util.Connect.isCallInProgress(cObj);
超時(shí)取消請求
var cObj = YAHOO.util.Connect.asyncRequest(’GET’, sUrl, callback);
setTimeout(”YAHOO.util.Connect.abort(cObj)”,10000);
YUI Utilities(Event)
使用Event工具包可以簡化瀏覽器端的事件驅(qū)動(dòng)程序的開發(fā),通過使用簡單的接口就可以訂制響應(yīng)DOM事件的代碼,同時(shí)獲得瀏覽器Event對(duì)象的各種屬性也很方便。通過Event工具包我們還可以訂制自己的事件,這樣頁面組件可以接收這些事件并做出響應(yīng)。
基本的事件代碼
var oElement = document.getElementById(”elementid”);//獲得事件源
function fnCallback(e) { alert(”click”); }//定義回調(diào)函數(shù)
YAHOO.util.Event.addListener(oElement, “click”, fnCallback);//注冊回調(diào)函數(shù),當(dāng)oElement的click事件發(fā)生的時(shí)候,fnCallback函數(shù)將被調(diào)用。
//或者更簡單的直接傳遞Id YAHOO.util.Event.addListener(”elementid”, “click”, fnCallback);
注冊響應(yīng)多個(gè)頁面元素的事件
var ids = [”el1″, “el2″, “el3″];//該數(shù)組中可以包括元素ID,元素的引用,或者兩者混合的情況。
function fnCallback(e) { alert(this.id); }
YAHOO.util.Event.addListener(ids, “click”, fnCallback);
Yui的Event包解決了一些比較實(shí)際的問題,第一頁面元素通常在Javacript注冊事件代碼后載入,這個(gè)時(shí)候Yui會(huì)正確延遲注冊,直到指 定Id的元素可以訪問。第二微軟的IE瀏覽器在事件處理函數(shù)中的this指向的是Window對(duì)象,而不是發(fā)生事件的那個(gè)元素,YUI也會(huì)正確的傳遞事 件 發(fā)生的源元素。第三可以把任意的對(duì)象傳遞給事件處理函數(shù)。
創(chuàng)建和使用自定義的事件
1.使用CustomerEvent對(duì)象創(chuàng)建自己的事件
function TestObj(name) {
this.name = name;
this.event1 = new YAHOO.util.CustomEvent(”event1″, this);
}
YAHOO.util.CustomEvent = function(type, oScope);
type表示事件類型的字符串
2。注冊對(duì)自定義事件的響應(yīng)函數(shù)
function Consumer(name, testObj) {
this.name = name;
this.testObj = testObj;
this.testObj.event1.subscribe(this.onEvent1, this);
}
3。響應(yīng)函數(shù)
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。觸發(fā)自定義事件
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工具包可以方便的的操作頁面元素,包括控制元素的坐標(biāo),以及改變元素的CSS風(fēng)格。
獲得和設(shè)置元素坐標(biāo)
var pos = YAHOO.util.Dom.getXY(’test’);
YAHOO.util.Dom.setXY(’target’, pos);
設(shè)置元素的CSS屬性
YAHOO.util.Dom.setStyle([’test’, ‘test2′], ‘opacity’, 0.5);
var opacity = YAHOO.util.Dom.getStyle(’test2′, ‘opacity’);
獲得顯示當(dāng)前文檔的窗口的大小。
var viewport = [
YAHOO.util.Dom.getViewportWidth(),
YAHOO.util.Dom.getViewportHeight()
];
獲取和設(shè)置與CSS相關(guān)的屬性
getElementByClassName(className,tagName,rootNode)
hasClass(element,className)
addClass(element,className)
removeClass(element,className)
replaceClass(element,oldClassName,newClassName)
<摘自:http://hi.baidu.com/0pawpaw/blog/item/59810dd71a863bdda044df3b.html>