Ext.js - 架构

Ext JS 遵循 MVC/ MVVM 架构。

MVC − 模型视图控制器架构（版本 4）

MVVM − 模型视图视图模型（版本 5）

此架构对于程序不是强制性的，但是，遵循此结构是最佳实践，可以使您的代码易于维护和组织。

使用 Ext JS 应用的项目结构

----------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 应用文件夹将位于项目的 JavaScript 文件夹中。

该应用将包含控制器、视图、模型、存储和实用程序文件以及 app.js。

app.js − 程序流程将从该主文件开始，应使用 <script> 标签将其包含在主 HTML 文件中。应用调用应用的控制器以执行其余功能。

Controller.js − 它是 Ext JS MVC 架构的控制器文件。它包含应用的所有控制、事件监听器和大部分代码功能。它为该应用中使用的所有其他文件（如存储、视图、模型、require、mixins）定义了路径。

View.js − 它包含应用的界面部分，显示给用户。Ext JS 使用各种 UI 富视图，可以在这里根据需要扩展和自定义。

Store.js − 它包含本地缓存的数据，这些数据将使用模型对象呈现到视图上。存储使用代理获取数据，代理为服务定义了路径以获取后端数据。

Model.js − 它包含将存储数据绑定到视图的对象。它具有后端数据对象到视图 dataIndex 的映射。数据是借助存储获取的。

Utils.js − 它不包含在 MVC 架构中，但使用它是最佳实践，可以使代码更简洁、更简单且更易读。我们可以在此文件中编写方法，并在需要时在控制器或视图渲染器中调用它们。它也有助于代码重用。

在 MVVM 架构中，控制器由 ViewModel 替换。

ViewModel − 它基本上在视图和模型之间仲裁更改。它将数据从模型绑定到视图。同时，它与视图没有任何直接交互。它只了解模型。

工作原理

例如，如果我们在 UI 中的两个或三个地方使用一个模型对象。如果我们在 UI 的一个地方更改值，我们无需保存即可看到该更改。模型的值发生更改，因此会反映在 UI 中的所有使用模型的地方。

它使开发人员的工作量大大减少，因为无需为数据绑定编写额外的代码。