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

-------------------------------------------------------------資源連結-----------------------------------------------------------------------

本文僅僅是将英文翻譯為了中文，友善大家更是友善自己後續閱讀，僅此而已。

------------------------------------------------------------------------------------------------------------------------------------------------

Ext JS提供了mvc和mvvm的應用程式架構支援，這兩種架構方法都是關注于将應用程式代碼和業務邏輯分離。每一種方法都有自己的優點，這取決于怎麼分離應用程式子產品。

這篇指導的目的就是提供有關組成這些架構的元件的基礎知識。

  在一個MVC架構中，大多數的類要麼是模型（model）要麼是視圖(view)要麼是控制器(controller)。使用者(user)與視圖(view)互動，視圖(view)呢又顯示模型(model)中的資料(data)。這些互動都被控制器(controller)監控，控制器(controller)又在需要的時候通過更新模型(model)和視圖(view)與響應互動。

  通常情況下，模型(model)和視圖(view)都不了解彼此，因為控制器（Controller）對直接更新負主要責任。一般來講，在一個應用程式中控制器（controllers）包含了大多數的應用邏輯。在理想情況下視圖（views）會包含一點點業務邏輯。模型（models）主要是一個使用者資料接口，包含着管理變化資料的業務邏輯。

  MVC的目标是清晰的劃分哥哥應用程式中類的責任。因為每一個類都有明确的責任，在大型的環境中，它們就暗暗解耦了。這就讓應用程式容易測試盒維護，代碼複用性也加強了。

  mvc和mvvvm的最大的差別就是MVVM有一種叫做視圖模型(viewmodel)的抽象視圖。視圖模型利用一種叫作資料綁定（data binding）的技術将模型的資料和視圖的展示之間的變化進行調和。

  結果是,模型和架構完成盡可能多的工作,最大限度地減少或消除應用程式邏輯,直接操作視圖。

  Ext js 5引入了支援MVVM的架構支援，同時是對mvc中的改進。我們鼓勵你去探索和研究這些改進，需要值得注意的是，我們為ext js 4的mvc的繼續支援做了很大的努力。

  為了了解如何在你的應用程式之間選擇合适的架構，我們應該從定義的這些不同表現開始：

  （M:Model）模型：這是為您的應用程式的資料。一組類(稱為“模型”)定義了字段的資料(如使用者模型的使用者名和密碼字段)。通過資料包模型知道如何展示自己,可以通過關系與其他模型關聯。模型通常用于給存儲提供資料的表格和其他元件。模型也是一個理想的選中為任何你可能需要的資料邏輯,比如驗證、轉換等。

  （V：View）視圖：一個視圖是任何類型的元件,是視覺表示。例如,網格,樹和面闆都是考慮的觀點。

  （C：Controller）:控制器：控制器是用來使你的應用程式工作的視圖邏輯的管理職責位置，這可能需要渲染視圖、路由執行個體化模型,和任何其他類型的應用程式邏輯。

  （vm: viewmodel）:視圖模型是一個管理制定視圖的資料管理器。它允許感興趣的元件綁定和資料更改通知。

  這些應用程式架構提供結構和架構代碼的一緻性。按照慣例我們建議将提供許多重要的好處:

      每個應用程式在相同的方式工作,是以你隻需要學一次。

      很容易在應用程式之間共享代碼。

      您可以使用Sencha Cmd建立優化的生産版本的應用程式。

在我們開始之前,讓我們通過Sencha Cmd建構一個示例應用程式。從指令行發出以下指令:

 在我們講解關于組織MVC MVVM 、MVC+MV的部分知識時，讓我們看一下sencha cmd生成的應用程式的結構：

  Ext js應用程式統一為每一個app提供了統一相同的目錄結構。我們推薦的是，所有的類都放在app檔案夾下，這個檔案夾包含子檔案夾，裡面防止你的Models 和stores還有view元素。視圖元素包括View、viewcontrollers和viewModels應該放置在一個檔案夾下，這樣友善管理，可以參考下面的view下的main檔案夾。

每一個類的第一行代碼是各種位址，位址（adress）叫做命名空間，命名空間的格式如下：

在我們的示例程式中，‘MyApp’就是應用程式的名稱，view是檔案夾名稱，main是子檔案夾，Main是類并且也是一個js檔案。通過以上資訊，我們可以在如下目錄找到Main.js這個檔案：

如果這個檔案找不到，Extjs會給我們抛出一個異常資訊，直到你解決這個問題。

讓我們從index.html開始看

Ext js使用Microloader去加載應用程式資源，這些資源基于app.json檔案描述。這就省去了我們在index.html中引入其他資訊的麻煩事。有了app.json，應用程式需要的meta-data都會在一個單獨的檔案位置存儲，sencha cmd就會有效的構造你的應用程式。

當我們生成的應用程式之前,我們建立了一個類(Application.js)和推出了它的一個執行個體(在app.js)。你可以看到app.js的内容如下:

autoCreateViewport是 Ext JS 5的一個新特性。通過指定autoCreateViewport容器類,您可以使用任何類作為你的視窗。在上面的例子中,我們已經确定MyApp.view.main。主要(一個容器類)是我們的視窗。

autoCreateViewport配置訓示應用程式來建立指定的視圖和附加視窗插件。這個連接配接視圖和文檔的主體。

每一個Ext JS應用程式啟動應用程式類的一個執行個體。這個類的目的是由app.js launch-able以及instantiable進行測試。

下面這個application.js是有sencha cmd自動生成的：

apllicatin類包含了你需要的全局變量像應用程式的命名空間，共享的stores等。

視圖隻不過是一個元件,它是Ext.Component的一個子類。一個視圖包含所有應用程式的視覺方面。

如果你打開應用程式的在“main”檔案夾下的Main.js,您應該看到下面的代碼。

請注意,視圖不包含任何應用程式邏輯。你所有的視圖的邏輯應該被包括在它們,這在下一節中我們将讨論。

這個特定的視圖定義了一個容器邊界與西方和中心地區的布局。這些地區包括一個面闆工具欄包含一個按鈕和一個标簽面闆隻有一個頁籤。如果您不熟悉這些概念,看看我們的入門指南。

請看兩個有趣的這個視圖控制器和視圖模型配置。

控制器配置允許您為視圖指定ViewController。當以這種方式在ViewController上指定一個視圖,它就變成了一個事件處理程式和引用容器。這給了它們一個一對一的關系從視圖元件和事件。在下一節中我們将進一步讨論控制器。

viewModel配置視圖允許您指定一個視圖模型。ViewModel是該元件和它的子視圖的資料提供者。通常使用視圖模型中包含的資料綁定配置添加到元件想要展示或編輯這些資料。

在上面的視圖中,您可以看到,左邊的面闆的标題是綁定到視圖模型。這意味着标題将被填充資料的“名稱”值，由ViewModel管理。如果ViewModel的資料變化,标題的值将自動更新。我們将在本文的後面讨論視圖模型。

接下來,讓我們看看控制器。自動生成的application.js看起來像這樣:

如果你回顧你的視圖，Main.js,您會注意到一個函數指定tbar按鈕的處理程式。處理程式映射到一個功能叫做onClickButton控制器。正如您可以看到的,該控制器已準備好應對該事件沒有通過特殊設定。

這使為您的應用程式添加邏輯非常容易。所有你需要做的就是onClickButton函數自定義的視圖控制器有一個一對一的關系。

單擊視圖的按鈕時,将建立一個消息框。這個消息框包含它自己的函數調用onConfirm,作用域相同的控制器。

viewcontroller旨在:

  使連接配接視圖使用“liseners”和“reference”配置明顯。

  利用視圖來自動管理的生命周期相關的ViewController。從執行個體化到銷毀Ext.app.ViewController與引用它的元件。第二個執行個體相同的視圖類  ViewController會得到自己的執行個體。當這些觀點被銷毀,他們的相關ViewController執行個體将被摧毀。

  為使嵌套視圖直覺提供封裝。

下一步，我們将看Viewmodel的代碼，如果你打開MainModel.js檔案，你會看到下面的代碼：

一個視圖模型是一個類,管理一個資料對象。然後這類允許感興趣資料視圖綁定到它和更改的通知。ViewModel ViewController一樣,屬于引用它。因為視圖模型與一個視圖相關聯,他們也可以連結到一個父視圖模型由祖先元件的元件層次結構。這允許子視圖隻是“繼承”的資料父視圖模型。

從我們的觀點我們建立了一個連結到ViewModel Main.js ViewModel配置。該連結允許綁定配置的setter從viewModel到自動設定資料視圖以聲明的方式。在MainModel.js是資料内聯的例子。也就是說,您的資料可以是任何東西,來自任何地方。資料可能會提供的任何形式的代理(AJAX、Rest等)。

模型和存儲組成應用程式資訊門戶。大部分通過這兩個類進行資料發送、檢索、組織、和“模組化”。

Ext.data模型表示在應用程式中任何類型的可持續資料。每個模型都有字段和函數,允許您的應用程式“模型”資料。模型是最常用的結合。store可以使用資料綁定元件,如網格樹,和圖表。

我們的樣例應用程式目前并不包含一個模型讓我們添加以下代碼:

如前所屬，你應該先需要建立一個User.js檔案，然後放置在model檔案夾下。

Ext.data.Model描述的記錄包含值或屬性稱為“字段”。模型類可以聲明這些字段使用“字段”配置。在這種情況下,“名字”宣稱是一個字元串,年齡是一個整數。還有其他字段類型可參考可用的API文檔。

盡管有很好的理由聲明字段及其類型,這樣做不是必需的。如果你不包括字段配置,資料會自動讀取和插入到資料對象。如果您想要定義字段資料需求:

  驗證

  預設值

 功能轉換

讓我們設定一個store讓這倆配合工作。

store是一個用戶端緩存的記錄(一個模型類的執行個體).store提供排序功能,過濾和查詢中包含的記錄。

這個示例應用程式不包含一個store,但是不用擔心。簡單地定義您的存儲和配置設定模型

将User.js增加到 app/store目錄下。

你在Apllication.js 中增加配置，如下：

在本例中,存儲直接包含資料。大多數現實世界的情況下會要求你使用代理收集資料模型或商店。代理允許資料提供商和應用程式之間的資料傳輸。

你可以閱讀更多關于模型、存儲和資料提供者在我們的資料指南。