透视Ext JS 4类背后的机制与特点(上)
2011-12-30 16:41
204 查看
Ext JS 4 的类机制大概如何,主要围绕传统OO模型而设计,弥补了Prototype OO不足。虽然性质上仍为模拟的手段,但包含了比较完整的OO特征。Ext JS 4(连同 Ext Core)提供的新功能有:
继承方面Ext.defined代替了原来Ext.extend的写法。
自动计算依赖关系及动态类加载。
多态
静态成员
为配置项自动生成的getter/setter方法
如果还是感觉理解得不够透彻,一点的建议就是花多点时间浏览一下资料,还有在线的例子 。今天我们将会更深入到类机制其背后的原理去看看。
大体从外观来说,新的类机制会是这样子的:
view plain
Ext.define('Ext.Window', {
extend: 'Ext.Panel',
requires: 'Ext.Tool',
mixins: {
draggable: 'Ext.util.Draggable'
},
config: {
title: "Window Title"
}
});
以上演示的是Ext.Window类的简化版本,Windows的写法就是这样子了。首先要设置Windows为Panel的子类(extend),并依赖于Ext.Tool类(requires),然后混入(mixns)Ext.util.Draggable。嗯,过程大致这样。下面我们要展开分析,并穿插几个新的概念。其一、“extend”的声明就如你所料的,告诉ExtWindows应该是Panel对象的子类。extend不是新的概念,跟过去我们比较熟悉的Ext.extend()无二,这里就不展开复述了。其二、“requires”告诉Ext在Window类出现之前应该要准备那些类。该类依赖的类就是Ext.Tool。如不出现则Windows无法工作。其三、“mixins”就是Ext
OO多态的应用了,下一节会讲。最后部分,也会讲到config配置项及其用法。
旧版Ext中,调用父类必须完全写出父类的地址,如Ext.Panel.superclass.initComponent.call(this);不仅冗长,且难记忆,加上连串访问hash的操作起来也消耗性能不少。于是新版中作了简化,支持通过this.parent()即可返回父类对象。当然旧的方式在代码可读性、直观性上却颇为可取,而且还可以做到跨越一层父类的直接访问(尽管用得比较少)。
另外关于扩展功能的两点:
require项的功能与Ext.require()功能一致。当前Ext.require只能获取JS文件,若拓展至其它类型的文件(如css/tpl资源),可能要观察新版本的改进。
Ext.define/Ext.require支持送入一个回调函数。那么回调函数会传入什么的参数呢?当前Ext.require()的回调函数没有参数传入,不过Ext.define()就有一个,参数是刚创建的类,且回调函数的作用域也是创建好的类。
多态是Ext JS 4前所未有过的概念。简单讲,所谓多态就是几个函数或属性合并到一个类之中去。例如在上面的例子,Ext.util.Draggable作为多态的类混入到Ext.Window,那么,Ext.Window就拥有了本来在Draggable的“startDragging”方法。结果是,任何一个窗体实例都有startDragging()可执行。
相比较传统的单根继承,多态灵活很多。多态实质是多继承的概念。Ext.Windows是一个可拖动的组件,如同Sliders、Grid头部等等都是可拖动的组件。在不同的组件中都可能使用到“拖动”的功能,如果把它做成一个单独被继承的类就显得不太方便和合理,因为不同的组件极可能不是继承于同一个父类。硬是弄在一起也很麻烦。所以创建一个Draggable的接口来解决此类问题是很有必要的,而且使用多态也是相当优雅的写法。
多态的类是否有构造器以供创建实例时候调用?当前没有,但是你可以透过“主类”的构造器调用mixin即多态类的构造器,这样也行。官方打算在后面的版本中提供一个autoInstantiateMixin的参数是否调用多态类的构造器。
转自:http://blog.csdn.net/zhangxin09/article/details/617408
继承方面Ext.defined代替了原来Ext.extend的写法。
自动计算依赖关系及动态类加载。
多态
静态成员
为配置项自动生成的getter/setter方法
如果还是感觉理解得不够透彻,一点的建议就是花多点时间浏览一下资料,还有在线的例子 。今天我们将会更深入到类机制其背后的原理去看看。
继承
大体从外观来说,新的类机制会是这样子的:view plain
Ext.define('Ext.Window', {
extend: 'Ext.Panel',
requires: 'Ext.Tool',
mixins: {
draggable: 'Ext.util.Draggable'
},
config: {
title: "Window Title"
}
});
以上演示的是Ext.Window类的简化版本,Windows的写法就是这样子了。首先要设置Windows为Panel的子类(extend),并依赖于Ext.Tool类(requires),然后混入(mixns)Ext.util.Draggable。嗯,过程大致这样。下面我们要展开分析,并穿插几个新的概念。其一、“extend”的声明就如你所料的,告诉ExtWindows应该是Panel对象的子类。extend不是新的概念,跟过去我们比较熟悉的Ext.extend()无二,这里就不展开复述了。其二、“requires”告诉Ext在Window类出现之前应该要准备那些类。该类依赖的类就是Ext.Tool。如不出现则Windows无法工作。其三、“mixins”就是Ext
OO多态的应用了,下一节会讲。最后部分,也会讲到config配置项及其用法。
旧版Ext中,调用父类必须完全写出父类的地址,如Ext.Panel.superclass.initComponent.call(this);不仅冗长,且难记忆,加上连串访问hash的操作起来也消耗性能不少。于是新版中作了简化,支持通过this.parent()即可返回父类对象。当然旧的方式在代码可读性、直观性上却颇为可取,而且还可以做到跨越一层父类的直接访问(尽管用得比较少)。
另外关于扩展功能的两点:
require项的功能与Ext.require()功能一致。当前Ext.require只能获取JS文件,若拓展至其它类型的文件(如css/tpl资源),可能要观察新版本的改进。
Ext.define/Ext.require支持送入一个回调函数。那么回调函数会传入什么的参数呢?当前Ext.require()的回调函数没有参数传入,不过Ext.define()就有一个,参数是刚创建的类,且回调函数的作用域也是创建好的类。
多态 mixins
多态是Ext JS 4前所未有过的概念。简单讲,所谓多态就是几个函数或属性合并到一个类之中去。例如在上面的例子,Ext.util.Draggable作为多态的类混入到Ext.Window,那么,Ext.Window就拥有了本来在Draggable的“startDragging”方法。结果是,任何一个窗体实例都有startDragging()可执行。view plain
var win = Ext.create( 'Ext.Window' );
win.startDragging(); // "开始拖动"
相比较传统的单根继承,多态灵活很多。多态实质是多继承的概念。Ext.Windows是一个可拖动的组件,如同Sliders、Grid头部等等都是可拖动的组件。在不同的组件中都可能使用到“拖动”的功能,如果把它做成一个单独被继承的类就显得不太方便和合理,因为不同的组件极可能不是继承于同一个父类。硬是弄在一起也很麻烦。所以创建一个Draggable的接口来解决此类问题是很有必要的,而且使用多态也是相当优雅的写法。
多态的类是否有构造器以供创建实例时候调用?当前没有,但是你可以透过“主类”的构造器调用mixin即多态类的构造器,这样也行。官方打算在后面的版本中提供一个autoInstantiateMixin的参数是否调用多态类的构造器。
转自:http://blog.csdn.net/zhangxin09/article/details/617408
相关文章推荐
- 透视Ext JS 4类背后的机制与特点(中)
- 透视Ext JS 4类背后的机制与特点(下)
- 透视Ext JS 4类背后的机制与特点(上)
- 透视Ext JS 4类背后的机制与特点(中)
- 透视Ext JS 4类背后的机制与特点(下)
- [转]Struts2数据传输的背后机制:ValueStack(值栈)
- Docker资源管理探秘:Docker背后的内核Cgroups机制
- PHP特点之垃圾回收机制1——引用计数的基本知识
- Struts2数据传输的背后机制:ValueStack(值栈)(转载)
- 【Unity Shader】剖析Unity Surface Shader背后机制(一)
- Struts2数据传输的背后机制:ValueStack(值栈)
- 关于计算机中Endian(big-edian和little-endian)存储机制的由来、特点和区别
- 软件开发基础 2016.3.1 Java的特点 、运行机制 、JDK环境的配置
- Struts2数据传输的背后机制:ValueStack(2)
- c语言背后的运行机制
- Struts2数据传输的背后机制:ValueStack(值栈)(转载)
- Javascript对象复制引用机制及$.extend复制特点
- PHP特点之垃圾回收机制2——回收周期
- equals与==背后的装箱拆箱机制
- Struts2数据传输的背后机制:ValueStack(值栈)