ExtJs源码分析与学习—ExtJs元素Element（1）
日期：2014-05-16 浏览次数：20435 次
????? 从这一节开始分析ExtJs对元素（Element）的封装与扩展，首先看Ext.lib.Dom
?
类Ext.lib.Dom
?
????? 该类源代码对应的文件为ext-base-dom.js。Ext.lib.Dom主要实现了对document中元素部分方法的兼容性实现。在前面事件（Ext.EventManager）的讲解中已经用到了该类。
????? 该类的实现采用了匿名闭包自执行函数实现，执行完该函数，把封装好的对象赋给了对象Ext.lib.Dom，实现了对该类的封装，这种实现的好处把不需要暴露的变量封装到闭包中，同时这些变量的作用域随Ext.lib.Dom自始自终，而不是调用后立马回收。援引别人写的一段话“严格意义上讲任何一个function在执行时就构成一个闭包，闭包的实质是作用域。普通的function，内部声明的变量在执行完会全被回收掉，这时闭包也被回收了，所以这种闭包对我们没有用处，他只是个作用域。如果一个function的局部变量在执行时被生命周期更长的变量引用，那么这个function执行完时就不能回收掉这个局部变量，这个局部变量的生命周期超出了他的作用域，这时的作用域也不能被回收掉，就形成了典型的闭包。闭包的作用就是使局部变量拥有更大的生命周期，甚至全局的生命周期，这使得闭包可以保存function执行时的状态，特别是那种function中又返回一个function时，被返回的function就可以访问父function执行时的所有局部变量（典型的带状态函数）。因为JS中回收一个变量不是看作用域是否结束，而是看引用数。”
?
????? 先看Ext.lib.Dom一些变量的声明
?
var doc = document,
isCSS1 = doc.compatMode == "CSS1Compat",
MAX = Math.max,
ROUND = Math.round,
PARSEINT = parseInt;
?
????? 这些变量的声明一是全局管理，二是可以提高js文件代码的压缩率，http://yui.2clics.net/
?? 可以在线压缩js文件。
isCSS1用来判断浏览器的文档模式(doctype)，true为标准模式，false为怪异模式。在Ext类中用Ext.isStrict来判断，这里采用isCSS1，实现的功能是一样的。
????? 下面看Ext.lib.Dom中方法的定义，首先看方法isAncestor
?
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是否是p的子元素，并且实现了各浏览器的兼容contains和compareDocumentPosition，关于这两个方法的讲解，参照 javascript contains和compareDocumentPosition 方法来确定是否HTML节点
。在ext-base-event.js? Ext.lib.EventObject 中有类似实现elContains。
???? 接下来是返回文档和页面视图高宽，代码如下：
?
/**
* 如果full为真返回页面的实际宽度，否则返回可视宽度
* 实际宽度指整个页面的宽度，包括滚动条看不到的区域，而可视宽度指当前可以看到的宽度
*/
getViewWidth : function(full) {
return full ? this.getDocumentWidth() : this.getViewportWidth();
},
/**
* 如果full为真返回页面的实际高度，否则返回可视高度
*/
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;
},
????? 这一组方法可以分为两类，返回页面的实际高宽度和返回页面的可视宽度，当出现滚动条时，实际高宽度会大于可视高宽度，方法处理了不同浏览器之间的兼容。关于效果请看以下例子
?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext中getDocumentWidth与getViewportWidth的区别</title>
<link rel="stylesheet" type="text/css"
href="../ext-3.3.1/resources/css/ext-all.css" />
<script type="text/javascript"
