[Ext JS]Ext JS的类与类体系| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS]Ext JS的类与类体系

## Ext JS的类与类体系
### JavaScript： 基于原型的面向对象的开发语言
JavaScript虽然是面向对象的开发语言， 但是其是原型驱动开发的，其本身是没有类的概念的。原型编程使用的是通用的对象， 通过对这个通用对象进行克隆和扩展，实现不同种类的对象。比如：“动物（Animal）”对象具备动物的属性和功能，从“动物”复制“人”的对象，附加上人特有的属性，没有单独的人的实例都从这个对象中克隆。 注意，这里虽然实现了Java、C#对从类中实例化对象的功能， 但是却没有实际的类的概念。
基于类的面向对象开发。 定义不同的类，创建类了实例获取对象。强类型。 是面向对象开发的主流。 动态功能弱。
基于原型的面向对象开发。从通用对象克隆和扩展实现不同种类的对象定义。
JavaScript语言最大的优点是灵活，但是容易导致不同的编程风格和技术，没有统一的结构，难于理解、维护，也不易用重用。所以Ext JS导入了基于类的概念和编程。
### Ext JS对JavaScript语言的扩展
Ext JS是前端的JavaScript概念。 但是其在基于原型的基础上发展了前端的类的概念。支持类的继承以及拥有完整的类结构。可以基于Ext JS的类进行扩展。
基于MVC／MVVM模式的几个类如下：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4zIDNTfL-1606690586414)(images/screenshot_1587655557976.png)]
### 类的定义规则
使用字母或是数字，不要使用下划线和连字符等其他字符。使用驼峰法命名。
类名包含的专业名词或是缩略语也使用驼峰法,比如
   JSON --> Json(建议使用)   HTML --> html（建议使用）
类最好是归到包下面，便于管理。使用点号(.)分隔。
第一个包名使用驼峰法，一般是应用的名字，比如： MyApp
其他的包名全部小写
完整类名的示例如下：
Ext.data.JsonProxy MyApp.view.MyView

### 类源码文件
类的源码文件是.js后缀文件，文件命名保持和类名一致，这样最大的好处就是不需要使用Search功能就能查找到某个类的源码文件，前端代码可以像后端Java代码一样有结构性， 使用了Ext JS插件后，可以很容易的定位源码文件。
在Ext JS SDK中，区分classic和modern， 源码文件分别位于classic\classic\src和modern\modern\src路径中，以classic的Ext.panel.Panel类为例，源码文件是 classic\classic\src\panel\Panel.js
（图）
自定义的类的源码文件可以根据classic和modern分类，存放在项目的classic和modern路径下，非页面显示的（比如Model、Store相关的类）两种模式都可以共用的类可以放在app目录下。
（图）
类的定义
在类文件中，使用Ext.define定义类， 基本语法是：
Ext.define(className, members, onClassCreated);

className： 类的名字，类型是字符串， [必须]
members：属性或是方法等配置，类型一般是JSON对象，也可以是字符串。
onClassCreated ：类创建后的回调方法，类型是函数[可选]
比如在项目MyApp中定义一个类名是MyApp.model.User的模型类, 源码文件是MyApp/app/model/User.js，代码内容如下：
```javascript
Ext.define('MyApp.model.User', {
	name: '',
	constructor: function (name) {
	if (name) {
	this.name = name;
	}			
	},	
	buy: function (goods) {		
	alert(this.name + " is buying:" + goods);	
	}	
});	
var mayun = Ext.create('MyApp.model.User', 'Ma Yun'); //创建类实例（对象）
mayun.buy("Car"); //调用类对象的方法
```

这里仅简单演示类的定义和实例化，实际开发类会从父类继承。
Ext.create()方法用来创建类的实例， 也可以使用new关键字，比如
new MyApp.model.User()

提醒： 建议统一使用Ext.create()方式进行创建，好处是可以使用到动态加载的特性。
类文件的内容：方法和变量
命名规则：
类文件中的方法和变量最要以字母命名， 允许但不建议使用数字。不要使用下划线或其他非字母的字符。
使用驼峰法命名
实例：
//方法名getHtml()               (尽量不使用getHTML())getJsonResponse()  //变量名var uservar httpServer

静态变量使用全大写，比如：
Ext.MessageBox.YES = "Yes"MyApp.Math.PI = "3.14"

### 类定义的专用属性 config
在定义类时，有一个专用属性 config可以使用，这个属性定义的内容在类被创建之前由Ext.Class这个预处理程序处理，包含的功能有：
配置从其他类成员完全封装
如果还没有定义方法，则在类创建之前，会自动产生每个config属性的Getter和Setter方法到类原型中。
如果定义了apply方法，setter方法内部会先调用apply方法，这里就可以重写apply方法在设置值之前进行客制化。
如果apply方法没有返回值，setter方法也不会设置值。
如果定义了update方法，则在设置不同值的时候， apply和updata方法会将同时将新值和旧值作为参数进行传递。。
Ext本身的类不需要调用手动initConfig() 从Ext.Component继承的不需要
从Ext.Base继承的类，需要手动调用initConfig() 。
类的高级功能定义
### 静态（Statics）成员
在Ext JS类中，可以像后端Java类一样定义静态变量和静态方法。在面对对象的语言中，类需要实例化成对象之后，才能够访问和调用其中的方法和属性。如果这些属性和方法的共用性很高， 直接使用类进行获取和调用会比较方便。 于是，在不对类进行实例化。通过类本身就可以调用这些方法。
在后端语言中，常用在一些公用的静态方法上，比如字符串类型转换 String.valueOf(b)，在Ext JS 前端适用在登录、登出、获取登录Token等场景，也可以使用在多个组件类对应一个控制器的场景。
静态成员在类中使用statics配置一个JSON对象， 属性或函数作为该对象的元素，示例代码如下：
```javascript
Ext.define('MyApp.controller.Main', {     
	statics:{        
	loginUser:'Oscar',      
	getLoginTocken:function(){      
	return "jwt前后端分离Token"     
	}           
	} 
});   
console.log("登录用户="+MyApp.controller.Main.loginUser);    console.log(MyApp.controller.Main.getLoginTocken());
```

### 错误处理
使用 Ext.getDisplayName()获取方法的显示名
但错误是在通过Ext.define()定义的类的方法中抛出的，在浏览器控制台（比如Chrome）可以看到错误发生的调用堆栈。
示例代码如下：
```javascript
Ext.define('MyApp.controller.Main', {   //
extend: 'Ext.app.ViewController', 
displayName:'My Display Class',  
className:'My Class Name',    
alias : 'controller.KgdProjectInfo', 
sayHello:function(){   
throw new Error('['+ Ext.getDisplayName(arguments.callee.$owner) +'] 出错了');  
} 
});  
var controller = Ext.create('MyApp.controller.Main',{    
displayName:'My Display Class'   
});   
controller.sayHello();
```

arguments 是方法的默认参数
arguments.callee是被呼叫的对象

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS]Ext JS的类与类体系

网站导航