Ext.get()與Ext.fly()的區別

Ext.get()與Ext.fly()的區別

從一開始接觸Ext就看到有Ext.fly這個函數，當時覺得這個跟Ext.get沒什麼區別，加之當時對JS效能相關問題認識膚淺，也一直沒有在意其區別，在learning extjs中，看到了有專門對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-id') 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的實現代碼(我簡單加了一些注釋)：

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指向。如下面的代碼就是不正確的：

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 });

在以後使用中，一定要合理的利用Ext.get和Ext.fly，避免濫用Ext.get這個“重量級”的方法。

來源：一起Ext
原文地址：http://cms.17ext.com/html/Ext_Form/2009/0420/ext-get-and-ext-fly.html