EXTJS4新特性之全新的类系统及动态加载
2015-06-29 13:59
796 查看
在这片文章中,我们主要看一下EXTJS4中对类的一些方面的改进,比如说类的定义等等。以及在这些改进中,比起之前版本的一些使用上的好处。或者说改进了之前的一些缺陷。首先我们来认识一下,EXTJS4中在类的使用上做了什么改进。
(一)全新的类系统
1、EXTJS4中所有的类都可以使用字符串引用。例如我们来看一下,EXTJS3.X中和EXTJS4中定义的区别。
//Extjs3.x中定义类的方法
myApp.myClass=Ext.extend(Ext.Window,{
initComponent:function(){
//code;
myApp.myClass.superclass.initComponent.apply(this,arguments);
}
});
在上述的代码中,我们可以看到,这是我们在使用Extjs3.x中最常用的定义类的方法。在正常使用的情况下,这样的定义方式,是没有什么问题的。但是,在特殊的情况下,这样的定义方式,还存在一定的缺陷。比如说,我们myApp的包名没有定义。这个时候,我们在使用时就会出现错误,比如说,我们的Ext.Window类还没有导入到系统中,这样也会出现错误,这样就会导致我们的类创建不成功。当时,在我们Extjs4中,全新的定义类的方式,都可以避免上边的一些错误,下边我们来看一下EXTJS4中的类的定义方式:
//EXTJS4中定义类的方式
Ext.define("myApp.myClass",{
extend:"Ext.Window",
initComponent:function(){
//code;
myApp.myClass.superclass.initComponent.apply(this,arguments);
}
});
Extjs4中所有的类的引用都可以用字符串。这样,当我们在引用一个类时,EXTJS首先根据字符串去匹配相应的类,匹配到相应的类后,再去执行下一步操作。这样就会避免,因为导入顺序或者未定义包名。而出现的错误问题。
2、在EXTJS4中,为了使类的扩展更为灵活,在4中还增加了mixins(混入)的功能。比如说,我们类(People),(CanWriteJava),(CanWriteC#),(CanWriteC++)。我们有一个学生类(Student)继承自(People),该学生同时会使用java、.net、c++等语言。这个时候,我们就需要使用到mixins(混入)的特性。代码如下:
//People类的定义
Ext.define("People",{});
//CanWriteJava类的定义
Ext.define("CanWriteJava",{
codeJava:function(){
//code;
}
});
//CanWriteC#类的定义
Ext.define("CanWriteC#",{
codeC#:function(){
//code;
}
});
//CanWriteC++类的定义
Ext.define("CanWriteC++",{
codeC++:function(){
//code;
}
});
//Student类的定义
Ext.define("Student",{
extend:"People",
mixins:{
java:"CanWriteJava",
net:"CanWriteC#",
c:"CanWriteC++"
}
});
经过上述的定义,Student中就可以使用(CanWriteJava、CanWriteC#、CanWriteC++)中的特性了。例如:
var student=new Student();student.codeJava();
3、在Extjs4中,当我们定义类中的属性时。Extjs会自动为我们创建其属性的getter和setter方法。而不用我们手动编写getter和setter方法。代码如下:
Ext.define("myClass",{
config:{
name:"",
address:"",
telephone:""
}
});
var cls=new myClass();
cls.setName("zhangsan");//extjs自动创建的setName方法
cls.getName();//extjs自动创建的getName方法
(二)动态加载
EXTJS4中为我们增加了另一个新的特性就是动态加载,我们可以使用动态加载,在我们需要时,才导入,这样大大节省了很多资源。比如说,我们想使用Window这个类,但是。我们又不确保,这个类当前是否已经引用到该系统中,我们就可以使用如下写法:
Ext.require("Ext.Window",function(){
//导入成功后,执行该方法体
});
如果,我们想导入我们自己定义的类,动态引用自己编写的js文件,我们需要经过如下步骤:
1、
//开启动态加载阀值
Ext.Loader.setConfig({
enabled: true
});
2、
//设置动态加载js的路径
Ext.Loader.setPath("test", "JS/test");
3、
//导入类文件
Ext.require(["test.window.mywindow","test.login.mylogin"]);
4、
//使用导入的类文件
new test.window.mywindow().show();
以下是工程中的文件目录图:
红色区域为自定义的js目录结构,注意与第三个步骤的名称想匹配。
(一)全新的类系统
1、EXTJS4中所有的类都可以使用字符串引用。例如我们来看一下,EXTJS3.X中和EXTJS4中定义的区别。
//Extjs3.x中定义类的方法
myApp.myClass=Ext.extend(Ext.Window,{
initComponent:function(){
//code;
myApp.myClass.superclass.initComponent.apply(this,arguments);
}
});
在上述的代码中,我们可以看到,这是我们在使用Extjs3.x中最常用的定义类的方法。在正常使用的情况下,这样的定义方式,是没有什么问题的。但是,在特殊的情况下,这样的定义方式,还存在一定的缺陷。比如说,我们myApp的包名没有定义。这个时候,我们在使用时就会出现错误,比如说,我们的Ext.Window类还没有导入到系统中,这样也会出现错误,这样就会导致我们的类创建不成功。当时,在我们Extjs4中,全新的定义类的方式,都可以避免上边的一些错误,下边我们来看一下EXTJS4中的类的定义方式:
//EXTJS4中定义类的方式
Ext.define("myApp.myClass",{
extend:"Ext.Window",
initComponent:function(){
//code;
myApp.myClass.superclass.initComponent.apply(this,arguments);
}
});
Extjs4中所有的类的引用都可以用字符串。这样,当我们在引用一个类时,EXTJS首先根据字符串去匹配相应的类,匹配到相应的类后,再去执行下一步操作。这样就会避免,因为导入顺序或者未定义包名。而出现的错误问题。
2、在EXTJS4中,为了使类的扩展更为灵活,在4中还增加了mixins(混入)的功能。比如说,我们类(People),(CanWriteJava),(CanWriteC#),(CanWriteC++)。我们有一个学生类(Student)继承自(People),该学生同时会使用java、.net、c++等语言。这个时候,我们就需要使用到mixins(混入)的特性。代码如下:
//People类的定义
Ext.define("People",{});
//CanWriteJava类的定义
Ext.define("CanWriteJava",{
codeJava:function(){
//code;
}
});
//CanWriteC#类的定义
Ext.define("CanWriteC#",{
codeC#:function(){
//code;
}
});
//CanWriteC++类的定义
Ext.define("CanWriteC++",{
codeC++:function(){
//code;
}
});
//Student类的定义
Ext.define("Student",{
extend:"People",
mixins:{
java:"CanWriteJava",
net:"CanWriteC#",
c:"CanWriteC++"
}
});
经过上述的定义,Student中就可以使用(CanWriteJava、CanWriteC#、CanWriteC++)中的特性了。例如:
var student=new Student();student.codeJava();
3、在Extjs4中,当我们定义类中的属性时。Extjs会自动为我们创建其属性的getter和setter方法。而不用我们手动编写getter和setter方法。代码如下:
Ext.define("myClass",{
config:{
name:"",
address:"",
telephone:""
}
});
var cls=new myClass();
cls.setName("zhangsan");//extjs自动创建的setName方法
cls.getName();//extjs自动创建的getName方法
(二)动态加载
EXTJS4中为我们增加了另一个新的特性就是动态加载,我们可以使用动态加载,在我们需要时,才导入,这样大大节省了很多资源。比如说,我们想使用Window这个类,但是。我们又不确保,这个类当前是否已经引用到该系统中,我们就可以使用如下写法:
Ext.require("Ext.Window",function(){
//导入成功后,执行该方法体
});
如果,我们想导入我们自己定义的类,动态引用自己编写的js文件,我们需要经过如下步骤:
1、
//开启动态加载阀值
Ext.Loader.setConfig({
enabled: true
});
2、
//设置动态加载js的路径
Ext.Loader.setPath("test", "JS/test");
3、
//导入类文件
Ext.require(["test.window.mywindow","test.login.mylogin"]);
4、
//使用导入的类文件
new test.window.mywindow().show();
以下是工程中的文件目录图:
红色区域为自定义的js目录结构,注意与第三个步骤的名称想匹配。
相关文章推荐
- EXTJS4 新特性之Ext.data.Model
- AJAJX 使用JSON传递参数
- Tweenjs中的Ease示例
- Newtonsoft.Json高级用法
- 从setTimeout谈JavaScript运行机制
- JavaScript权威指南_113_第15章_脚本化文档_15.2-选取文档元素-通过ID选取元素
- JavaScript权威指南_112_第15章_脚本化文档_15.2-选取文档元素-概述
- jstree刷新
- JS 调试和缓存
- js中的eval方法
- 怎么直接让火狐输入json数据,而不是弹出文件保存对话框?
- JavaScript数据类型
- JavaScript typeOf()
- 第一个POST JSON数据的页面
- JSF(PrimeFaces)由后台向前台传递参数
- Newtonsoft.Json高级用法
- 关于原生js的一些研究
- 你想的到想不到的 javascript 应用小技巧方法
- json数据获取
- jsoncpp的使用