ext fly get 区别 get、getDom、getCmp、getBody、getDoc

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

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

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中包含了几个以get开头的方法，这些方法可以用来得到文档中DOM、得到当前文档中的组件、得到Ext元素等，在使用中要注意区别使用。
1、get方法
get方法用来得到一个Ext元素，也就是类型为Ext.Element的对象，Ext.Element类是Ext对DOM的封装，代表DOM的元素，可以为每一个DOM创建一个对应的Element对象，可以通过Element 对象上的方法来实现对DOM指定的操作，比如用hide方法可以隐藏元素、initDD方法可以让指定的DOM具有拖放特性等。get方法其实是 Ext.Element.get的简写形式。
get方法中只有一个参数，这个参数是混合参数，可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。看下面的示例代码：

Ext.onReady(function(){
var e=new Ext.Element("hello");
alert(Ext.get("hello"));
alert(Ext.get(document.getElementById("hello")));
alert(Ext.get(e));
});
Html页面中包含一个id为hello的div，代码如下：
<div id="hello">tttt</div>

Ext.get("hello")、Ext.get(document.getElementById("hello"))、Ext.get(e)等三个方法都可以得到一个与DOM节点hello对应的Ext元素。
2、getCmp方法－获得Ext组件。
getCmp方法用来获得一个Ext组件，也就是一个已经在页面中初始化了的Component或其子类的对象，getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。getCmp方法中只有一个参数，也就是组件的id。比如下面的代码：

Ext.onReady(function(){
var h=new Ext.Panel({
id:"h2",
title:"　",
renderTo:"hello",
width:300,
height:200});
Ext.getCmp("h2").setTitle("新的标题");
});

在代码中，我们使用Ext.getCmp("h2").来得到id为h2的组件，并调用其setTitle方法来设置该面板的标题。
3、getDom方法－获得DOM节点
getDom方法能够得到文档中的DOM节点，该方法中包含一个参数，该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。比如下面的代码：

Ext.onReady(function(){
var e=new Ext.Element("hello");
Ext.getDom("hello");
Ext.getDom(e);
Ext.getDom(e.dom);
});
Html：
<div id="hello">tttt</div>

在上面的代码中，Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。
4、getBody方法－得到文档的body节点元素(Element)。
该方法直接得到文档中与document.body这个DOM节点对应的ExtJS元素（Element），实质就是把document.body对象封装成ExtJS元素对象返回，该方法不带任何参数。比如下面的代码把面板h直接渲染到文档的body元素中。

Ext.onReady(function(){
var h=new Ext.Panel({title:"测试",width:300,height:200});
h.render(Ext.getBody());
});

5、getDoc方法－获得与document对应的Ext元素(Element)
getDoc方法实质上就是把当前html文档对象，也就是把document对象封装成ExtJS的Element对象返回，该方法不带任何参数。