zoukankan      html  css  js  c++  java
  • 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/

  • 相关阅读:
    PAT B1027 打印沙漏 (20 分)
    PAT B1025 反转链表 (25 分)
    PAT B1022 D进制的A+B (20 分)
    PAT B1018 锤子剪刀布 (20 分)
    PAT B1017 A除以B (20 分)
    PAT B1015 德才论 (25 分)
    PAT B1013 数素数 (20 分)
    PAT B1010 一元多项式求导 (25 分)
    HDU 1405 The Last Practice
    HDU 1165 Eddy's research II
  • 原文地址:https://www.cnblogs.com/koleyang/p/5013639.html
Copyright © 2011-2022 走看看