上篇读了Ext.Element的部分方法,这篇继续。El.addMethods方法,
var ep = El.prototype; El.addMethods = function(o){ Ext.apply(ep, o); };
El是Ext.Element类的简写,addMethods可认为是该类的静态方法。无须new使用类名直接调用。其内部调用的是Ext.apply,该方法会将o上的所有属性方法拷贝到ep上。
使用该方法为Ext.Element类的原型上添加属性,方法。如Ext中队样式的操作、动画、位置等都是通过该方法扩展。
Ext.apply在 读Ext之一(实用方法) 中介绍了。
接着看El.get(该类的静态方法),
El.get = function(el){ var ex, elm, id; if(!el){ return null; } if (typeof el == "string") { // element id // 先使用document.getElementById获取,如果不存在直接返回null if (!(elm = DOC.getElementById(el))) { return null; } if (EC[el] && EC[el].el) { ex = EC[el].el; ex.dom = elm; } else { ex = El.addToCache(new El(elm)); } return ex; } else if (el.tagName) { // dom element if(!(id = el.id)){ id = Ext.id(el); } if (EC[id] && EC[id].el) {// 先从缓存(Ext.elCache)中取 ex = EC[id].el; ex.dom = el; } else { ex = El.addToCache(new El(el));// new一个Ext.Element再将其放入缓存中(Ext.elCache) } 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 } 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; };
该方法是Ext中很重要的方法,用来获取Ext元素(Ext.Element)而不是HTMLElement。想获取对应的HTMLElement,可以这么使用
Ext.get('id').dom;
Ext.get是该方法的别名。通常直接使用Ext.get而不是Ext.Element.get。该方法内部实现如下,
分支1,传id
先使用document.getElementById获取,如果不存在直接返回null。存在的话,先从缓存(Ext.elCache)中取,否则new一个Ext.Element再将其置入缓存中(Ext.elCache)
分支2,传HTMLElement对象
与传id类似,取到id后先从缓存中去,没有则创建Ext.Element再将其置入缓存后返回。
分支3,传Ext.Element对象
如果不是docEl(一个临时类),则修改所传参数的dom属性(更新dom)然后返回。
分支4,传Ext.CompositeElementLite对象
Ext.CompositeElementLite 在后续会介绍,这个类用来操作批量的Ext.Element。
分支5,传数组
使用El.select返回,El.select后续介绍。
分支6,传document
如果docEl不存在则创建。因为document是唯一的,因此该对象只创建一次。后续直接返回即可。可以看到docEl与普通Ext.Element不同之处在于其dom属性一个是document,一个则不是。
分支1中用到了Ext.addToCache,
El.addToCache = function(el, id){ id = id || el.id; EC[id] = { el: el, data: {}, events: {} }; return el; };
可以看到即把Ext.Element元素以id为key存放到Ext.elCache中。
存放的改对象有三个属性,el是Ext.Element的实例对象,data用来存储数据(El.data用到),events用来存放事件。
再往下是El.data方法,该方法是供库内部使用的,它即是setter也是getter。
El.data = function(el, key, value){ el = El.get(el); if (!el) { return null; } var c = EC[el.id].data; if(arguments.length == 2){ return c[key]; }else{ return (c[key] = value); } };
可以这么测试,
var p1 = document.getElementById('p1'); Ext.Element.data(p1,'name','jack'); // setter Ext.Element.data(p1,'name'); // getter
经常使用jQuery的人会想到 $.data ,接口于此类似。当然jQuery还有$().data。
接下来是garbageCollect函数,
function garbageCollect(){ if(!Ext.enableGarbageCollector){ clearInterval(El.collectorThreadId); } else { var eid, el, d, o; for(eid in EC){ o = EC[eid]; if(o.skipGC){ continue; } el = o.el; d = el.dom; if(!d || !d.parentNode || (!d.offsetParent && !DOC.getElementById(eid))){ if(Ext.enableListenerCollection){ Ext.EventManager.removeAll(d); } delete EC[eid]; } } // Cleanup IE Object leaks if (Ext.isIE) { var t = {}; for (eid in EC) { t[eid] = EC[eid]; } EC = Ext.elCache = t; } } } El.collectorThreadId = setInterval(garbageCollect, 30000);
可以看到,每隔30秒会进行一次垃圾回收。即遍历Ext.elCache。取Ext元素的dom属性,如果存在以下条件则清空(包括其上的所有事件handler)
1,dom不存在
2,dom的父元素不存在
3,页面上获取不到该dom元素
接下来是Ext.fly,该方法实际上是Ext.Element.fly的别名,客户端程序员多数时候使用Ext.fly而非Ext.Element.fly。
var flyFn = function(){}; flyFn.prototype = El.prototype; El.Flyweight = function(dom){ this.dom = dom; }; El.Flyweight.prototype = new flyFn(); El.Flyweight.prototype.isFlyweight = true; El._flyweights = {}; El.fly = function(el, named){ var ret = null; named = named || '_global'; if (el = Ext.getDom(el)) { (El._flyweights[named] = El._flyweights[named] || new El.Flyweight()).dom = el; ret = El._flyweights[named]; } return ret; };
依次定义了flyFn,El.Flyweight。flyFn的原型是Ext.Element.prototype,El.Flyweight的原型是flyFn的实例对象。
即El.Flyweight类继承了Ext.Element类原型上的所有属性,方法。
El.Flyweight.prototype.isFlyweight = true;
该句通过isFlyweight标示对象是否为Ext.Element.Flyweight类型对象。
El._flyweights暂存该类型对象,为一个hash。
El.fly 每次调用都会去创建一个Ext.Element.Flyweight对象,存在El._flyweights后返回。示意图如下:
注意:El.fly(即Ext.fly)并未将创建的对象缓存,每次调用都将覆盖之前的(除非每次所传的第二个参数named不同)。
这是Ext.fly不同于Ext.get的地方。这种设计模式称为享元模式(Flyweight),它通过颗粒化将属性分为内部及外部以达到共享从而节省内存。享元模式的实现通常需用到工厂模式。
再往下是
Ext.EventManager.on(window, 'unload', function(){ delete EC; delete El._flyweights; });
在页面卸载的最后时刻会清空所有的缓存。