基于sammy的前端mvc框架

2.1.4 WEB前端的相关技术

Web前端使用到Sammy和Jquery两个JavaScript框架。

Sammy。Sammy.js 是一个微型的 JavaScript 框架用来简化 JavaScript 应用程序的编写，其核心只有 16K，压缩后 5.2K 大小；通过提供一个小的“核心”的框架和一个不断增长的插件具体功能列表来实现这一点。这个内核包含一个简单的API，用于定义其定义的路由(url)和事件之间的绑定关系。

Jquery。Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的JavaScript库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互[6]。

Jquery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆JavaScript来调用命令了，只需定义id即可[7]。

2.2 系统整体开发架构概述与整合

本系统采用Oracle11G为数据库，Hibernate担任数据访问与数据持久化的重任；Spring作为Bean的容器，对系统中的Bean进行统一的组织与管理；使用DWR+Sammy来取代传统S2SH框架中Struts2框架，负责页面的显示。

2.2.1 系统整体开发架构

为了让读者更容易理解整个系统的架构，架构图如图2-1所示：

<!--EndFragment-->

 

 

 

 

 

1.整个系统与数据库的交互都是通过Hibernate来实现的。

2.整个系统的javaBean都是委托Spring来管理的，包括Hibernate的sessionFactory，业务层的所有Bean，DWR使用的Bean也是在Spring容器取的。由于Spring采用了控制反转(反射机制)，使得代码变得可配置，扩展性好，大大降低了代码间的耦合度。Spring是整个系统架构的核心所在，其配置信息都包含在applicationContext.xml文件中。

3.传统S2SH架构的页面显示层是采用Struts2，本系统不采用是因为Struts对应于Ajax的支持先天不足，虽然其在开发流程上是比较简单易用。采用DWR3.0作为Ajax的支持，前端显示采用纯html+Jquery+Ajax调用来渲染页面的显示，同时为了弥补Ajax带来的无法保存页面状态的问题，又引入了前端MVC框架Sammy。为了让读者明白前端页面的渲染过程，渲染流程如图2-2。

<!--EndFragment-->

 

 

这是用户首次请求页面的过程

1.用户输入网站地址，服务端处理该请求，将index.html页面，以及该页面中所引用的JavaScript、CSS、图片浏览器中，由浏览器第一次渲染页面。

2.浏览器在渲染页面过程中，由于Sammy通过JavaScript捕获到了URL变化，于是转到Sammy控制器处理该事件。

3.由于Sammy根据具体代码处理该事件，可能需要通过DWR再去请求需要的数据。通过DWR的回调函数从服务端返回了Json格式的数据。

4.得到回调函数返回的Json格式的数据，浏览器端，使用JavaScript对其进行解析，然后第二次渲染到浏览器页面中。至此，页面显示完成。

相信细心的读者已经发现，与服务器多交互两次，页面也要渲染两次，这样一来页面的加载速度会大打折扣。原来，这是第一次打开网站的情况，当用户打开网站之后，在网站中请求其他数据的时候，就不需要第一次的网页渲染，而是只需要第二次的渲染流程即可，在一个页面中，事实上第一次渲染往往已经是不需要，第二次数据请求加渲染才是真正需要的。总得来说，实现了服务端与前端的分离，前端与服务端的数据交互只通过Json数据。

虽然Ajax是一项非常优秀的技术，但是在使用Ajax技术的同时也带来了一些不足。

(1)由于页面是局部刷新的，所以不支持后退页面。

(2)无法保存页面状态，使用了Ajax技术的页面，通过Url无法确定页面内容。

(3)对搜索引擎也不友好，大多情况下无法被搜索引擎收录。

之所以Sammy能够弥补Ajax的不足之处，问题的关键在于前端的Url变化是“假跳转”，所谓的“假跳转”是在原有的Url后面加”#xxxx”,而这样的Url变化是不会再次向服务器发送请求的，恰恰这样的Url变化能够被Sammy作为事件捕获到，然后再由Sammy去处理这个Url“假”跳转事件，因此才有页面的第二次渲染。

加了“#xxxx”这串Url，这串Url就是存放页面的参数，因此页面的状态也得以保存，同时Sammy也支持页面返回。

<!--EndFragment-->