Ext的get和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代碼

1. var flyFn = function(){};    
2. flyFn.prototype = El.prototype;    
3. var _cls = new flyFn(); //將Element的所有操作接口放在_cls中    
4. // dom is optional    
5. El.Flyweight = function(dom){    
6.     this.dom = dom;    
7. }; //僅包含一個dom屬性的Object    
8. El.Flyweight.prototype = _cls; //將操作接口複製給Element實例對象    
9. El.Flyweight.prototype.isFlyweight = true; //標誌該Element是flyweight對象    
10. El._flyweights = {}; //flyweight對象緩存容器    
11.   
12. El.fly = function(el, named){    
13.     named = named || '_global';    
14.     el = Ext.getDom(el); //取得dom對象    
15.     if(!el){    
16.         return null;    
17.     }    
18.     if(!El._flyweights[named]){    
19.         El._flyweights[named] = new El.Flyweight(); //僅在第一次調用Ext.fly時創建一個Flyweight對象並緩存    
20.     }    
21.     El._flyweights[named].dom = el; //將flyweight對象的dom屬性指向該el    
22.     return El._flyweights[named];    
23. };  

 從上面的代碼不難看出，僅在第一次調用Ext.fly時創建一個Flyweight對象（該對象包含了Element的所有操作接口）並將其緩存，

 

之後的所有fly操作都只是修改該flyweight對象的dom屬性，每次fly返回的結果都是共享的同一個flyweight對象。
這樣每次fly返回的Element相比Ext.get而言，減少了每次創建Element時對大量的操作接口的創建。所有fly的對象
都共享一套Element操作接口，內存佔用自然少了很多，而且執行速度也得到了提升。在大量的創建操作中效
果會更加明顯。

由於fly的操作原理，我們不能將fly的返回結果保存在變量中以便重用，因爲每次fly操作都將可能改變該變量的
dom指向。如下面的代碼就是不正確的：

 

Js代碼

1. var my_id = Ext.fly('my_id');       
2.   
3. Ext.fly('another_id'); //此時my_id的dom引用已經變爲another_id       
4.   
5. my_id.highlight('FF0000',{ //此處的操作將是對  another_id元素的操作          
6.     endColor:'0000FF', duration: 3       
7. });