Ext.get()與Ext.fly()之區別
從一開始接觸Ext就看到有Ext.fly這個函數，當時覺得這個跟Ext.get沒什么區別，加之當時對JS性能相關
問題認識膚淺，也一直沒有在意其區別，今日看learning extjs一書，看到了有專門對Ext.fly特別強調的一處：
This isn't exactly a speed tip, but is more about conserving memory by using something called
a "flyweight" to perform simple tasks, which results in higher speed by not clogging up the
browser's memory
大概意思也就是Ext.Fly采用flyweight模式使所有fly出來的元素共享內存，可以提高程序執行速度，減少內存占用。
這段話激起了我對這個函數的興趣，畢竟近段時間一直在搞JS性能優化相關問題，對“內存”這個字眼
非常敏感。大概看了下Ext源碼對get和fly實現的部分，然后在網上查看了一些資料，終于對他們之間的異同有
了個比較深入的認識。
Ext的官方開發人員給出了如下的解釋：
Ext.Element wraps a lot of functionality around DOM element/node, for example functions like hide, show,
all animation stuff, dimensions getting and setting function and a lot more.
Ext.Element keeps reference to DOM element it is wrapped around in dom property. Once you have an Ext.Element
(e.g. you call Ext.get('some-d') it is an instance of Element class and you can work with it as such.
Now, imagine that you need to hide 1000 DOM nodes, you call 1000 times Ext.get('some-one-of-
1000-id').hide() so you create 1000 instances of Element just to call one function: hide.
Ext.fly is one instance of Ext.Element with "replaceable" DOM node it is wrapped around.
If you call 1000 times Ext.fly('some-one-of-1000-id').hide() you 1000 times replace dom property of one instance of Ext.Element.
Result: higher performance, lower memory usage.
You only need to keep in mind that you cannot keep Element returned by Ext.fly for later use as
it's dom will sooner or later gets replaced by another one.
這段話中，大致的意思如下：
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的實現代碼(我簡單加了一些注釋)：
1
var flyFn = function()
{};
2
flyFn.prototype = El.prototype;
3var _cls = new flyFn(); //將Element的所有操作接口放在_cls中
4
5// dom is optional
6El.Flyweight = function(dom){
7
this.dom = dom;
8
}; //僅包含一個dom屬性的Object
9
10El.Flyweight.prototype = _cls; //將操作接口復制給Element實例對象
11El.Flyweight.prototype.isFlyweight = true; //標志該Element是flyweight對象
12
13El._flyweights = {}; //flyweight對象緩存容器
14
15El.fly = function(el, named){
16 named = named || '_global';
17 el = Ext.getDom(el); //取得dom對象
18
if(!el){
19 return null;
20
}
21 if(!El._flyweights[named]){
22 El._flyweights[named] = new El.Flyweight(); //僅在第一次調用Ext.fly時創建一個Flyweight對象并緩存
23 }
24 El._flyweights[named].dom = el; //將flyweight對象的dom屬性指向該el
25 return El._flyweights[named];
26};
從上面的代碼不難看出，僅在第一次調用Ext.fly時創建一個Flyweight對象（該對象包含了Element的所有操作接口）并將其緩存，
之后的所有fly操作都只是修改該flyweight對象的dom屬性，每次fly返回的結果都是共享的同一個flyweight對象。
這樣每次fly返回的Element相比Ext.get而言，減少了每次創建Element時對大量的操作接口的創建。所有fly的對象
都共享一套Element操作接口，內存占用自然少了很多，而且執行速度也得到了提升。在大量的創建操作中效
果會更加明顯。
由于fly的操作原理，我們不能將fly的返回結果保存在變量中以便重用，因為每次fly操作都將可能改變該變量的
dom指向。如下面的代碼就是不正確的：
1var my_id = Ext.fly('my_id');
2Ext.fly('another_id'); //此時my_id的dom引用已經變為another_id
3my_id.highlight('FF0000',{ //此處的操作將是對 another_id元素的操作
4 endColor:'0000FF', duration: 3
5});
在以后使用中，一定要合理的利用Ext.get和Ext.fly，避免濫用Ext.get這個“重量級”的方法。
轉自：http://www.ajaxbbs.net/post/extjs/Ext-fly-and-Ext-get.html