本文主要是介绍Ext.fly 和Ext.get 区别,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
仅在第一次调用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元素的操作<br/> endColor:'0000FF', duration: 3<br/> });
在以后使用中,一定要合理的利用Ext.get和Ext.fly,避免滥用Ext.get这个“重量级”的方法。
Ext.get
Ext.get()可接收这几种类型的参数,如HTMLElement,Ext.Element、字符型,
返回的新实例。以下三种类型如下例:
var el1 = Ext.get('elId'); // 接收元素id
var el2 = Ext.get(el1); // 接受Ext.Element
var el3 = Ext.get(el1.dom); //接受HTMLElement
Ext.fly
Ext.fly在参数方面与Ext.get的完全相同,但其内置控制返回Ext.Element
的方法就完全不同,Ext.fly从不保存享元对象的引用,每次调用方法都返回
独立的享元对象。其实区别在于“缓存”中,因为缓存的缘故,Ext.get需要
为每个元素保存其引用,就形成了缓存,如果有相同的调用就返回,但
Ext.fly没有所谓的缓存机制,得到什么就返回什么,不是多次使用的情况下
“一次性地”使用该元素就应该使用Ext.fly(例如执行单项的任务)。
使用Ext.fly的例子:
// 引用该元素一次即可,搞掂了就完工
Ext.fly('elId').hide();
//-------------------------------------------------------------------------------------------
-
Ext.fly方法使用Ext.js 4中的flyweight技术,该技术在浏览器中为使用Ext.fly方法的元素节点开辟一块内存,下一次使用Ext.fly方法的元素节点将占据相同地址的内存,即覆盖前一次使用Ext.fly方法的元素节点。因为这些元素节点在浏览器中共享一块内存,所以可以提高一部分应用程序在使用时的性能。
继续修改代码清单2-2,以查看Ext.get方法与Ext.fly方法之间的区别。修改后的代码如下(每行开头数字表示行号):
1 launch: function() {
2 var panel = Ext.create('Ext.Panel', {
3 id:'myPanel',
4 html: '一个简单的示例面板'
5 });
6 var subPanel = Ext.create('Ext.Panel', {
7 id:'subPanel',
8 html: '面板中的子面板'
9 });
10 Ext.Viewport.add(panel);
11 panel.add(subPanel);
12 var newPanel=Ext.get('myPanel');
13 Ext.fly('subPanel');
14 newPanel.addCls('colorRed');
15 }请注意,第12行使用Ext.get方法获取父面板生成的div元素,第13行使用Ext.fly方法将子面板元素的节点存入浏览器的共享内存中,第14行为父面板元素添加使用colorRed样式类,所以父面板及其子面板中的文字颜色均变为红色,如图2-3所示。
现在将第12行代码修改为如下代码,即将Ext.get方法修改为使用Ext.fly方法:
var newPanel=Ext.fly('myPanel');
经过修改后,newPanel变量的地址指针变为指向浏览器中的共享内存,所以虽然在第12行中newPanel变量引用父面板所生成的元素节点,但是在第13行中由于对子面板使用Ext.fly方法,所以浏览器的共享内存中保存子面板所生成的元素节点,即newPanel变量引用子面板所生成的元素节点,所以在第14行中对newPanel变量所引用的元素节点添加使用colorRed样式类后,只有子面板中的文字颜色变为红色,如图2-4所示。
最后要说明的是,应该针对在代码中只引用一次、之后不再引用的元素使用Ext.fly方法,即将以上代码书写成如下形式:
var newPanel=Ext.fly('myPanel');
newPanel.addCls('colorRed');
//应用程序中这段代码之后不再引用id为myPanel的元素
var newPanel=Ext.fly('subPanel');
newPanel.addCls('colorBlue');
//应用程序中这段代码之后不再引用id为subPanel的元素如果程序中需要多次引用某个元素,应该为该元素使用Ext.get方法,这样可以避免浏览器共享内存的频繁使用(避免一些意想不到的Bug),同时也可以让该元素使用Ext.dom.Element对象所享有的浏览器中的缓存。
这篇关于Ext.fly 和Ext.get 区别的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!