YUI3 core閱讀筆記

node-debug.js :

node 為 htmlelement包裝(處理了快取)，關鍵 addmethod ,importmethod 將 y.dom 中的靜態方法（yui2模型）遷移到 node例項中去.

y.dom.method(node,args); ==> node.method(args);

nodelist 為多個 htmlelements的包裝，關鍵也為 nodelist.addmethod 以及nodelist.importmethod，同ext .compositeelement 類似

將node的方法也加到nodelist中去，並呼叫時自動迴圈對nodelist中的所有元素呼叫對應方法。

event-custom-debug.js & event-simulate-debug.js

自定義事件處理系統和原生dom處理事件系統完全介面一致(不同於extjs，node和元件的事件處理完全分離，yui3 node和元件其實都是 augment 自 eventtarget)：除了dom模擬觸發需要 node.simulate 而自定義事件需要obj.fire。

yui當前例項 y 本身也 augment 自eventtarget，一些全域性自定義事件比如windowresize,domready即由 y觸發，可以在y上處理。

注意 node.simulate並沒有採用 jquery自己遍歷樹結構，挨個執行處理函式的方式，而是利用了瀏覽器自身的event simulation framework，對於w3c-dom-event2相容瀏覽器使用document.createevent而對於ie則使用document.createeventobject

而dom事件通過 domeventfacade 來進行包裝，保證各個瀏覽器的一致性。當emitfacade為true時複雜情況下的自定義事件觸發使用 eventfacade 來包裝，具有和domeventfacade基本一致的屬性,eventfacade.detail為fire引數。

事件處理器統一用subscriber包裝，可以方便實現aop,contextfn動態上下文環境的呼叫。

並且自定義事件也實現了bubble以及defaultfn功能

(publish必須設定emitfacade為true，呼叫firecomplex)

，可方便的實現以前元件必須顯式檢查beforeshow以及呼叫者必須監聽 beforeshow 等事件來實現aop攔截，現在只需元件編寫者申明事件的defaultfn以及呼叫者監聽 on("show")決定是否preventdefault即可，bubble定義在 eventtarget 中，eventtarget可以通過addtarget新增事件往上傳播的通知物件，使得自定義事件也可以通過delegate來簡化事件處理。

eventtarget 還另外支援了 jquery 類似的分類事件功能，對同乙個事件的一些***可以分做一類，類名放在事件名前面用｜分隔，以及結合 base 支援的字首機制，可以解決不同類的同名事件監聽問題，使用例子。

event-debug.js

不同於dom-event2中新增多個事件處理器由瀏覽器排程，yui3以及ext每個事件每個元素底層只繫結乙個dom2事件處理器，由這個dom2事件處理器再呼叫繫結在這個事件的所有事件處理函式。

20100427感悟：

事實上 node.on 呼叫 y.on ，而 y argument 自

eventtarget ，則相當於在 y 上新增自定義事件，不同點在於，在y上新增自定義事件的同時還在dom node上繫結事件當dom事件發生時fire自定義事件，自定義事件fire再呼叫我們的處理函式，又一次實現了自定義事件與dom事件的統一。

鍵：

var ek = y.stamp(el),
key = 'event:' + ek + type,
if (false === facade) 
if (capture)

值 :

精妙的y.augment :

保證augment後，new出來的示例，在執行相關augment方法時，之前augment**構造器要在當前例項上執行且只執行一次！

關鍵原始碼解析：

y.each(sproto, function(v, k) 
}//保證只會執行一次，不管呼叫哪個override的方法，一旦呼叫,this[k]就不是replacements[i]了，
};if ((!wl || (k in wl)) && (ov || !(k in this)))  else 
}}, newproto, true);

示例詳解：

var comp=function(){};
y.augment(comp,y.eventtarget);
var two=new comp();
//eventtarget建構函式沒有執行
console.log(two._yuievt);
//方法為暫時替代方法
console.log(two.on.tostring());
//執行一次override函式，eventtarget建構函式作用在例項上，且例項上的所有方法復原			
two.on("ok",function(){});
//一切正常
console.log(two._yuievt);
console.log(two.on.tostring());

總之一句話：yui任何乙個函式的呼叫都很曲折，為了完美的架構以及橋梁承接以前略顯陳舊的**，yui3在效能上確實做出了不少的犧牲。

參考：

yui3原始碼以及 luke smith — events evolved

satyen desai — yui3: design goals and architecture

YUI3 core閱讀筆記

YUI 3 學習筆記 queue base

閱讀筆記3

閱讀筆記3

YUI3 core閱讀筆記

YUI 3 學習筆記 queue base

閱讀筆記3

閱讀筆記3

相關推薦