每天一点点-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做些封装，不放入缓存