基于Dojo toolkit实现web2.0的MVC模式

基于Dojo toolkit实现web2.0的MVC模式2011-02-08 IBM 王为民孙曼章岩前言

MVC 模式是设计模式中的经典模式，它可以有效的分离数据层，展示层，和业务逻辑层。Web2.0 技术由于其良好的用户体验被广泛应用于 WEB 应用的展示层。但是在传统的 web 开发中，展示层的和业务逻辑层代码大量耦合，使得应用的可扩展性严重降低，同时页面层代码的可复用性也很低。本文用实例介绍，如何使用 dojo toolkit 扩展 dojo 的页面控件并实现 MVC 模式，有效的分离了展示层与业务逻辑层的代码，同时使得展示层代码可复用性大大提高。

第一部分：Dojo 构造 MVC 与传统 MVC 模式的区别

传统的 MVC 模式

MVC 模式是"Model-View-Controller"的缩写，中文翻译为"模式 - 视图 - 控制器"。基于 MVC 模式的程式一般都是由 Controller, View, Model 这三个部分组成。Controller 在应用程式中主要接受用户触发的事件（Event），然后 Controller 根据事先定义好的业务逻辑去更新 Model. 在 Model 更新之后，Model 会通知（notify）已注册到该模型的视图（view）进行刷新（refresh）操作，最后程式将刷新后的视图展示给用户。

Model 的差别：

传统的 MVC 模式的 model 是一个 javabean，如清单三。而在 DOJO 构造的 MVC 当中，model 是一个 json 的数据结构，封装完，返回的数据结构形式如下：

{“books”:[{“bookName:The art of programming”,”price:90”},
          {“bookName:MVC introduction”,”price:90”}]}

数据流向的不同：

在传统的 MVC 模式中，数据的获得过程如下：

JSP — >Servlet — >Service — >DAO — >JavaBean — > 数据库

或者

JSP — >Servlet — > DAO — >JavaBean — > 数据库

而在 web2.0 的 MVC 模式中，数据的传输途径如下：

JSP — >Javascript — >Servlet — >Service — >DAO — >JavaBean — > 数据库

或者

JSP — >Javascript — >Servlet — > DAO — >JavaBean — > 数据库

比如在 DOJO 中，用户在 JSP 页面发出数据请求后，会先提交给 DOJO 的 Widget 的 Javascript 函数做处理，这个 widget 调用相应的 servlet，由 servlet 将取到的数据转换成 javascript 能够识别的 Json 数据结构，然后这个 widget 根据自己的刷新规则，将数据填入 widget 的 html template 中，显示给用户。

Servlet 控制层的差别

正是因为数据流向的区别，导致了传统的 MVC 的控制层与 web2.0 的控制层有了很大区别，如果说传统 MVC 的控制层是 servlet 的话，那么在 web2.0 中，这个控制的角色已经开始由 servlet 转移到了 javascript 中。

在传统的 MVC 模式中，servlet 负责取数据和封装数据，有时候也会包括一些刷新页面数据的代码段，而 jsp 负责解析数据，填充数据和显示数据。考虑到 JSP 从广义上来说也是一个 servlet，所以 servlet 就包含了从取数据、封装数据、解析数据、填充数据和显示数据的一条龙服务。

而在 web2.0 中，servlet 仍然负责取数据和封装数据，但是解析数据、填充数据和显示数据已经不再由 JSP 来完成，解析数据和填充数据都是在 javascript 中完成。在 dojo 中负责解析数据和填充数据的就是 widget。那么什么是 dojo 的 widget 呢？