Ext.js 架構(gòu)

Ext JS遵循MVC / MVVM架構(gòu)。

MVC - 模型（model）-視圖（view）-控制器（controller）體系結(jié)構(gòu)（版本4）

MVVM - 模型(model)-視圖(view)-模型視圖（Viewmodel）（版本5）

這種架構(gòu)不是強(qiáng)制要求的，但最好的做法是遵循這種結(jié)構(gòu)，使您的代碼高度可維護(hù)和組織。

項目結(jié)構(gòu)

----------src
----------resources
-------------------CSS files
-------------------Images
----------JavaScript
--------------------App Folder
-------------------------------Controller
------------------------------------Contoller.js
-------------------------------Model
------------------------------------Model.js
-------------------------------Store
------------------------------------Store.js
-------------------------------View
------------------------------------View.js
-------------------------------Utils
------------------------------------Utils.js
--------------------------------app.js
-----------HTML files

Ext JS應(yīng)用程序文件夾將駐留在您的項目的JavaScript文件夾中。

應(yīng)用程序?qū)刂破?，視圖，模型，存儲，實用程序文件與app.js.

app.js:程式流程開始的主要入口，應(yīng)該使用< script> 標(biāo)簽。 應(yīng)用程序調(diào)用應(yīng)用程序的控制器的其余功能。

Controller.js:它是Ext JS MVC架構(gòu)的控制器文件。 這包含應(yīng)用程序的所有控制，事件偵聽器的最大功能的代碼。 它具有為該應(yīng)用程序中使用的所有其他文件定義的路徑，例如store，view，model，require，mixins。

View.js:它包含應(yīng)用程序的界面部分，顯示給用戶。 Ext JS使用各種UI豐富的視圖，可以根據(jù)需要在這里擴(kuò)展和自定義。

Store.js:它包含本地緩存的數(shù)據(jù)，它將在模型對象的幫助下在視圖上呈現(xiàn)。 存儲使用代理獲取數(shù)據(jù)，代理具有為服務(wù)定義的路徑以獲取后端數(shù)據(jù)。

Model.js:它包含綁定要查看的商店數(shù)據(jù)的對象。 它有后端數(shù)據(jù)對象到視圖dataIndex的映射。 在store的幫助下獲取數(shù)據(jù)。

Utils.js:它不包括在MVC架構(gòu)中，但是最好的做法是使代碼清晰，不太復(fù)雜，更加可讀。 我們可以在這個文件中編寫方法，并在控制器或視圖渲染器中調(diào)用它們。 這對代碼可重用性目的也很有幫助。

在MVVM架構(gòu)中，控制器被ViewModel替代。

ViewModel:在MVVM架構(gòu)中，是不允許數(shù)據(jù)和視圖直接通信的，只能通過ViewModel來通信，而ViewModel就是定義了一個Observer觀察者。ViewModel是連接View和Model的中間件。

怎么運(yùn)行的

例如，如果我們在UI中的兩三個地方使用一個模型對象，如果我們在UI的一個地方更改值，其他地方的UI的值也會相應(yīng)的做出改變。

它使開發(fā)人員更加輕松和簡單，因為不需要額外的編碼綁定數(shù)據(jù)。