首先yahoo在后支持；
mail list也比較活躍，但好象高人關注的不多；
出現時間不常，參考了太多開源類庫如prototype.js及擴展項目,dojo....；
項目測試做的不錯（yahoo用了它的不少）；
太多的靈感（yahoo中界面，用戶交互設計高人應該提了不少建議）
容易上手（代碼寫的比較累贅，可能是0.10.0版本吧）；
不敢再與其它類庫比較了，怕招罵。呵。總之還是我的那個觀點，javascript代碼太容易抄襲了，所以類庫的可”重構性“很是重要。YUI做的還行吧。
現在切入正題
一、dom.js可能這部分與prototype.js某些功能差不多，但實現感覺比prototype.js更好些（個人觀點，別咂我哦）
? 1、通過id,className，TagName等返回DOM元素的方法。getElementsBy (<Function> method, <String> tag, <String/HTMLElement> root) 看看這個方法很有意思。你可以通過這個方法定制你取的dom元素的方法。
???? getElementsBy: function(method, tag, root) {
???????? tag = tag || '*';
???????? root = this.get(root) || document;
????????
???????? var nodes = [];
???????? var elements = root.getElementsByTagName(tag);
????????
???????? if ( !elements.length && (tag == '*' && root.all) ) {
??????????? elements = root.all; // IE < 6
???????? }
????????
???????? for (var i = 0, len = elements.length; i < len; ++i)
???????? {
??????????? if ( method(elements[i]) ) { nodes[nodes.length] = elements[i]; }
???????? }
???????? return nodes;
????? },
? 2、修改dom元素的className.
???? 無非是增，刪，改，查。注意 YUI中可以傳入id或dom的數組來處理。通過匿名函數來實現。絕對經典。
?? 詳細看
batch: function(el, method, o, override) {
???????? el = this.get(el);
???????? var scope = (override) ? o : window;
????????
???????? if (!el || el.tagName || !el.length)
???????? { // is null or not a collection (tagName for SELECT and others that can be both an element and a collection)
??????????? return method.call(scope, el, o);
???????? }
????????
???????? var collection = [];
????????
???????? for (var i = 0, len = el.length; i < len; ++i)
???????? {
??????????? collection[collection.length] = method.call(scope, el[i], o);
???????? }
????????
???????? return collection;
????? },
3、直接對DOM元素的style的修改
?? 如果修改dom.style細粒度屬性。className就不合適了。還好提供了這些方法。并且跨瀏覽器支持的不錯，很多屬性我都不知道，看代碼才明白各個瀏覽器對css支持有不同，如property == 'opacity' && el.filters
?? 也用batch支持數組方式。
YAHOO.util.Dom.setStyle(["div1","div2","div3"], "color","red");
4、對dom元素位置和大小的函數
對于偶喜歡擺弄webgis,google maps之類的當然最喜歡這部分了。
可以得到或修改dom元素的x,y。YUL的animation、dragdrop等大量用到這個東西。當然這部分也做了大量跨瀏覽器支持。
對于DOM的大小，YUI定義了個YAHOO.util.Region包，也就是個矩形，定義了contains（包含），intersect（相交方法）。呵呵，和prototype.js中的within，overlap差不多。? 其實用這個函數實現google個性化定義的拖是個好不錯。
5、其它方法
getViewportHeight ()?? getDocumentHeight?? 不知道有什么不同，待偶查查資料去。
getViewportWidth ()?? getDocumentWidth
inDocument? 是否document對象
isAncestor: function(haystack, needle) 檢查dom對象是否是另一個對象的父節(jié)點
...................
二、event.js
關于注冊事件的問題我也寫過不少，YUI實現的是不錯的，通過CustomEvent也可以模擬實現AOP的方法攔截。當然dojo的實現還是老大。
主要分為兩部分。
1、事件注冊
YAHOO.util.Event.addListener: function(el, sType, fn, oScope, bOverride);
參數分別是： dom的ID或元素本身；類型（click,mouseover等）；函數；誰調用這個函數；是否覆蓋
看例子，注意最后兩個參數，只有在bOverride為true時才有效。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<script type="text/javascript" src="../../build/yahoo/yahoo.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript">
var name="window.name";
var Fun={
??? name : "funName",
?doClick: function(){
?????? alert(this.name);
?}
}
var init = function() {
?? YAHOO.util.Event.addListener(test, 'click', Fun.doClick);
?? YAHOO.util.Event.addListener(test, 'click', Fun.doClick,Fun,false);
?? YAHOO.util.Event.addListener(test, 'click', Fun.doClick,Fun,true);
?? YAHOO.util.Event.addListener(test, 'click', Fun.doClick,window,true);
};
YAHOO.util.Event.addListener(window, 'load',init);
</script>
</head>
<body>
<div id="test" name="dom name">
?? 誰敢點我
</div>
</body>
</html>
小TIP:yahoo的事件注冊支持多個dom元素的事件注冊，只要第一個參數是 dom對象的數組就可以了。
????? 也支持延遲注冊，也就是你在dom元素還沒有加載的時候注冊事件，但有個條件，第一個參數必須是字符串（dom的id）,這里就不支持多個元素的注冊了。? YUI會在window.onload方法里把所有延遲注冊的事件注冊了（太繞了）。
2、CustomEvent，Subscriber
? 一個觀察者模式的javascript的實現，要想用好，難度不小，yahoo官網提供的例子也極度白癡。但在YUI的animation,AutoComplete等里面應用了這個玩意，很有創(chuàng)意。在控件內部定義的很多CustomEvent,當控件狀態(tài)改變時，觸發(fā)CustomEvent里面的Subscriber方法。有點AOP的感覺。
? 感覺這類傳統(tǒng)c/s的設計模式用javascrit來實現對于我們普通開發(fā)者來說沒什么好處，反而讓代碼更加難懂，類庫里面用用就得了，。無論什么地方用，把ajax變成當成c/s架構的變成思想是我們應該提前樹立的。
? 我也只能通過例子說說定制事件了;下面代碼（拷貝到html可以直接運行ie,ff下測試通過）是一個簡單的AOP實現，象這種弱類型，參數可以隨便變化的語言實現類似AOP的功能是很尷尬的。就當練手的。
??? 開發(fā)ajax時,把瀏覽器當成桌面開發(fā),那時,觀察者,MVC就很實用了.
<body>
<div id="log"></div>
</body>
<SCRIPT LANGUAGE="JavaScript">
function log(msg){
??? var obj=document.getElementById("log");
?obj.innerHTML+=msg+"<br>";//你們可別這么寫啊
}
var YAHOO={};
YAHOO.util={};
YAHOO.util.CustomEvent = function(type, oScope) {
??? this.type = type;
??? this.scope = oScope || window;
??? this.subscribers = [];
??? if (YAHOO.util.Event) {
??????? YAHOO.util.Event.regCE(this);
??? }
};
YAHOO.util.CustomEvent.prototype = {
??? subscribe: function(fn, obj, bOverride) {
??????? this.subscribers.push( new YAHOO.util.Subscriber(fn, obj, bOverride) );
??? },
??? unsubscribe: function(fn, obj) {
??????? var found = false;
??????? for (var i=0, len=this.subscribers.length; i<len; ++i) {
??????????? var s = this.subscribers[i];
??????????? if (s && s.contains(fn, obj)) {
??????????????? this._delete(i);
??????????????? found = true;
??????????? }
??????? }
??????? return found;
??? },
??? fire: function() {
??????? for (var i=0, len=this.subscribers.length; i<len; ++i) {
??????????? var s = this.subscribers[i];
??????????? if (s) {
??????????????? var scope = (s.override) ? s.obj : this.scope;
??????????????? s.fn.call(scope, this.type, arguments, s.obj);
??????????? }
??????? }
??? },
??? unsubscribeAll: function() {
??????? for (var i=0, len=this.subscribers.length; i<len; ++i) {
??????????? this._delete(i);
??????? }
??? },
??? _delete: function(index) {
??????? var s = this.subscribers[index];
??????? if (s) {
??????????? delete s.fn;
??????????? delete s.obj;
??????? }
??????? delete this.subscribers[index];
??? }
};
YAHOO.util.Subscriber = function(fn, obj, bOverride) {
??? this.fn = fn;
??? this.obj = obj || null;
??? this.override = (bOverride);
};
YAHOO.util.Subscriber.prototype.contains = function(fn, obj) {
??? return (this.fn == fn && this.obj == obj);
};
/////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////
var ProxyFunction=function(fn,scope){
?? this.fn=fn;
?? this.scope=scope||window;
?? this.beforeEvent=new YAHOO.util.CustomEvent("beforeEvent",this.scope);
?? this.afterEvent=new YAHOO.util.CustomEvent("afterEvent",this.scope);
}
ProxyFunction.prototype.addBefore=function(fn, obj){
?? this.beforeEvent.subscribe(fn, obj,true);
}
ProxyFunction.prototype.addAfter=function(fn, obj){
?? this.afterEvent.subscribe(fn, obj,true);
}
ProxyFunction.prototype.execute=function(){
??? this.beforeEvent.fire();
??? var ret=this.fn.apply(this.scope, arguments);//我這里面保證arguments為fun被代理函數的參數列表
?log("execute......");
?log("execute after 前 ret="+ret);
?var temp={result:ret};//為了修改執(zhí)行結果......
??? this.afterEvent.fire(temp);
?return temp.result;
}
var Logic={
??? name: "Logic private value",
??? fun : function (p){
???? log("被代理方法訪問this.name="+this.name);
??????? return "fun "+p+" execute!";
??? }
}
function Interceptor(){
??? this.name="Interceptor? private value";
}
Interceptor.prototype.before=function(){
??? log("before...... this.name="+this.name);
?log("before...... arguments[0]="+arguments[0]+" arguments[1]="+arguments[1]+" arguments[2]="+arguments[2]+" arguments[3]="+arguments[3]);
?log("before...... arguments[2]="+arguments[2]+" 為addBefore/addAfter中最后一個參數");
??? log("before......");
}
Interceptor.prototype.after=function(){
??? log("after......this.name="+this.name);
?log("after......arguments[1]="+arguments[1][0] +"? 可以在這修改返回的結果");
?arguments[1][0].result="修改結果";
??? log("after......");
}
var funProxy=new ProxyFunction(Logic.fun,Logic);//參數[0] 需要代理的函數 參數[1] 執(zhí)行這個函數的對象
var myInterceptor=new Interceptor();//新建攔截器
funProxy.addBefore(myInterceptor.before,window);//注意第三個參數
funProxy.addBefore(myInterceptor.before,myInterceptor);
funProxy.addAfter(myInterceptor.after,Logic);
var result=funProxy.execute("參數");
log(result);
</SCRIPT>
凡是有該標志的文章，都是該blog博主Caoer（草兒）原創(chuàng)，凡是索引、收藏
、轉載請注明來處和原文作者。非常感謝。