JavaScript自己并没有类,所以一些新手开发者来的这儿就感觉环境很不熟悉。但是通过语言其自身强大的原型机制(prototype pattern) ,Ext JS实现一套成熟丰满的类机制系统,务求可以进一步照顾我们的开发者,能够以他们熟悉的面向对象方法论(Object Oriented approach)写代码!
一般来讲,这样子定义一个类是没有问题的。但是如果遇到Ext.Windows父类未曾定义的话就创建新子类,岂不会出现错误?的确,同样如果我们没定义过命名空间的话也是会出现错误的。在新的方式中,便解决了以上两个问题:
Ext JS 4的类名可以以字符串的形式写出,这样就保证不会上面的错误了。类管理器(Class Manager)会聪明地看出Ext.Windows是否已定义,如果还没有,就等待定义好了Windows才创建MyApp.LoginWindow这个类,也就是说内部会有”延时创建“的这么一个过程。我们在程序中不再需要严格按照加载的顺序,框架帮我们都处理好了。
多态 Mixins
行文至此才刚开始,Ext JS的类还有许多的功能留待你发现。其中首推介绍的是这个框架的“多态(Mixins)”能力。从多态的定义讲,是为了复用将多个动作和配置参数组合一起,再”混入(Mixed)“到某个类之中。要在您创建的类里面实现这种能力,只要引入多态的类到到您的类即可。例如,要使的你的类可拖动,混入Draggable Mixin类吧。不限定混入类的数量,也就是说,这是一种多重继承的实现方案,能较好地解决JavaScript多态的难题。可这样定义多态的类:
跟类定义的类似,引用类名称的都是字符串,故所以哪怕页面没加载的类也不会报错的。一个类允许加入多个混入,多态的那个类写法如下:
配置项自动的读写器 Auto Setters and Getters for Configurations
通过送入多种配置项,就可以客制化Ext JS类。然后透过getter和setter的方法也可以读取、修改这些配置项参数,运行时的时候也可以作修改。整个库之中会大量出现这种需求,怎么去维护好便是一个问题。Ext JS 4针对配置项参数的读、写、默认值、实时应用等这些具体的问题,提出了自动getter和setter的方案,务求凸显方便性,加速您的开发进程!我们看看例子:
这里我们设置的类只有一个单独的配置项参数title,分配了titile的默认值“Default Title”。在Ext JS 4的类机制下自动分配getter/setter的方法。而在旧的3.3版本中,要达到等价的方法,我们必须僵硬地写出那些手工代码:
框架会自动生成上面的四个函数。在许多情况中,更新变量(属性)尚足够了,可是我们想通过特定的方式改变某个配置项,这样会比较好。例如新类中有标题需要在DOM元素中显示,我们可以告知DOM更新,便是这样子:
类机制会自动生成上面四个函数,并且我们可以如上例的applyTitle方法来炮制方法的重写(override)。好处是不但能够节约您写代码时间上细微的花销,还能节约您程序的体积大小,换言之能让你的程序更快地被下载到客户端上。
我们为Ext JS 4注入更多的新功能,期待让你们的开发更轻松亦更灵活。Ext 4将会有引入四大新功能——类机制、多态Mixin、配置项的读写器Setter/Getter和动态加载。
上面的插图形象地介绍了类的系统,比较关注的是Draggable和Resizable变为Mixin形式了。
类的定义 Class Definition
为显示不同,我们拿Ext JS 3 创建类的方式来作比较。这是一个登陆功能的窗口,以Ext.Windows为基类来扩展:
view plaincopy to clipboardprint?
// Ext JS 3.x 类的定义
MyApp.LoginWindow = Ext.extend(Ext.Window, {
title: 'Log in',
initComponent: function() {
Ext.apply(this, {
items: [
{
xtype: 'textfield',
name : 'username',
fieldLabel: 'Username'
},
...
]
});
MyApp.LoginWindow.superclass.initComponent.apply(this, arguments);
}
});
一般来讲,这样子定义一个类是没有问题的。但是如果遇到Ext.Windows父类未曾定义的话就创建新子类,岂不会出现错误?的确,同样如果我们没定义过命名空间的话也是会出现错误的。在新的方式中,便解决了以上两个问题:
view plaincopy to clipboardprint?
// Ext JS 4.x 类的定义方式
Ext.define('MyApp.LoginWindow', {
extend: 'Ext.Window',
title: 'Log in',
initComponent: function() {
Ext.apply(this, {
items: [
// 如上
]
});
MyApp.LoginWindow.superclass.initComponent.apply(this, arguments);
}
});
Ext JS 4的类名可以以字符串的形式写出,这样就保证不会上面的错误了。类管理器(Class Manager)会聪明地看出Ext.Windows是否已定义,如果还没有,就等待定义好了Windows才创建MyApp.LoginWindow这个类,也就是说内部会有”延时创建“的这么一个过程。我们在程序中不再需要严格按照加载的顺序,框架帮我们都处理好了。
多态 Mixins
行文至此才刚开始,Ext JS的类还有许多的功能留待你发现。其中首推介绍的是这个框架的“多态(Mixins)”能力。从多态的定义讲,是为了复用将多个动作和配置参数组合一起,再”混入(Mixed)“到某个类之中。要在您创建的类里面实现这种能力,只要引入多态的类到到您的类即可。例如,要使的你的类可拖动,混入Draggable Mixin类吧。不限定混入类的数量,也就是说,这是一种多重继承的实现方案,能较好地解决JavaScript多态的难题。可这样定义多态的类:
view plaincopy to clipboardprint?
Ext.define('Sample.Musician', {
extend: 'Sample.Person',
mixins: {
guitar: 'Sample.ability.CanPlayGuitar',
compose: 'Sample.ability.CanComposeSongs',
sing: 'Sample.ability.CanSing'
}
});
跟类定义的类似,引用类名称的都是字符串,故所以哪怕页面没加载的类也不会报错的。一个类允许加入多个混入,多态的那个类写法如下:
view plaincopy to clipboardprint?
Ext.define('Sample.ability.CanPlayGuitar', {
playGuitar: function() {
// code to play
}
});
配置项自动的读写器 Auto Setters and Getters for Configurations
通过送入多种配置项,就可以客制化Ext JS类。然后透过getter和setter的方法也可以读取、修改这些配置项参数,运行时的时候也可以作修改。整个库之中会大量出现这种需求,怎么去维护好便是一个问题。Ext JS 4针对配置项参数的读、写、默认值、实时应用等这些具体的问题,提出了自动getter和setter的方案,务求凸显方便性,加速您的开发进程!我们看看例子:
view plaincopy to clipboardprint?
Ext.define('MyClass', {
config: {
title: 'Default Title'
}
});
这里我们设置的类只有一个单独的配置项参数title,分配了titile的默认值“Default Title”。在Ext JS 4的类机制下自动分配getter/setter的方法。而在旧的3.3版本中,要达到等价的方法,我们必须僵硬地写出那些手工代码:
view plaincopy to clipboardprint?
MyClass = Ext.extend(MyBaseClass, {
title: 'Default Title',
getTitle: function() {
return this.title;
},
resetTitle: function() {
this.setTitle('Default Title');
},
setTitle: function(newTitle) {
this.title = this.applyTitle(newTitle) || newTitle;
},
applyTitle: function(newTitle) {
// 这儿自定义代码
}
});
框架会自动生成上面的四个函数。在许多情况中,更新变量(属性)尚足够了,可是我们想通过特定的方式改变某个配置项,这样会比较好。例如新类中有标题需要在DOM元素中显示,我们可以告知DOM更新,便是这样子:
view plaincopy to clipboardprint?
Ext.define('MyClass', {
extend: 'MyBaseClass',
config: {
title: 'Default Title'
},
applyTitle: function(newTitle) {
Ext.get('titleEl').update(newTitle);
}
});
类机制会自动生成上面四个函数,并且我们可以如上例的applyTitle方法来炮制方法的重写(override)。好处是不但能够节约您写代码时间上细微的花销,还能节约您程序的体积大小,换言之能让你的程序更快地被下载到客户端上。