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等。

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

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。

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

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

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

3.简谈JS中搭建MVVM框架

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

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

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

3.2配置路由

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

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

3.3开发teacher页面

3.3.1开发ModelView

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

3.3.2开发View

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

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/

上一篇:Python爬虫通过替换http request header来欺骗浏览器实现登录


下一篇:Android集成友盟社会化分享功能