Sencha Touch - 架构

任何移动应用程序的底层都是操作系统，操作系统之上构建了一切。然后我们有浏览器，我们将在其上运行应用程序。它可以是 Chrome、Safari、IE 等。上层是 W3 标准，对所有浏览器都通用。Sencha Touch 是建立在 W3 标准之上的，W3 标准就是 HTML5，它使单个应用程序与不同设备的不同浏览器兼容。

Sencha Touch 是三个框架的组合 − ExtJs、JqTouch 和 Raphael(矢量绘图)。它遵循 MVC 架构。MVC 将代码分成更易于管理的块。

尽管架构对于程序来说不是强制性的，但遵循此结构是最佳实践，可使您的代码高度可维护且井井有条。

带有 Sencha Touch 应用程序的项目结构

----------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

Sencha Touch 应用程序文件夹将驻留在项目的 JavaScript 文件夹中。

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

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

Controller.js − 它是 Sencha Touch MVC 架构的控制器文件。它包含应用程序的所有控件、事件侦听器以及代码的大部分功能。它执行以下任务:路由、视图和模型之间的中介以及执行事件。

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

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

Model.js − 它包含将存储数据绑定到视图的对象。它是现实世界对象的表示，主要处理数据库。

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