Sencha Touch 2 类系统 The Class System(上)
Sencha Touch 2 采用跟EXT4.x一样的类系统(The Class System),类系统提供了继承,依赖加载,mixin,配置选项等,这使JavaScript很好地实现面向对象的思想。
1、定义类
Ext.define('Car', { alias: ['widget.car'],
config: { speed: null
}, constructor: function(config) { this.initConfig(config); }, run: function() { alert(this.getSpeed()); } });
Sencha Touch定义类用Ext.define方法;alias是定义类的别名,可以看到是数组类型,所以可以定义多个别名;config用于配置类的属性、方法等成员;constructor很显然是构造方法,“this”代表当前实例,initConfig方法就是初始化config里的配置,只有调用initConig方法才能在其它方法调用config定义的成员;run就是类的成员方法,可能没有接触过Sencha Touch 2和Ext4.x的朋友会疑惑:getSpeed方法在哪里定义呢?在Sencha Touch 2和Ext4.x的config的属性配置框架会自动生成相应getter方法,相对于name就生成getSpeed,同时还会生成setter和applier方法,下面会详细介绍。
2、实例化
var baoma = Ext.create('Car', { speed: '100m/h'
}); baoma.run();
var bens= Ext.widget('car', {
speed: '120m/h'
});
bens.run();
第一种实例化是用Ext.create方法,第一个参数是类名,必须是要全称,第二个参数是类的配置选项,当然必须要定义类时,构造方法的带参数,如果没带对数,这简单的道理相信都明白,而且在构造方法里调用initConig方法,上面已经有提到过。这里还要说一下如果在定义类的时候把name属性放在config外面,就算在实例化是传入name的值,也不会修改本身类speed的值,框架也不会自动生成getSpeed,setSpeed,applySpeed方法,放在config的属性等成员就相对于C#里加了public关键字的成员,放在config外面的成员相对于C#里加了protected关键字的成员。
第二种实例化是用Ext.widget方法,第一个参数必须是类的别名。
3、继承
Ext.define('Taxi', { extend: 'Car', run: function() { alert('The speed is ' + this.getSpeed()); } });
extend是类继承的关键字,如果要重写类成员,直接重新定义过就可以,比如上面的run方法。
4、框架自动为每个配置项添加了以下方法:
1)一个getter方法 - 如getSpeed就是返回speed的当前值。
2)一个setter方法 - 如getSpeed就是为speed设置一个新值。
3)一个applier方法 - 如applySpeed,当该配置改变时就会被自动调用。
Ext.define('Taxi', { extend: 'Car', applySpeed: function(newSpeed, oldSpeed) { return confirm('Are you sure you want to change speed to ' + newSpeed + '?')? newSpeed: oldSpeed; } })
var bens= Ext.create('Taxi', { speed: '120m/h' }); bob.setSpeed('200m/h'); //自动调用applySpeed方法,弹出confirm,选择no bob.run(); //仍然弹出显'200m/h'
getter和setter很明显就是获取值和赋值的方法,这里就不多说了;重点说一下applier方法,就拿applySpeed为例,当speed的值修改时,就会调用applySpeed方法,框架自动生成的applySpeed方法只是简单的返回修改后的值,所以你可以在定义类时重写applySpeed方法,加入相应的操作和返回自己处理过的值。