lexy

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參數可以獲得的屬性值。

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

如果想發送的是表單數據，那么使用下面的代碼就可以了：

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); 

使用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)