js架构设计模式——由项目浅谈JS中MVVM模式

1. 背景

最近项目原因使用了durandal.js和knockout.js，颇有受益。决定写一个比较浅显的总结。

之前一直在用SpringMVC框架写后台，前台是用JSP+JS+标签库，算是很传统的MVC开发模式了。后来，前端用Flex还有微软的WPF做过开发，到这次，前端使用纯JS+HTML，利用knockout.js，也算是接触了几种语言下的MVVM模式。

此次开发中，结合require.js和durandal.js，完成了按需加载、AMD规范以及前端页面路由。当然了，一般控件的编写和改用，还是使用的老熟人Jquery。

由于我个人一直是更倾向于GIS的理论和算法研究，平心而论，并不算一个在前端上有造诣的人，写的不好望大家见谅。

2.MVC、MVP和MVVM的对比

MVC这种经典模式，基本做WEB开发的人都是最先接触到这种开发方式的。各种框架，也都提供了这种模式的支持，比如Spring、Struts、Hibernate等。

MVC的优点就不用跟大家一一介绍了。这里大致说下此开发模式的一个缺点。

张占岭老师在其博客（http://www.cnblogs.com/lori/p/3501764.html）很详细的讲解了它的缺点。这里进行引用：View是可以直接访问Model的！从而，View里会包含Model信息，不可避免的还要包括一些业务逻辑。在MVC模型里，更关注的Model的不变，而同时有多个对Model的不同显示，及View。所以，在MVC模型里，Model不依赖于View，但是 View是依赖于Model的。不仅如此，因为有一些业务逻辑在View里实现了，导致要更改View也是比较困难的，至少那些业务逻辑是无法重用的。

就我个人的开发经验上来说便是，Web开发中的Controller主要是指后台端的Controller，它对请求进行解析，返回一个 Model给指定的View，由一般用JSP写的View来对Model进行解析和展示。但是在前端中的View层面上，很难实现View和Model的分离。也就是张占岭提到的View里包含Model信息。并且由于Model的展示与业务需求有关，JSP中本身还经常嵌带标签语句和JS语句来完成 View的展示。所以JSP的重复利用率是很低的。

再后来，Flex和WPF出现了。这两种前端开发方式，号称是RIA技术。Flex中倡导用MXML来写界面，AS来写逻辑。WPF中倡导用 XAML来写界面，C#来写逻辑。也就是专门做一个presenter，将后台返回的Model进行处理，然后在View中进行显示。而View对 Model的修改也是通过presenter来进行控制。那么这个流程变成了：后台的Controller返回Bean，前台的Presenter进行解析来显示View，反转过去也是相同：即C（后台）+MPV。

同时，在Flex和WPF中均提出了数据绑定这种概念，也就是View由数据来驱动。当数据变动时View便进行改变，View中数据变动时也会导致绑定的数据变动。利用此概念，我们可以正式开启前端的MVVM模式了，即（Model-View-ViewModel），于是我们的MVC模式变成了 ——C（后台）+MVVM。

3.简谈JS中搭建MVVM框架

3.1首先引入durandal.js和kockout.js

利用已经引入的require.js对需要引入的js进行配置。

3.2配置路由

这里以配置teacher页面为例子。

3.3开发teacher页面

3.3.1开发ModelView

3.3.2开发View

4.学习资料

Durandal.js学习地址： http://durandaljs.com/

Knockout.js学习地址： http://knockoutjs.com/

附：

requir.js学习地址： http://requirejs.org/

underscore.js学习地址： http://underscorejs.org/

CodeMirror.js学习地址: http://codemirror.net/