Sencha Touch 架构

任何移动应用程序的底层都是操作系统，在此之上构建任何或所有内容。然后我们有将运行应用程序的浏览器。它可以是 Chrome、Safari、IE 等任何浏览器。上层是 W3 标准，对所有浏览器都是通用的。Sencha Touch 基于或构建在 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 - 它包含本地缓存的数据，这些数据将借助模型对象呈现到视图上。存储使用代理获取数据，代理定义了获取后端数据的服务的路径。

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

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