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)