天蚕土豆_[Ext JS]Ext JS的類(lèi)與類(lèi)體系| 成都西華升騰科技有限公司

Ext JS開(kāi)發(fā)大全

CmsWing

[Ext JS]Ext JS的類(lèi)與類(lèi)體系

## Ext JS的類(lèi)與類(lèi)體系
### JavaScript： 基于原型的面向對象的開(kāi)發(fā)語(yǔ)言
JavaScript雖然是面向對象的開(kāi)發(fā)語(yǔ)言， 但是其是原型驅動(dòng)開(kāi)發(fā)的，其本身是沒(méi)有類(lèi)的概念的。原型編程使用的是通用的對象， 通過(guò)對這個(gè)通用對象進(jìn)行克隆和擴展，實(shí)現不同種類(lèi)的對象。比如：“動(dòng)物（Animal）”對象具備動(dòng)物的屬性和功能，從“動(dòng)物”復制“人”的對象，附加上人特有的屬性，沒(méi)有單獨的人的實(shí)例都從這個(gè)對象中克隆。 注意，這里雖然實(shí)現了Java、C#對從類(lèi)中實(shí)例化對象的功能， 但是卻沒(méi)有實(shí)際的類(lèi)的概念。
基于類(lèi)的面向對象開(kāi)發(fā)。 定義不同的類(lèi)，創(chuàng  )建類(lèi)了實(shí)例獲取對象。強類(lèi)型。 是面向對象開(kāi)發(fā)的主流。 動(dòng)態(tài)功能弱。
基于原型的面向對象開(kāi)發(fā)。從通用對象克隆和擴展實(shí)現不同種類(lèi)的對象定義。
JavaScript語(yǔ)言最大的優(yōu)點(diǎn)是靈活，但是容易導致不同的編程風(fēng)格和技術(shù)，沒(méi)有統一的結構，難于理解、維護，也不易用重用。所以Ext JS導入了基于類(lèi)的概念和編程。
### Ext JS對JavaScript語(yǔ)言的擴展
Ext JS是前端的JavaScript概念。 但是其在基于原型的基礎上發(fā)展了前端的類(lèi)的概念。支持類(lèi)的繼承以及擁有完整的類(lèi)結構?？梢曰贓xt JS的類(lèi)進(jìn)行擴展。
基于MVC／MVVM模式的幾個(gè)類(lèi)如下：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來(lái)直接上傳(img-4zIDNTfL-1606690586414)(images/screenshot_1587655557976.png)]
### 類(lèi)的定義規則
使用字母或是數字，不要使用下劃線(xiàn)和連字符等其他字符。使用駝峰法命名。
類(lèi)名包含的專(zhuān)業(yè)名詞或是縮略語(yǔ)也使用駝峰法,比如
   JSON --> Json(建議使用)   HTML --> html（建議使用）
類(lèi)最好是歸到包下面，便于管理。使用點(diǎn)號(.)分隔。
第一個(gè)包名使用駝峰法，一般是應用的名字，比如： MyApp
其他的包名全部小寫(xiě)
完整類(lèi)名的示例如下：
Ext.data.JsonProxy MyApp.view.MyView

### 類(lèi)源碼文件
類(lèi)的源碼文件是.js后綴文件，文件命名保持和類(lèi)名一致，這樣最大的好處就是不需要使用Search功能就能查找到某個(gè)類(lèi)的源碼文件，前端代碼可以像后端Java代碼一樣有結構性， 使用了Ext JS插件后，可以很容易的定位源碼文件。
在Ext JS SDK中，區分classic和modern， 源碼文件分別位于classic\classic\src和modern\modern\src路徑中，以classic的Ext.panel.Panel類(lèi)為例，源碼文件是 classic\classic\src\panel\Panel.js
（圖）
自定義的類(lèi)的源碼文件可以根據classic和modern分類(lèi)，存放在項目的classic和modern路徑下，非頁(yè)面顯示的（比如Model、Store相關(guān)的類(lèi)）兩種模式都可以共用的類(lèi)可以放在app目錄下。
（圖）
類(lèi)的定義
在類(lèi)文件中，使用Ext.define定義類(lèi)， 基本語(yǔ)法是：
Ext.define(className, members, onClassCreated);

className： 類(lèi)的名字，類(lèi)型是字符串， [必須]
members：屬性或是方法等配置，類(lèi)型一般是JSON對象，也可以是字符串。
onClassCreated ：類(lèi)創(chuàng  )建后的回調方法，類(lèi)型是函數[可選]
比如在項目MyApp中定義一個(gè)類(lèi)名是MyApp.model.User的模型類(lèi), 源碼文件是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'); //創(chuàng  )建類(lèi)實(shí)例（對象）
mayun.buy("Car"); //調用類(lèi)對象的方法
```

這里僅簡(jiǎn)單演示類(lèi)的定義和實(shí)例化，實(shí)際開(kāi)發(fā)類(lèi)會(huì )從父類(lèi)繼承。
Ext.create()方法用來(lái)創(chuàng  )建類(lèi)的實(shí)例， 也可以使用new關(guān)鍵字，比如
new MyApp.model.User()

提醒： 建議統一使用Ext.create()方式進(jìn)行創(chuàng  )建，好處是可以使用到動(dòng)態(tài)加載的特性。
類(lèi)文件的內容：方法和變量
命名規則：
類(lèi)文件中的方法和變量最要以字母命名， 允許但不建議使用數字。不要使用下劃線(xiàn)或其他非字母的字符。
使用駝峰法命名
實(shí)例：
//方法名getHtml()               (盡量不使用getHTML())getJsonResponse()  //變量名var uservar httpServer

靜態(tài)變量使用全大寫(xiě)，比如：
Ext.MessageBox.YES = "Yes"MyApp.Math.PI = "3.14"

### 類(lèi)定義的專(zhuān)用屬性 config
在定義類(lèi)時(shí)，有一個(gè)專(zhuān)用屬性 config可以使用，這個(gè)屬性定義的內容在類(lèi)被創(chuàng  )建之前由Ext.Class這個(gè)預處理程序處理，包含的功能有：
配置從其他類(lèi)成員完全封裝
如果還沒(méi)有定義方法，則在類(lèi)創(chuàng  )建之前，會(huì )自動(dòng)產(chǎn)生每個(gè)config屬性的Getter和Setter方法到類(lèi)原型中。
如果定義了apply方法，setter方法內部會(huì )先調用apply方法，這里就可以重寫(xiě)apply方法在設置值之前進(jìn)行客制化。
如果apply方法沒(méi)有返回值，setter方法也不會(huì )設置值。
如果定義了update方法，則在設置不同值的時(shí)候， apply和updata方法會(huì )將同時(shí)將新值和舊值作為參數進(jìn)行傳遞。。
Ext本身的類(lèi)不需要調用手動(dòng)initConfig() 從Ext.Component繼承的不需要
從Ext.Base繼承的類(lèi)，需要手動(dòng)調用initConfig() 。
類(lèi)的高級功能定義
### 靜態(tài)（Statics）成員
在Ext JS類(lèi)中，可以像后端Java類(lèi)一樣定義靜態(tài)變量和靜態(tài)方法。在面對對象的語(yǔ)言中，類(lèi)需要實(shí)例化成對象之后，才能夠訪(fǎng)問(wèn)和調用其中的方法和屬性。如果這些屬性和方法的共用性很高， 直接使用類(lèi)進(jìn)行獲取和調用會(huì )比較方便。 于是，在不對類(lèi)進(jìn)行實(shí)例化。通過(guò)類(lèi)本身就可以調用這些方法。
在后端語(yǔ)言中，常用在一些公用的靜態(tài)方法上，比如字符串類(lèi)型轉換 String.valueOf(b)，在Ext JS 前端適用在登錄、登出、獲取登錄Token等場(chǎng)景，也可以使用在多個(gè)組件類(lèi)對應一個(gè)控制器的場(chǎng)景。
靜態(tài)成員在類(lèi)中使用statics配置一個(gè)JSON對象， 屬性或函數作為該對象的元素，示例代碼如下：
```javascript
Ext.define('MyApp.controller.Main', {     
	statics:{        
	loginUser:'Oscar',      
	getLoginTocken:function(){      
	return "jwt前后端分離Token"     
	}           
	} 
});   
console.log("登錄用戶(hù)="+MyApp.controller.Main.loginUser);    console.log(MyApp.controller.Main.getLoginTocken());
```

### 錯誤處理
使用 Ext.getDisplayName()獲取方法的顯示名
但錯誤是在通過(guò)Ext.define()定義的類(lèi)的方法中拋出的，在瀏覽器控制臺（比如Chrome）可以看到錯誤發(fā)生的調用堆棧。
示例代碼如下：
```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是被呼叫的對象

98国产在线视频福利_欧亚v视频日韩一区二区_国产在线精彩视频_亚洲伊人久久综合影院_亚洲欧美高清激情精品一区_少妇熟女天堂网av_午夜福利日本专区_中美女子成人毛片_大荫蒂毛茸茸视频国产_小14萝裸体自慰洗澡大尺度

購物車(chē)

0 ITEMS ON YOUR CART

Ext JS開(kāi)發(fā)大全

[Ext JS]Ext JS的類(lèi)與類(lèi)體系

網(wǎng)站導航