[ExtJS5學習筆記]第九節 Extjs5的mvc與mvvm框架結構簡介 · 利劍Extjs5

本文地址：[http://blog.csdn.net/sushengmiyan/article/details/38537431](http://blog.csdn.net/sushengmiyan/article/details/38537431) 本文作者：[sushengmiyan](http://blog.csdn.net/sushengmiyan) -------------------------------------------------------------資源鏈接----------------------------------------------------------------------- 翻譯來源：[http://docs.sencha.com/extjs/5.0.0/application_architecture/application_architecture.html](http://docs.sencha.com/extjs/5.0.0/application_architecture/application_architecture.html)[](http://docs.sencha.com/extjs/5.0.0/apidocs/#!/api/Ext.toolbar.Toolbar) 本文僅僅是將英文翻譯為了中文，方便大家更是方便自己后續閱讀，僅此而已。 ------------------------------------------------------------------------------------------------------------------------------------------------ Ext JS提供了mvc和mvvm的應用程序框架支持，這兩種架構方法都是關注于將應用程序代碼和業務邏輯分離。每一種方法都有自己的優點，這取決于怎么分離應用程序模塊。這篇指導的目的就是提供有關組成這些框架的組件的基礎知識。 ### ### 什么是MVC框架？What is MVC?? 在一個MVC框架中，大多數的類要么是模型（model）要么是視圖(view)要么是控制器(controller)。用戶(user)與視圖(view)交互，視圖(view)呢又顯示模型(model)中的數據(data)。這些交互都被控制器(controller)監控，控制器(controller)又在需要的時候通過更新模型(model)和視圖(view)與響應交互。通常情況下，模型(model)和視圖(view)都不了解彼此，因為控制器（Controller）對直接更新負主要責任。一般來講，在一個應用程序中控制器（controllers）包含了大多數的應用邏輯。在理想情況下視圖（views）會包含一點點業務邏輯。模型（models）主要是一個用戶數據接口，包含著管理變化數據的業務邏輯。 MVC的目標是清晰的劃分哥哥應用程序中類的責任。因為每一個類都有明確的責任，在大型的環境中，它們就暗暗解耦了。這就讓應用程序容易測試盒維護，代碼復用性也加強了。 ### ### 什么是mvvm框架?what is mvvm ? mvc和mvvvm的最大的區別就是MVVM有一種叫做視圖模型(viewmodel)的抽象視圖。視圖模型利用一種叫作數據綁定（data binding）的技術將模型的數據和視圖的展示之間的變化進行調和。結果是,模型和框架完成盡可能多的工作,最大限度地減少或消除應用程序邏輯,直接操作視圖。 ### 返回用戶（returning users） Ext js 5引入了支持MVVM的架構支持，同時是對mvc中的改進。我們鼓勵你去探索和研究這些改進，需要值得注意的是，我們為ext js 4的mvc的繼續支持做了很大的努力。 ### mvc 和mvvm 為了理解如何在你的應用程序之間選擇合適的框架，我們應該從定義的這些不同表現開始：（M:Model）模型：這是為您的應用程序的數據。一組類(稱為“模型”)定義了字段的數據(如用戶模型的用戶名和密碼字段)。通過數據包模型知道如何展示自己,可以通過關系與其他模型關聯。模型通常用于給存儲提供數據的表格和其他組件。模型也是一個理想的選中為任何你可能需要的數據邏輯,比如驗證、轉換等。（V：View）視圖：一個視圖是任何類型的組件,是視覺表示。例如,網格,樹和面板都是考慮的觀點。（C：Controller）:控制器：控制器是用來使你的應用程序工作的視圖邏輯的管理職責位置，這可能需要渲染視圖、路由實例化模型,和任何其他類型的應用程序邏輯。（vm: viewmodel）:視圖模型是一個管理制定視圖的數據管理器。它允許感興趣的組件綁定和數據更改通知。這些應用程序架構提供結構和框架代碼的一致性。按照慣例我們建議將提供許多重要的好處: ? ? 每個應用程序在相同的方式工作,所以你只需要學一次。 ? ? 很容易在應用程序之間共享代碼。 ? ? 您可以使用Sencha Cmd創建優化的生產版本的應用程序。 ### 構造一個簡單的APP 在我們開始之前,讓我們通過Sencha Cmd構建一個示例應用程序。從命令行發出以下命令: ~~~ sencha generate app -ext MyApp ./app cd app sencha app watch ~~~ 注意：如果你不熟悉這些命令，建議你從熟悉sencha cmd開始：[點擊這里學習](http://blog.csdn.net/sushengmiyan/article/details/38313537) ### 應用程序預覽在我們講解關于組織MVC MVVM 、MVC+MV的部分知識時，讓我們看一下sencha cmd生成的應用程序的結構： ### 文件目錄結構 Ext js應用程序統一為每一個app提供了統一相同的目錄結構。我們推薦的是，所有的類都放在app文件夾下，這個文件夾包含子文件夾，里面防止你的Models 和stores還有view元素。視圖元素包括View、viewcontrollers和viewModels應該放置在一個文件夾下，這樣方便管理，可以參考下面的view下的main文件夾。 ![](https://box.kancloud.cn/2016-02-03_56b214e8e955e.jpg) ### 命名空間（namespace）每一個類的第一行代碼是各種地址，地址（adress）叫做命名空間，命名空間的格式如下： ~~~ <AppName>.<foldername>.<ClassAndFileName> ~~~ 在我們的示例程序中，‘MyApp’就是應用程序的名稱，view是文件夾名稱，main是子文件夾，Main是類并且也是一個js文件。通過以上信息，我們可以在如下目錄找到Main.js這個文件： ~~~ app/view/main/Main.js ~~~ 如果這個文件找不到，Extjs會給我們拋出一個異常信息，直到你解決這個問題。 ### 應用程序（application）讓我們從index.html開始看 ~~~ <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>MyApp</title>  <script id="microloader" type="text/javascript" src="bootstrap.js"></script> </head> <body></body> </html> ~~~ Ext js使用Microloader去加載應用程序資源，這些資源基于app.json文件描述。這就省去了我們在index.html中引入其他信息的麻煩事。有了app.json，應用程序需要的meta-data都會在一個單獨的文件位置存儲，sencha cmd就會有效的構造你的應用程序。 ### app.js 當我們生成的應用程序之前,我們創建了一個類(Application.js)和推出了它的一個實例(在app.js)。你可以看到app.js的內容如下: ~~~ /* * This file is generated and updated by Sencha Cmd. You can edit this file as * needed for your application, but these edits will have to be merged by * Sencha Cmd when upgrading. */ Ext.application({ name: 'MyApp', extend: 'MyApp.Application', autoCreateViewport: '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. //------------------------------------------------------------------------- }); ~~~ autoCreateViewport是 Ext JS 5的一個新特性。通過指定autoCreateViewport容器類,您可以使用任何類作為你的視窗。在上面的例子中,我們已經確定MyApp.view.main。主要(一個容器類)是我們的視窗。 autoCreateViewport配置指示應用程序來創建指定的視圖和附加窗口插件。這個連接視圖和文檔的主體。 ### application.js 每一個Ext JS應用程序啟動應用程序類的一個實例。這個類的目的是由app.js launch-able以及instantiable進行測試。下面這個application.js是有sencha cmd自動生成的： ~~~ Ext.define('MyApp.Application', { extend: 'Ext.app.Application', name: 'MyApp', stores: [ // TODO: add global/shared stores here ], launch: function () { // TODO - Launch the application } }); ~~~ apllicatin類包含了你需要的全局變量像應用程序的命名空間，共享的stores等。 ### 視圖（Views）視圖只不過是一個組件,它是Ext.Component的一個子類。一個視圖包含所有應用程序的視覺方面。如果你打開應用程序的在“main”文件夾下的Main.js,您應該看到下面的代碼。 ~~~ Ext.define('MyApp.view.main.Main', { extend: 'Ext.container.Container', xtype: 'app-main', controller: 'main', viewModel: { type: 'main' }, layout: { type: 'border' }, items: [{ xtype: 'panel', bind: { title: '{name}' }, region: 'west', html: '<ul>...</ul>', width: 250, split: true, tbar: [{ text: 'Button', handler: 'onClickButton' }] },{ region: 'center', xtype: 'tabpanel', items:[{ title: 'Tab 1', html: '<h2>Content ...</h2>' }] }] }); ~~~ 請注意,視圖不包含任何應用程序邏輯。你所有的視圖的邏輯應該被包括在它們,這在下一節中我們將討論。這個特定的視圖定義了一個容器邊界與西方和中心地區的布局。這些地區包括一個面板工具欄包含一個按鈕和一個標簽面板只有一個選項卡。如果您不熟悉這些概念,看看我們的入門指南。請看兩個有趣的這個視圖控制器和視圖模型配置。 ### 控制器配置(Controller config) 控制器配置允許您為視圖指定ViewController。當以這種方式在ViewController上指定一個視圖,它就變成了一個事件處理程序和引用容器。這給了它們一個一對一的關系從視圖組件和事件。在下一節中我們將進一步討論控制器。 ### 視圖模型配置（viewmodel config） viewModel配置視圖允許您指定一個視圖模型。ViewModel是該組件和它的子視圖的數據提供者。通常使用視圖模型中包含的數據綁定配置添加到組件想要展示或編輯這些數據。在上面的視圖中,您可以看到,左邊的面板的標題是綁定到視圖模型。這意味著標題將被填充數據的“名稱”值，由ViewModel管理。如果ViewModel的數據變化,標題的值將自動更新。我們將在本文的后面討論視圖模型。 ### 控制器（controllers）接下來,讓我們看看控制器。自動生成的application.js看起來像這樣: ~~~ Ext.define('MyApp.view.main.MainController', { extend: 'Ext.app.ViewController', requires: [ 'Ext.MessageBox' ], alias: 'controller.main', onClickButton: function () { Ext.Msg.confirm('Confirm', 'Are you sure?', 'onConfirm', this); }, onConfirm: function (choice) { if (choice === 'yes') { // } } }); ~~~ 如果你回顧你的視圖，Main.js,您會注意到一個函數指定tbar按鈕的處理程序。處理程序映射到一個功能叫做onClickButton控制器。正如您可以看到的,該控制器已準備好應對該事件沒有通過特殊設置。這使為您的應用程序添加邏輯非常容易。所有你需要做的就是onClickButton函數自定義的視圖控制器有一個一對一的關系。單擊視圖的按鈕時,將創建一個消息框。這個消息框包含它自己的函數調用onConfirm,作用域相同的控制器。 viewcontroller旨在: 使連接視圖使用“liseners”和“reference”配置明顯。利用視圖來自動管理的生命周期相關的ViewController。從實例化到銷毀Ext.app.ViewController與引用它的組件。第二個實例相同的視圖類 ?ViewController會得到自己的實例。當這些觀點被銷毀,他們的相關ViewController實例將被摧毀。為使嵌套視圖直觀提供封裝。 ### 視圖模型viewmodels 下一步，我們將看Viewmodel的代碼，如果你打開MainModel.js文件，你會看到下面的代碼： ~~~ Ext.define('MyApp.view.main.MainModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.main', data: { name: 'MyApp' } //TODO - add data, formulas and/or methods to support your view }); ~~~ 一個視圖模型是一個類,管理一個數據對象。然后這類允許感興趣數據視圖綁定到它和更改的通知。ViewModel ViewController一樣,屬于引用它。因為視圖模型與一個視圖相關聯,他們也可以鏈接到一個父視圖模型由祖先組件的組件層次結構。這允許子視圖只是“繼承”的數據父視圖模型。從我們的觀點我們創建了一個鏈接到ViewModel Main.js ViewModel配置。該鏈接允許綁定配置的setter從viewModel到自動設置數據視圖以聲明的方式。在MainModel.js是數據內聯的例子。也就是說,您的數據可以是任何東西,來自任何地方。數據可能會提供的任何形式的代理(AJAX、Rest等)。 ### 模型和存儲（models and stores）模型和存儲組成應用程序信息門戶。大部分通過這兩個類進行數據發送、檢索、組織、和“建模”。 ### 模型(models) Ext.data模型表示在應用程序中任何類型的可持續數據。每個模型都有字段和函數,允許您的應用程序“模型”數據。模型是最常用的結合。store可以使用數據綁定組件,如網格樹,和圖表。我們的樣例應用程序目前并不包含一個模型讓我們添加以下代碼: ~~~ Ext.define('MyApp.model.User', { extend: 'Ext.data.Model', fields: [ {name: 'name', type: 'string'}, {name: 'age', type: 'int'} ] }); ~~~ 如前所屬，你應該先需要創建一個User.js文件，然后放置在model文件夾下。 ### 字段（fields） Ext.data.Model描述的記錄包含值或屬性稱為“字段”。模型類可以聲明這些字段使用“字段”配置。在這種情況下,“名字”宣稱是一個字符串,年齡是一個整數。還有其他字段類型可參考可用的API文檔。盡管有很好的理由聲明字段及其類型,這樣做不是必需的。如果你不包括字段配置,數據會自動讀取和插入到數據對象。如果您想要定義字段數據需求: 驗證默認值功能轉換讓我們設置一個store讓這倆配合工作。 ### stores store是一個客戶端緩存的記錄(一個模型類的實例).store提供排序功能,過濾和查詢中包含的記錄。這個示例應用程序不包含一個store,但是不用擔心。簡單地定義您的存儲和分配模型 ~~~ Ext.define('MyApp.store.User', { extend: 'Ext.data.Store', model: 'MyApp.model.User', data : [ {firstName: 'Seth', age: '34'}, {firstName: 'Scott', age: '72'}, {firstName: 'Gary', age: '19'}, {firstName: 'Capybara', age: '208'} ] }); ~~~ 將User.js增加到 app/store目錄下。你在Apllication.js 中增加配置，如下： ~~~ stores: [ 'User' ], ~~~ 在本例中,存儲直接包含數據。大多數現實世界的情況下會要求你使用代理收集數據模型或商店。代理允許數據提供商和應用程序之間的數據傳輸。你可以閱讀更多關于模型、存儲和數據提供者在我們的數據指南。