Ext.get()與Ext.fly()之區(qū)別
從一開始接觸Ext就看到有Ext.fly這個(gè)函數(shù)，當(dāng)時(shí)覺得這個(gè)跟Ext.get沒什么區(qū)別，加之當(dāng)時(shí)對(duì)JS性能相關(guān)
問題認(rèn)識(shí)膚淺，也一直沒有在意其區(qū)別，今日看learning extjs一書，看到了有專門對(duì)Ext.fly特別強(qiáng)調(diào)的一處：
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出來的元素共享內(nèi)存，可以提高程序執(zhí)行速度，減少內(nèi)存占用。
這段話激起了我對(duì)這個(gè)函數(shù)的興趣，畢竟近段時(shí)間一直在搞JS性能優(yōu)化相關(guān)問題，對(duì)“內(nèi)存”這個(gè)字眼
非常敏感。大概看了下Ext源碼對(duì)get和fly實(shí)現(xiàn)的部分，然后在網(wǎng)上查看了一些資料，終于對(duì)他們之間的異同有
了個(gè)比較深入的認(rèn)識(shí)。
Ext的官方開發(fā)人員給出了如下的解釋：
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對(duì)Dom元素的一個(gè)強(qiáng)有力封裝，它封裝了很多方便對(duì)dom操作的接口(并通過Element的dom屬性
引用對(duì)應(yīng)的dom元素)，因此每創(chuàng)建一個(gè)Element元素都將消耗不少的內(nèi)存(主要是大量的操作接口消耗)，因此如
果創(chuàng)建過多的Element元素必然導(dǎo)致內(nèi)存占用的劇增和系統(tǒng)性能的下降。
Ext.get和Ext.fly返回的都是一個(gè)Element對(duì)象，但是Ext.get返回的是一個(gè)獨(dú)立的Element，擁有自己獨(dú)立的操作接口
封裝，可以將其返回值保存到變量中，以便以后調(diào)用操作等，這樣為重用帶來了方便。但是它的一個(gè)很大缺
點(diǎn)就是內(nèi)存消耗問題，假如調(diào)用Ext.get(id)1000次，則會(huì)在內(nèi)存中創(chuàng)建1000個(gè)獨(dú)立Element，其內(nèi)存占用可想而
知。但是很多時(shí)候我們可能僅僅只是對(duì)該dom元素執(zhí)行一次很簡(jiǎn)單的操作，如隱藏(hide)，這樣如果每次都創(chuàng)建
一個(gè)獨(dú)立Element放在內(nèi)存中，實(shí)在是對(duì)內(nèi)存的巨大浪費(fèi)，因此當(dāng)我們?cè)谥恍枰獔?zhí)行一次操作或者一個(gè)很簡(jiǎn)單
的操作時(shí)，采用Ext.get就顯得很不合理。Ext.fly正是為了解決這個(gè)問題而出現(xiàn)，它通過使每次創(chuàng)建的Element共
享內(nèi)存中的一套操作接口來達(dá)到節(jié)省內(nèi)存的效果。
下面來看Ext.fly的實(shí)現(xiàn)代碼(我簡(jiǎn)單加了一些注釋)：
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
}; //僅包含一個(gè)dom屬性的Object
9
10El.Flyweight.prototype = _cls; //將操作接口復(fù)制給Element實(shí)例對(duì)象
11El.Flyweight.prototype.isFlyweight = true; //標(biāo)志該Element是flyweight對(duì)象
12
13El._flyweights = {}; //flyweight對(duì)象緩存容器
14
15El.fly = function(el, named){
16 named = named || '_global';
17 el = Ext.getDom(el); //取得dom對(duì)象
18
if(!el){
19 return null;
20
}
21 if(!El._flyweights[named]){
22 El._flyweights[named] = new El.Flyweight(); //僅在第一次調(diào)用Ext.fly時(shí)創(chuàng)建一個(gè)Flyweight對(duì)象并緩存
23 }
24 El._flyweights[named].dom = el; //將flyweight對(duì)象的dom屬性指向該el
25 return El._flyweights[named];
26};
從上面的代碼不難看出，僅在第一次調(diào)用Ext.fly時(shí)創(chuàng)建一個(gè)Flyweight對(duì)象（該對(duì)象包含了Element的所有操作接口）并將其緩存，
之后的所有fly操作都只是修改該flyweight對(duì)象的dom屬性，每次fly返回的結(jié)果都是共享的同一個(gè)flyweight對(duì)象。
這樣每次fly返回的Element相比Ext.get而言，減少了每次創(chuàng)建Element時(shí)對(duì)大量的操作接口的創(chuàng)建。所有fly的對(duì)象
都共享一套Element操作接口，內(nèi)存占用自然少了很多，而且執(zhí)行速度也得到了提升。在大量的創(chuàng)建操作中效
果會(huì)更加明顯。
由于fly的操作原理，我們不能將fly的返回結(jié)果保存在變量中以便重用，因?yàn)槊看蝔ly操作都將可能改變?cè)撟兞康?br />
dom指向。如下面的代碼就是不正確的：
1var my_id = Ext.fly('my_id');
2Ext.fly('another_id'); //此時(shí)my_id的dom引用已經(jīng)變?yōu)閍nother_id
3my_id.highlight('FF0000',{ //此處的操作將是對(duì) another_id元素的操作
4 endColor:'0000FF', duration: 3
5});
在以后使用中，一定要合理的利用Ext.get和Ext.fly，避免濫用Ext.get這個(gè)“重量級(jí)”的方法。
轉(zhuǎn)自：http://www.ajaxbbs.net/post/extjs/Ext-fly-and-Ext-get.html