YUI 3 学习笔记：dom

亦凉 2022-08-06 15:27 157阅读 0赞

YUI Dom 模块的层次结构很清楚：  
![yui-dom.png][]  
展开的详细图：[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.  这次看代码，没怎么深究到代码细节。一直提醒自己从大局上去看。舍得舍得，有所舍才有所得，的确如此。

[yui-dom.png]: http://lifesinger.org/blog/wp-content/uploads/2009/07/yui-dom.png
[yui-dom-full.png]: http://lifesinger.org/blog/wp-content/uploads/2009/07/yui-dom-full.png