大主宰_[Ext JS]基于Ext JS的MVC/MVVM架構的應用開(kāi)發(fā)模式| 成都西華升騰科技有限公司

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

CmsWing

[Ext JS]基于Ext JS的MVC/MVVM架構的應用開(kāi)發(fā)模式

## 基于Ext JS的MVC/MVVM架構的應用開(kāi)發(fā)模式
Ext JS 對MVC 和MVVM兩種架構都支持。這兩種架構都是根據邏輯劃分程序的代碼，兩種各有優(yōu)劣。
### MVC是什么？
Model, View , Control的首字母。
在MVC架構中，大多數類(lèi)都是模型，視圖和控制器。 用戶(hù)與視圖交互，視圖顯示模型中保存的數據。 這些交互由Controller監控，然后根據需要通過(guò)更新View和Model來(lái)響應交互。
視圖和模型不直接交換， 由控制器負責更新。 也就是說(shuō)， 在MVC模型中， 控制器包含基本所有的應用程序邏輯， 視圖基本不包含業(yè)務(wù)邏輯， 模型主要是數據接口，包含管理所述數據更改的業(yè)務(wù)邏輯。
MVC的目標是明確定義應用程序中每個(gè)類(lèi)的職責。 因為每個(gè)類(lèi)都有明確的責任，松耦合。 這使得應用程序更易于測試和維護，并且其代碼更易于重用。
### MVVM是什么？
與MVC最大的區別是View 變成了ViewModel. ViewModel使用稱(chēng)為“數據綁定”的技術(shù)協(xié)調Model的數據和View的數據表示之間的變化。
結果是模型和框架執行盡可能多的工作，最小化或消除直接操作View的應用程序邏輯。
對于開(kāi)發(fā)者的變化
Ext JS5引進(jìn)了MVVM框架， 并且之后建議使用這種方式開(kāi)發(fā)。但是Ext JS4中的MVC架構會(huì )維持不變。
### MVC 與MVVM選擇
如何選擇哪一個(gè)，首先看一下各個(gè)字母簡(jiǎn)寫(xiě)代表的意義：
(M) Model , 用于應用程序的數據。一組類(lèi)(稱(chēng)作Models)定義了數據的字段。還可以與其他Model關(guān)聯(lián)。
Models 一般與Store結合給Gird或是其他組件提供數據。也可以用于任何數據邏輯的地方，類(lèi)似驗證，轉換等。
(V)View - 一種類(lèi)型的組件， 類(lèi)似grids, trees 和panels等
?Controller -維護視圖的業(yè)務(wù)邏輯， 是程序可以運行。
(VM)ViewModel - 是一個(gè)管理指定到某個(gè)View的數據的類(lèi)。但數據發(fā)生變化時(shí)，相應的綁定的組件同步更新。
如何選擇：
保持應用程序的風(fēng)格一致， 如果已經(jīng)有了，用就可以了
易于在不同應用程序之間共享代碼
可以使用Sencha Cmd創(chuàng  )建優(yōu)化的正式環(huán)境版本。
建立一個(gè)實(shí)例的程序
使用Sencha Cmd的方式創(chuàng  )建， 首先需要下載Sencha Cmd和Ext JS SDK, 接著(zhù)，執行：
sencha -sdk local/path/to/ExtJS generate app MyApp MyAppcd appsencha app watch

應用程序概覽
文件結構
app目錄： 所有的Store, Model, ViewModel, and ViewController類(lèi)。
下面在細分子目錄：
app/model
app/store
app/view : 包括ViewModel和Controllers, 最好是根據模塊拆分子目錄， 類(lèi)似以下的main子目錄。
![](/upload/picture/2022-10-11/upload_4485842bb0066283774f40fd451a7247.jpeg)
命名空間
命名空間的格式：
..
舉例：
AppName: MyApp
目錄名: view/main
類(lèi)文件名: Main.js
應用程序
Ext JS使用Microloader 加載描述在 app.json文件的資源。這樣的話(huà)， 就可以不把那些內容放入index.html中了。使用app.json, 所有應用程序的元數據都存在同一個(gè)位置，Sencha cmd可以以簡(jiǎn)單有效的方式編譯應用程序。
app.json有很多注釋?zhuān)峁┝丝梢越邮艿呐渲玫男畔⒌暮芎玫馁Y源。
關(guān)于beforeLoad 和平臺構建的更多信息可以參考：[Developing for Multiple Environments and Screens guide.]
app.js
在之前使用cmd創(chuàng  )建應用程序時(shí)， 創(chuàng  )建了一個(gè)類(lèi)(Application.js), 在 app.js 啟動(dòng)了一個(gè)實(shí)例：
```javascript
Ext.application({ 
name: 'MyApp',  
extend: 'MyApp.Application', 
requires: [     
'MyApp.view.main.Main'   
],    // The name of the initial view to create. With the classic toolkit this class    // will gain a "viewport" plugin if it does not extend Ext.Viewport. With the    // modern toolkit, the main view will be added to the Viewport.    //    mainView: 'MyApp.view.main.Main'    //-------------------------------------------------------------------------    // Most customizations should be made to MyApp.Application. If you need to    // customize this file, doing so below this section reduces the likelihood    // of merge conflicts when upgrading to new versions of Sencha Cmd.    //-------------------------------------------------------------------------});
```

通過(guò)為mainView指定容器類(lèi)，您可以將任何類(lèi)用作Viewport。 在上面的示例中，我們已將MyApp.view.main.Main（一個(gè)TabPanel類(lèi)）確定為我們的視口。
Application.js
每個(gè)Ext JS應用程序都以Application Class的實(shí)例開(kāi)始。 此類(lèi)旨在由app.js啟動(dòng)，并且可以實(shí)例化以進(jìn)行測試。
Application.js 內容由cmd自動(dòng)產(chǎn)生。
Application Class包含應用程序的全局設置，例如應用程序的命名空間，共享存儲等。當應用程序過(guò)期時(shí)（瀏覽器緩存版本與服務(wù)器上的最新版本），將調用onAppUpdate方法。 提示用戶(hù)重新加載應用程序以便使用當前構建進(jìn)行操作。
視圖-Views
視圖就是一個(gè)組件，是Ext.Component的一個(gè)子類(lèi)。視圖是應用程序用來(lái)進(jìn)行可視化顯示的部分。
看一下classic下面的Main.js 位置在：classic/src/view/main/Main.js
```javascript
Ext.define('MyApp.view.main.Main', { 
	extend: 'Ext.tab.Panel', 
	xtype: 'app-main',   
	requires: [     
	'Ext.plugin.Viewport',     
	'Ext.window.MessageBox',     
	'MyApp.view.main.MainController',   
	'MyApp.view.main.MainModel',        
	'MyApp.view.main.List'  
	],
	controller: 'main', 
	viewModel: 'main',  
	ui: 'navigation',  
	tabBarHeaderPosition: 1, 
	titleRotation: 0,  
	tabRotation: 0,  
	header: {     
	layout: {       
	align: 'stretchmax'  
	},     
	title: {   
	bind: {      
	text: '{name}'   
	},         
	flex: 0        
	},  
	iconCls: 'fa-th-list'  
	}, 
	tabBar: {   
	flex: 1,      
	layout: {  
	align: 'stretch',
	overflowHandler: 'none'   
	}  
	},  
	responsiveConfig: {  
	tall: {      
	headerPosition: 'top'       
	},  
	wide: {  
	headerPosition: 'left' 
	} 
	},  
	defaults: { 
	bodyPadding: 20,  
	tabConfig: {  
	plugins: 'responsive',  
	responsiveConfig: {   
	wide: {           
	iconAlign: 'left',   
	textAlign: 'left'      
	},             
	tall: {      
	iconAlign: 'top',   
	textAlign: 'center',   
	width: 120            
	}           
	}     
	}   
	},   
	items: [{    
	title: 'Home',     
	iconCls: 'fa-home',    
	// The following grid shares a store with the classic version's grid as well!  
	items: [{      
	xtype: 'mainlist'   
	}]   
	}, {   
	title: 'Users',   
	iconCls: 'fa-user',    
	bind: {        
	html: '{loremIpsum}'    
	}  
	}, { 
	title: 'Groups',   
	iconCls: 'fa-users',  
	bind: {        
	html: '{loremIpsum}'    
	}   
	}, {  
	title: 'Settings',    
	iconCls: 'fa-cog',  
	bind: {      
	html: '{loremIpsum}'  
	}   
}]});
```

視圖不包含任何應用程序邏輯，所以的視圖的邏輯部分需要包含在 ViewController里面。
### controller 和viewModel的配置都和View相關(guān)。
看一下"List"視圖的配置，listeners中 select的配置：
/** * This view is an example list of people. */Ext.define('MyApp.view.main.List', {    extend: 'Ext.grid.Panel',    xtype: 'mainlist',    requires: [        'MyApp.store.Personnel'    ],    title: 'Personnel',    store: {        type: 'personnel'    },    columns: [        { text: 'Name',  dataIndex: 'name' },        { text: 'Email', dataIndex: 'email', flex: 1 },        { text: 'Phone', dataIndex: 'phone', flex: 1 }    ],    listeners: {        select: 'onItemSelected'    }});

### Controller 配置
控制器配置允許您為視圖指定ViewController。 當以這種方式在視圖上指定ViewController時(shí)，它將成為事件處理程序和引用的容器。 這為ViewController提供了與視圖中觸發(fā)的組件和事件的一對一關(guān)系。
### ViewModel 配置
viewModel配置允許您為視圖指定ViewModel。 ViewModel是此組件及其子視圖的數據提供者。 ViewModel中包含的數據通常通過(guò)將綁定配置添加到要呈現或編輯此數據的組件來(lái)使用。
在 "Main"視圖的例子中，title的配置是 bind {text:’{name}’}, 這是有ViewModel來(lái)管理的， 如果ViewModel的數據發(fā)生變化， title也會(huì )自動(dòng)更新。
控制器-Controllers
看一下自動(dòng)產(chǎn)生的MainController.js
```javascript
Ext.define('MyApp.view.main.MainController', {   
	extend: 'Ext.app.ViewController',  
	alias: 'controller.main', 
	onItemSelected: function (sender, record) {    
	Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this);
	},    
	onConfirm: function (choice) {   
	if (choice === 'yes') {      
	//       
}    }});
```

回頭看看List視圖 List.js, 可以注意到為Grid選擇事件的設計的功能。 該處理程序映射到父視圖Main.js，controller中名為onItemSelected的函數。 如您所見(jiàn)，此控制器已準備好處理該事件而無(wú)需特殊設置。
這使得為應用程序添加邏輯非常容易。 因為控制器與其視圖具有一對一的關(guān)系，需要做的就是定義onItemSelected函數。
### ViewControllers的作用：
-讓使用"listeners"和"reference"配置的方式連接視圖更顯而易見(jiàn)
-利用視圖的生命周期自動(dòng)管理其關(guān)聯(lián)的ViewController。 從實(shí)例化到銷(xiāo)毀，Ext.app.ViewController綁定到引用它的組件。 同一視圖類(lèi)的第二個(gè)實(shí)例將獲得自己的ViewController實(shí)例。 當銷(xiāo)毀這些視圖時(shí)，它們的相關(guān)ViewController實(shí)例也將被銷(xiāo)毀。
-提供封裝以使嵌套視圖直觀(guān)。
ViewModels
看一下 MainModel.js，位置在app/view/main/MainModel.js
```javascript
Ext.define('MyApp.view.main.MainModel', { 
	extend: 'Ext.app.ViewModel',   
	alias: 'viewmodel.main', 
	data: {  
	name: 'MyApp',      
	loremIpsum: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'  
}    //TODO - add data, formulas and/or methods to support your view});
```

ViewModel是一個(gè)管理數據對象的類(lèi)。 然后，該類(lèi)允許對此數據感興趣的視圖綁定到該數據并通知更改。 ViewModel與ViewController一樣，歸引用它的視圖所有。 由于ViewModel與視圖相關(guān)聯(lián)，因此它們還能夠鏈接到組件層次結構中的祖先組件所擁有的父ViewModel。 這允許子視圖簡(jiǎn)單地“繼承”其父ViewModel的數據。
在視圖類(lèi)中（Main.js）通過(guò)viewModel配置將View和ViewModel關(guān)聯(lián)起來(lái)。
此鏈接允許使用setter綁定配置，以聲明方式自動(dòng)將viewModel中的數據設置到視圖上。 數據在“MainModel.js”示例中是內聯(lián)的。 也就是說(shuō)，您的數據可以是任何東西，來(lái)自任何地方。 數據可以由任何類(lèi)型的代理（AJAX，REST等）提供。
### Models 和 Stores
Models和Stores構成了應用程序的信息門(mén)戶(hù)，大多數數據都是由這兩個(gè)類(lèi)發(fā)送，檢索，組織和“建?！钡?。
Models - 模型
Ext.data.Model 用來(lái)表示應用程序中任何類(lèi)型的可持久數據。每個(gè)模型都有字段和函數，允許您的應用程序“建?！睌祿?。 Models最常與Stores一起使用。 然后，Stores可以被數據綁定組件（如Grid，Tree和Charts）使用。
舉例來(lái)說(shuō)：
```javascript
Ext.define('MyApp.model.User', { 
	extend: 'Ext.data.Model',  
	fields: [ {
	name: 'name',
	type: 'string'
	}, {
	name: 'age',
	type: 'int'} 
]})
```

文件位置 app/model/

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

購物車(chē)

0 ITEMS ON YOUR CART

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

[Ext JS]基于Ext JS的MVC/MVVM架構的應用開(kāi)發(fā)模式

網(wǎng)站導航