每天一点点-ext源码分析之七

Ext把dom进一步封装了成一个新的类型Ext.Element。

Ext.Element = function(element, forceNew){

var dom = typeof element == "string" ?

DOC.getElementById(element) : element,

id;

if(!dom) return null;

id = dom.id;

if(!forceNew && id && Ext.Element.cache[id]){

return Ext.Element.cache[id];

}

this.dom = dom;

this.id = id || Ext.id(dom);

};

如果单纯从数据的角度来看，这个类的数据结构很简单，只有dom,id俩个实例属性。

属性dom指向原生dom对象，属性id是原生dom本来的id，如果原生dom没有id属性，则调用Ext.id(dom),创建一个唯一的值赋给id。

this.id = id || Ext.id(dom);

这里也用到了缓存机制。

if(!forceNew && id && Ext.Element.cache[id]){ //根据ID找出此Ext.Element对象是否已经存在

return Ext.Element.cache[id];

}

没什么神奇之处，Ext.Element类型的对象都放到cache这个容器里（其实就是一个盛放对象的对象），每当需要一个 Ext.Element类型的对象时，先从这个容器里看看有没有，实在找不到，再创建一个新的。

El.cache = {};//El是Ext.Element的简写形式

Ext.Element，有几个挺是重要的静态方法。

new一个Ext.Element对象显然不够优雅和实用。

通常使用Ext.get()方法，它会返回一个Ext.Element对象，它像一个单产出的加工厂，可以把dom或者id或者已经存在的Ext.Element对象，甚至是数组放进去，它就会帮你加工成Ext.Element对象（很想创建对象的工厂方法）

El.get = function(el){

var ex,

elm,

id;

if(!el){ return null; }

if (typeof el == "string") { // element id

if (!(elm = DOC.getElementById(el))) {

return null;

}

if (ex = El.cache[el]) {

ex.dom = elm;

} else {

ex = El.cache[el] = new El(elm);

}

return ex;

} else if (el.tagName) { // dom element

if(!(id = el.id)){

id = Ext.id(el);

}

if(ex = El.cache[id]){

ex.dom = el;

}else{

ex = El.cache[id] = new El(el);

}

return ex;

} else if (el instanceof El) {

if(el != docEl){

el.dom = DOC.getElementById(el.id) || el.dom; // refresh dom element in case no longer valid,

// catch case where it hasn't been appended

El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it

}

return el;

} else if(el.isComposite) {

return el;

} else if(Ext.isArray(el)) {

return El.select(el);

} else if(el == DOC) {

// create a bogus element object representing the document object

if(!docEl){

var f = function(){};

f.prototype = El.prototype;

docEl = new f();

docEl.dom = DOC;

}

return docEl;

}

return null;

};

它根据传参的不同，分成6种情况来处理

（1）

if (typeof el == "string") { // element id

if (!(elm = DOC.getElementById(el))) {

return null;

}

if (ex = El.cache[el]) {

ex.dom = elm;

} else {

ex = El.cache[el] = new El(elm);

}

return ex;

如果传入的是字符串，那么就应该传入的是dom的id,然后再从缓存中查找有无此id，没有再新建一个Ext.Element元素，并且放入缓存当中

(2)

else if (el.tagName) { // dom element

if(!(id = el.id)){

id = Ext.id(el);

}

if(ex = El.cache[id]){

ex.dom = el;

}else{

ex = El.cache[id] = new El(el);

}

return ex;

如果传入的是dom元素，处理基本和（1）相同.

(3)

else if (el instanceof El) {

if(el != docEl){

el.dom = DOC.getElementById(el.id) || el.dom;

El.cache[el.id] = el; // in case it was created directly with Element(), let's cache it

}

return el;

如果传入的已经是Element类型的对象，更新dom属性，并且放入缓存

(4)

else if(el.isComposite) {

return el;

}

如果传入的是Ext.CompositeElementLite类的对象，不做处理，直接返回，不放入缓存。

（5）

else if(Ext.isArray(el)) {

return El.select(el);

}

如果传入的是数组，那么就把它当成CSS选择器，根据此CSS选择器查找，不放入缓存

（6）

else if(el == DOC) {

if(!docEl){

var f = function(){};

f.prototype = El.prototype;

docEl = new f();

docEl.dom = DOC;

}

return docEl;

}

如果传入的是document，那么会简单的对document做些封装，不放入缓存