Categories: Sencha Touch 教程

Sencha Touch:项目结构

任何移动应用程序的最底层都是操作系统,最重要的是构建了所有东西。然后,我们有了将在其上运行应用程序的浏览器。可能是Chrome,Safari,IE等。上层是W3标准,这对所有人来说都是通用的。Sencha Touch是基于W3标准或基于W3标准构建的,W3标准不过是HTML5,它使单个应用程序与不同设备的不同浏览器兼容。

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

尽管该体系结构对于程序来说不是强制性的,但是最好的做法是遵循此结构,以使您的代码具有高度的可维护性和组织性。

Sencha Touch App的项目结构

----------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文件中。App调用应用程序的控制器以获取其余功能。

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

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

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

Model.js-它包含将商店数据绑定到视图的对象。它是实际对象的表示,基本上是与数据库打交道的。

Utils.js-它不包含在MVC体系结构中,但是最好的用法是使用它来使代码简洁,复杂度低和可读性强。我们可以在此文件中编写方法,并在需要时在控制器或视图渲染器中调用它们。这对于代码可重用性也很有帮助。

terry

这个人很懒,什么都没有留下~

Share
Published by
terry

Recent Posts

自定义指令:聊聊vue中的自定义指令应用法则

今天我们来聊聊vue中的自定义…

7 天 ago

聊聊Vue中@click.stop和@click.prevent

一起来学下聊聊Vue中@cli…

2 周 ago

Nginx 基本操作:启动、停止、重启命令。

我们来学习Nginx基础操作:…

2 周 ago

Vue3:手动清理keep-alive组件缓存的方法

Vue3中手动清理keep-a…

3 周 ago

聊聊React和Vue组件更新的实现及区别

React 和 Vue 都是当…

4 周 ago