读Ext之五（Dom的低级封装）

上篇看了ext-base-event.js(Ext.lib.Event)，这篇看ext-base-dom.js(Ext.lib.Dom)。
后续EventManager.js(Ext.EventManager)其中会用到该篇的Ext.lib.Dom。

整体浏览ext-base-dom.js可以看到还是一个匿名函数执行，与上一篇不同的是这次并非返回包装好的对象pub，而是直接将对象赋值给Ext.lib.Dom。

(function(){
    var doc = document,
        ...;
         
    Ext.lib.Dom = {        
        ...
    };
})();

一些变量声明，

var doc = document,
    isCSS1 = doc.compatMode == "CSS1Compat",
    MAX = Math.max,     
    ROUND = Math.round,
    PARSEINT = parseInt;

doc、Max、ROUND、PARSEINT为简写。好处在上一篇已经提到，clue 还提到了这样写提高了压缩率。即document，Math.max等不会被压缩工具进行名称替换，doc，MAX等则会，可用 YUI Compressor 测试下。

isCSS1用来判断浏览器的文档模式(doctype)，为true是标准模式，false是怪异模式。第一篇提到了Ext.js中有个Ext.isStrict，和这里的isCSS1是一样的。

Ext作者没有使用Ext.isStrict而是新增了一个变量isCSS1个人猜测原因同doc，MAX，亦或是为了保持此处代码一致性。

接下来是Ext.lib.Dom对象的定义，先看第一个方法，

isAncestor : function(p, c) {
    var ret = false;
     
    p = Ext.getDom(p);
    c = Ext.getDom(c);
    if (p && c) {
        if (p.contains) {
            return p.contains(c);
        } else if (p.compareDocumentPosition) {
            return !!(p.compareDocumentPosition(c) & 16);
        } else {
            while (c = c.parentNode) {
                ret = c == p || ret;                        
            }
        }               
    }   
    return ret;
},

这个方法用来判断元素c(child)是否是p(parent)的子节点。这里有contains和compareDocumentPosition各浏览器兼容列表。这个方法与ext-base-event.js的私有方法elContains（上一篇已提到）作用类似，不知为何Ext作者要冗余。

接下来是几个获取视图，文档，视窗宽高的方法，

getViewWidth : function(full) {
    return full ? this.getDocumentWidth() : this.getViewportWidth();
},
getViewHeight : function(full) {
    return full ? this.getDocumentHeight() : this.getViewportHeight();
},
getDocumentHeight: function() {            
    return MAX(!isCSS1 ? doc.body.scrollHeight : doc.documentElement.scrollHeight, this.getViewportHeight());
},
getDocumentWidth: function() {            
    return MAX(!isCSS1 ? doc.body.scrollWidth : doc.documentElement.scrollWidth, this.getViewportWidth());
},
getViewportHeight: function(){
    return Ext.isIE ? 
           (Ext.isStrict ? doc.documentElement.clientHeight : doc.body.clientHeight) :
           self.innerHeight;
},
getViewportWidth : function() {
    return !Ext.isStrict && !Ext.isOpera ? doc.body.clientWidth :
           Ext.isIE ? doc.documentElement.clientWidth : self.innerWidth;
},

这里仅讲述宽。
getViewportWidth 获取视口的宽。即怪异模式且非Opera使用doc.body.clientWidth获取，IE使用doc.documentElement.clientWidth获取，其它浏览器使用self.innerWidth获取。

getDocumentWidth 获取文档的宽。我们知道如果文档中出现水平滚动条，那么文档的宽将大于视口。因此比较scroll宽度和文档宽度，取其中较大的。
这里仍仍然需要区分浏览器的文档模式，怪异模式使用doc.body.scrollWidth，标准模式使用doc.documentElement.scrollWidth获取。

getViewWidth 是对以上两个方法的封装，full为true则取整个文档宽（含滚动），否则只取文档可视区域宽。

接下来是获取元素相当于文档的位置方法，

getY : function(el) {
    return this.getXY(el)[1];
},
getX : function(el) {
    return this.getXY(el)[0];
},
getXY : function(el) {
    var p, 
        pe, 
        b,
        bt, 
        bl,     
        dbd,        
        x = 0,
        y = 0, 
        scroll,
        hasAbsolute, 
        bd = (doc.body || doc.documentElement),
        ret = [0,0];
         
    el = Ext.getDom(el);
 
    if(el != bd){
        if (el.getBoundingClientRect) {
            b = el.getBoundingClientRect();
            scroll = fly(document).getScroll();
            ret = [ROUND(b.left + scroll.left), ROUND(b.top + scroll.top)];
        } else {  
            p = el;     
            hasAbsolute = fly(el).isStyle("position", "absolute");
 
            while (p) {
                pe = fly(p);        
                x += p.offsetLeft;
                y += p.offsetTop;
 
                hasAbsolute = hasAbsolute || pe.isStyle("position", "absolute");
                         
                if (Ext.isGecko) {                          
                    y += bt = PARSEINT(pe.getStyle("borderTopWidth"), 10) || 0;
                    x += bl = PARSEINT(pe.getStyle("borderLeftWidth"), 10) || 0;    
 
                    if (p != el && !pe.isStyle('overflow','visible')) {
                        x += bl;
                        y += bt;
                    }
                }
                p = p.offsetParent;
            }
 
            if (Ext.isSafari && hasAbsolute) {
                x -= bd.offsetLeft;
                y -= bd.offsetTop;
            }
 
            if (Ext.isGecko && !hasAbsolute) {
                dbd = fly(bd);
                x += PARSEINT(dbd.getStyle("borderLeftWidth"), 10) || 0;
                y += PARSEINT(dbd.getStyle("borderTopWidth"), 10) || 0;
            }
 
            p = el.parentNode;
            while (p && p != bd) {
                if (!Ext.isOpera || (p.tagName != 'TR' && !fly(p).isStyle("display", "inline"))) {
                    x -= p.scrollLeft;
                    y -= p.scrollTop;
                }
                p = p.parentNode;
            }
            ret = [x,y];
        }
    }
    return ret
},

核心是getXY方法，getX和getY都是调用getXY。获取html元素在页面中（窗口客户区域）的位置(top,left)不是件容易的事。
该方法实现用到了Ext.Element相关方法，后续阅读。

接下来是设置元素位置的方法，

setXY : function(el, xy) {
    (el = Ext.fly(el, '_setXY')).position();
     
    var pts = el.translatePoints(xy),
        style = el.dom.style,
        pos;                
     
    for (pos in pts) {              
        if(!isNaN(pts[pos])) style[pos] = pts[pos] + "px"
    }
},
setX : function(el, x) {
    this.setXY(el, [x, false]);
},
setY : function(el, y) {
    this.setXY(el, [false, y]);
}