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 app 文件夹将驻留在项目的 JavaScript 文件夹中。

App 将包含控制器、视图、模型、存储和带有 app.js 的实用程序文件。

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

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

View.js − 它包含应用程序的界面部分，显示给用户。 Ext JS 使用各种丰富的 UI 视图，可以根据需求在此处进行扩展和自定义。

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

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

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

在 MVVM 架构中，控制器被 ViewModel 取代。

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

工作原理

例如，如果我们在 UI 中的两三个地方使用一个模型对象。如果我们在 UI 的一个地方更改值，我们甚至不需要保存该更改就可以看到。模型的值会发生变化，因此会反映在 UI 中的所有位置，无论模型在哪里使用。

它使开发人员的工作量大大减少和轻松，因为绑定数据不需要额外的编码。