YUI 3 學習筆記：dom

YUI Dom 模組的階層很清楚：

展開的詳細圖：yui-dom-full.png

一點心得

1. 很清晰的 submodules 組織方式，各個子模組分工明確，源碼明朗如皓月，看得心裡很晴天。
2. selector-css3 採用的是 plugin 方式，在 selector-css2 裡預留了擴充介面，css3 裡直接擴充偽類和操作符。這種可擴充寫法在細節代碼裡也被多次用到，比如針對 IE 的某些相容代碼的寫法。代碼獨立，可增可砍，很 cute.
3. 小顆粒的靈活也是有代價的。各個 submodules 之間，有些許重複代碼。值還是不值，很難評說。
4. 三元運算子是個好東西：

   getText: (document.documentElement.textContent !== undefined) ?
       function(element) {
           var ret = '';
           if (element) {
               ret = element.textContent;
           }
           return ret || '';
       } : function(element) {
           var ret = '';
           if (element) {
               ret = element.innerText;
           }
           return ret || '';
       }
   

   在不同的瀏覽器下，getText 指向不同的函數，而且三元運算子中的判斷只需執行一次。
   類似還有一種寫法：

   _childrenByTag: function() {
       if (document[DOCUMENT_ELEMENT].children) {
           return function(element, tag, fn, toArray) {
               ...
           };
       } else {
           return function(element, tag, fn) {
               ...
           };
       }
   }()
   

   返回函數的函數挺好用。

5. 看源碼前，會嘗試回答一個問題：如何我來設計 DOM 的 API, 會畫出怎樣一副圖來？最後將自己設計的 API 和
   YUI3 的對照，我的設計裡，功能比較全，但層次分類和清晰度上，YUI3 的明顯好很多。從總體上比較和學習 API 的設計，別有一番迷人的天地。
6. 這次看代碼，沒怎麼深究到代碼細節。一直提醒自己從大局上去看。捨得捨得，有所舍才有所得，的確如此。