前端MVC实践之hellorocket——by张舒彤

一、hellorocket简介与功能分析：

hellorocket是一个html5 webapp的案例，经测试可以在Chrome浏览器，iOS Safari以及Android浏览器上运行。比较大的特点即在于其在移动设备上的兼容性，以及html5的使用。

这个简单的demo主要实现了两个网页页面间切换的效果（类似PPT的页间切换效果），同时在demo的说明中说其是模仿ios的UI风格。这一样例是基于Rocket WebApp框架开发的，并使用backbone作为MVC实现方案。

二、hellorocket框架分析：

首先我们来看一下Model层。因为这一个demo没有涉及到底层的数据库，因此没有Model层的相关代码。但是我们可以看到在页面初始化的方法中预留了可以构建model的位置，方便以后若需要即从数据库中读取数据。

之后在rocket.router.hellorocket.js中，我们可以看到一些已经在框架中提供好的配置项，包括路由、切换顺序、切换效果以及位置保留等，只需在这里改为sayhello和index两个页面合适的选项即可。这里的页面切换使用了backbone.router，这一点在之前有关backbone的学习笔记中曾经提到过，这里就不再对于其方法进行赘述。

 

接下来，我们把目光转向view层与controller层的部分，本demo中的两个页面都对应3个view层的文件，分别为header，content以及总体页面。我们可以从页面中看到对应的

事件监听，利用navigate完成了两个页面之间的切换。

         我认为总体来说，这一demo在页面初始化的时候，首先通过提前设置好的配置项定义了页面切换顺序，切换动画以及位置记忆，并且用backbone框架中的router和history来设定好页面间的切换动作，以及切换事件的监听。在用户浏览页面的过程中，通过view页面的监听，controller判断用户的动作后返回上层，显示出所需的页面。

demo的地址：http://258i.com/template/hellorocket/hellorocket.html

具体的代码见：https://github.com/MichaelHu/rocket_apps/tree/master/hellorocket

三、Rocket WebApp框架简要说明：

Rocket框架为WebApp的通用开发框架，特别适用但不仅限于Mobile，HTML5，SPA，兼容性较高。Rocket框架的基础库使用Zepto，MVC应用类库使用Backbone，前端模板库使用underscore，UI库可以使用GMU，前端开发平台使用FIS webapp业务模型。

 

其优点主要有：

1、  各页面开发过程完全独立，可以支持多人并行开发。

2、  对WebApp的开发流程进行了提炼，开发人员可以直接编写页面代码，而不用考虑页面的管理。利用MVC架构，使页面模块更容易开发和维护。

3、  除此以外，还有有好的配置项和扩展接口，结合了优秀的代码库和开发平台，还为开发人员提供了开源的demo用于学习。

四、小结与疑问

以上及时我对于hellorocket这一简单的demo以及Rocket WebApp的一点学习心得。其中我对于页面初始换函数里面的时间设置，以及在回收部分中的具体步骤还不是很清楚，希望老师能进一步讲解。

由于之前小学期的时间安排，没有参加Web前端的课程学习，所以目前在js代码的阅读上还比较吃力。希望下一阶段能好好向同组同学学习，跟上大家的脚步，做好项目的开发！

 

软件11 张舒彤

2013年10月7日