转 Ext.get()与Ext.fly()之区别

Ext.Element是Ext对Dom元素的一个强有力封装，它封装了很多方便对dom操作的接口(并通过Element的dom属性
引用对应的dom元素)，因此每创建一个Element元素都将消耗不少的内存(主要是大量的操作接口消耗)，因此如
果创建过多的Element元素必然导致内存占用的剧增和系统性能的下降。

Ext.get和Ext.fly返回的都是一个Element对象，但是Ext.get返回的是一个独立的Element，拥有自己独立的操作接口
封装，可以将其返回值保存到变量中，以便以后调用操作等，这样为重用带来了方便。但是它的一个很大缺
点就是内存消耗问题，假如调用Ext.get(id)1000次，则会在内存中创建1000个独立Element，其内存占用可想而
知。但是很多时候我们可能仅仅只是对该dom元素执行一次很简单的操作，如隐藏(hide)，这样如果每次都创建
一个独立Element放在内存中，实在是对内存的巨大浪费，因此当我们在只需要执行一次操作或者一个很简单
的操作时，采用Ext.get就显得很不合理。Ext.fly正是为了解决这个问题而出现，它通过使每次创建的Element共
享内存中的一套操作接口来达到节省内存的效果。

下面来看Ext.fly的实现代码:

 

Js代码

var flyFn = function(){};    
flyFn.prototype = El.prototype;    
var _cls = new flyFn(); //将Element的所有操作接口放在_cls中    
// dom is optional    
El.Flyweight = function(dom){    
    this.dom = dom;    
}; //仅包含一个dom属性的Object    
El.Flyweight.prototype = _cls; //将操作接口复制给Element实例对象    
El.Flyweight.prototype.isFlyweight = true; //标志该Element是flyweight对象    
El._flyweights = {}; //flyweight对象缓存容器    
  
El.fly = function(el, named){    
    named = named || '_global';    
    el = Ext.getDom(el); //取得dom对象    
    if(!el){    
        return null;    
    }    
    if(!El._flyweights[named]){    
        El._flyweights[named] = new El.Flyweight(); //仅在第一次调用Ext.fly时创建一个Flyweight对象并缓存    
    }    
    El._flyweights[named].dom = el; //将flyweight对象的dom属性指向该el    
    return El._flyweights[named];    
};  

 

 从上面的代码不难看出，仅在第一次调用Ext.fly时创建一个Flyweight对象（该对象包含了Element的所有操作接口）并将其缓存，

 

之后的所有fly操作都只是修改该flyweight对象的dom属性，每次fly返回的结果都是共享的同一个flyweight对象。
这样每次fly返回的Element相比Ext.get而言，减少了每次创建Element时对大量的操作接口的创建。所有fly的对象
都共享一套Element操作接口，内存占用自然少了很多，而且执行速度也得到了提升。在大量的创建操作中效
果会更加明显。

由于fly的操作原理，我们不能将fly的返回结果保存在变量中以便重用，因为每次fly操作都将可能改变该变量的
dom指向。如下面的代码就是不正确的：

 

Js代码

var my_id = Ext.fly('my_id');       
  
Ext.fly('another_id'); //此时my_id的dom引用已经变为another_id       
  
my_id.highlight('FF0000',{ //此处的操作将是对  another_id元素的操作          
    endColor:'0000FF', duration: 3       
});