上篇读了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;
});
在页面卸载的最后时刻会清空所有的缓存。