本文探讨如下几个问题：

  • 什么是MVC
  • 什么是MVVM
  • MVC与MVVM对架构属性的影响
  • MVC实例SpringMVC
  • MVVM实例Vue
  • MVC、MVVM与Layer中的Model,Controller有什么区别？

MVC与MVVM

在「什么是架构模式和架构风格」一文中，对架构模式的定义是：

Architecture Pattern: { Problem, Context } → architecture approach;

架构模式描述了一组组件之间的关系，用以解决特定上下文内的某个常见的架构问题

MVC和MVVM都是架构模式！

  • MVC描述了「Model,View,Controller」三者之间的关系，用以解决「有展示界面的系统」「界面开发与业务逻辑的耦合问题」
  • MVVM描述了[Model,View,ViewModel(和Binder)」三者之间的关系，用以解决「有展示界面的系统」「界面开发与业务逻辑的耦合问题」

可以看出MVC和MVVM都是为了解耦「界面」和「业务逻辑」，只是解决方案不同！也可以说MVVM是MVC的一种变体(ViewModel+Binder可以说是Controller的一种实现方式)，或者衍生！

我们先说，为什么要解耦「界面」和「业务逻辑」？

早期的界面系统开发时，展示逻辑与数据是糅合在一起的！以早期的Java为例，所有的展示逻辑和业务逻辑都写在了Servlet/JSP中，导致了：

  • 单个文件的代码量较多，既包含了展示代码又包含了业务逻辑
  • 违背了职责单一性原则
  • 修改麻烦
  • 复用性差
  • 不易于维护
  • ......

MVC将系统拆分为控制器、视图和模型来解决上面的问题：

  • 控制器（Controller）- 负责转发请求，对请求进行处理。
  • 视图（View） - 界面设计人员进行图形界面设计。
  • 模型（Model） - 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。

Wiki给出了一个Js模拟的MVC模式代码，能更清晰的理解三者之间的关系：

/** 模拟 Model, View, Controller */

var M = {}, V = {}, C = {};

/** Model 负责存放数据 */

M.data = "hello world";

/** View 负责将资料展示出来 */

V.render = (M) => { alert(M.data); }

/** Controller 作为M和V的桥梁 */

C.handleOnload = () => { V.render(M); }

/** 在页面加载的时候调用Controller*/

window.onload = C.handleOnload;

这样的拆分，提高了系统的：

  • 可扩展性：View、Model和Controller分别负责视图、数据和控制，可独立进化。能较方便的增加新功能。
  • 可维护性：结构清晰，多个View可以复用一个Model，减少了代码重复
  • 可测试性：每个组件的职责单一，可以对Model进行自动化测试
  • 灵活性：Controller 可以用来连接不同的 Model 和 View 去完成用户的需求
  • 可配置性：给定一些可重用的 Model 、 View 和Controller 可以根据用户的需求选择适当的 Model 进行处理，然后选择适当的的 View 来处理结果显示给用户

而MVVM模式将系统拆分为视图、模型和视图模型以及绑定器来解决耦合问题：

  • Model：Model是指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。和MVC中的Model指代的内容相似。
  • View：就像在MVC中一样，View是用户在屏幕上看到的结构、布局和外观（UI）。
  • ViewModel：ViewModel是暴露公共属性和命令的视图的抽象。
  • Binder：绑定器是MVVM模式里的一个隐含组件，ViewModel中声明了数据与View之间的绑定关系，而绑定器来处理声明的绑定关系。

ViewModel和Binder的关系就像Java里的注解与注解处理器之间的关系：注解只是标示了某个字段、方法或某个类应该具备什么属性；注解处理器根据注解，对被注解的字段、方法或某个类来进行实际的处理。

这样的拆分，与MVC模式一样，提高了相同的系统属性，只是方式有一些差异：

  • 可扩展性：View、Model和ViewModel(和Binder)分别负责视图、数据和数据视图绑定，可独立进化
  • 可维护性：结构清晰，多个View可以复用一个Model，减少了代码重复
  • 可测试性：每个组件的职责单一，可以对Model进行自动化测试。前台也可以对ViewModel进行自动化测试。
  • 灵活性：ViewModel 可以用来绑定不同的 Model 和 View 去完成用户的需求
  • 可配置性：给定一些可重用的 Model 、 View可以根据用户的需求选择适当的 Model 进行处理，然后选择适当的的 View 来处理结果显示给用户

SpringMVC

SpringMVC是目前使用比较广泛的MVC框架！它是MVC与「前端控制器」的混合体！

前端控制器模式（Front Controller Pattern）是用来提供一个集中的请求处理机制，所有的请求都将由一个单一的处理程序处理。该处理程序可以做认证/授权/记录日志，或者跟踪请求，然后把请求传给相应的处理程序。前端控制器包含如下组件：

前端控制器（Front Controller）：处理应用程序所有类型请求的单个处理程序，应用程序可以是基于 web 的应用程序，也可以是基于桌面的应用程序。

调度器（Dispatcher）：前端控制器可能使用一个调度器对象来调度请求到相应的具体处理程序。

视图（View）：视图是为请求而创建的对象。

在SpringMVC中：

  • View：指的是各种展现模板，比如：velocity,freemark,theamleaf等
  • Controller：指的是前端控制器与Controller层
  • Model：指的是Controller后的后续处理组件，比如Service,Model,Domain,DAO层等

SpringMVC的前端控制器做了很多事情，结构如下图：

  • HandlerMappingMap： 维护了请求与处理程序(一组前置拦截器+处理程序+后置拦截器)之间的关系，如何维护映射关系，由具体的实现决定。例如：RequestMappingHandlerMapping基于@RequestMapping注解来维护映射关系；SimpleUrlHandlerMapping根据URI匹配关系来处理映射关系
  • HandlerAdapter：用于执行具体的处理程序。由于不同的映射关系，执行处理程序的方式也不一样，HandlerAdapter封装了这些执行差异
  • HandlerException：异常处理程序，将异常映射到处理程序、或HTML或其它组件上。即可以通过配置，统一的处理某一种类型的异常
  • ViewResolver：通过解析「基于字符串的视图名称」来找到真实的视图，来进行渲染，回写到响应中
  • LocaleResolver, LocaleContextResolver：处理国际化
  • ThemeResolver：处理主题
  • MultipartResolver：处理multi-part请求 (上传文件)
  • FlashMapManager：实现Flash作用域。因为标准J2EE中只提供了page，request，session，application四种作用域。Spring通过FlashMapManager实现了Flash作用域，用于在单个请求内传递参数。

Vue

Vue实现的是MVVM模式！

在Vue中：

  • View：指的是各种template，即基于html语法的展示
  • ViewModel：指的是对应的js，声明绑定的元素及绑定的数据
  • Binder：处理template与js的绑定逻辑
  • Model：指的是获取数据的逻辑。如果使用的是node，则就是node相关逻辑代码；如果调用的是远程服务，则指的是远程服务

一个简单的Vue代码如下：

<!DOCTYPE html>

<html lang=en>

    <head>

        <meta charset="utf-8"/>

        <title>Hello world</title>

        <script src="vue.js"></script>

    </head>

    <body>

        <div id="app">{{content}}</div>

        <script>

            var app = new Vue({

                el:'#app', //vue实例处理哪个dom

                data:{   //定义

                    content:'hello world'

                },

                methods:{

                    fetchData: function() {

                        // 获取数据

                    }

                }

            });

        </script>

    </body>

</html>

下图是Vue的生命周期：

  • Vue对象就是ViewModel，它声明了：

    • 要处理哪个dom「el」
    • 有哪些数据「data」
    • 有哪些方法「methods」
    • 生命周期钩子（beforeCreate,created...）
  • Binder（Vue框架处理代码）根据上面的声明，来进行相应的处理

此Model非彼Model

在上面有三处提到了Model和Controller，这三处的Model和Controller并不完全相同！

三处Model：

  • MVC中的Model：这里的Mode指的是提供数据相关服务的组件。或者说是业务处理逻辑。
  • MVVM中的Model：和MVC一致
  • 系统中的Model：指的是分层系统中的Model层（代码分层），主要作为系统与持久层的数据载体，可以是只有get、set方法的POJO也可以是包含领域方法的领域对象

三处Controller：

  • MVC中的Controller：指的是连接View和Model的组件
  • Spring中的前端控制器：Controller的一种实现，统一处理请求
  • Spring中的Controller：分层系统里的Controller层（代码分层，可能叫Handler更合适），属于MVC中的Controller

参考资料

架构模式：MVC与MVVM的更多相关文章

  1. Android App的设计架构：MVC,MVP,MVVM与架构经验谈

    相关:http://www.cnblogs.com/wytiger/p/5996876.html 和MVC框架模式一样,Model模型处理数据代码不变在Android的App开发中,很多人经常会头疼于 ...

  2. Android App的设计架构：MVC,MVP,MVVM与架构AAAAA

    1. 架构设计的目的1.1 通过设计使程序模块化,做到模块内部的高聚合和模块之间的低耦合.1.2 这样做的好处是使得程序在开发的过程中,开发人员只需要专注于一点,提高程序开发的效率,并且更容易进行后续 ...

  3. 用户界面编程模式 MVC MVP MVVM

    用户界面编程模式 MVC MVP MVVM 程序 = 数据 + 算法 数据:就是待处理的东西 算法:就是代码 涉及到人机交互的程序,不可避免涉及到界面和界面上显示的数据原始方式是界面代码和逻辑代码糅合 ...

  4. SpringMVC MVC 架构模式

    MVC 架构模式 MVC(Model.View 和 Controller)是一种架构模式,它是按照职责划分的思想将系统操作分为三个模块进行处理,每个模块负责一个职责,而且模块之间可以相互交互通信,共同 ...

  5. android MVC && MVP && MVVM分析和对比

    相关:http://www.cnblogs.com/wytiger/p/5305087.html 出处http://blog.csdn.net/self_study,对技术感兴趣的同鞋加群544645 ...

  6. 三层架构与MVC &amp; 设计模式的较量

    刚刚学习了三层架构,并且正在实际应用中,但随着学习的深入,又了解到了一个叫MVC的东西,(早在设计模式中就听到过MVC,仅仅是简单查了一下什么意思.)如今正好把这三个东西放在一起聊聊. 三层 是一个分 ...

  7. [1] MVC & MVP &MVVM

    开发架构之MVC & MVP & MVVM  

  8. iOS 架构模式--解密 MVC，MVP，MVVM以及VIPER架构

    本文由CocoaChina译者lynulzy(社区ID)翻译 作者:Bohdan Orlov 原文:iOS Architecture Patterns 在 iOS 中使用 MVC 架构感觉很奇怪? 迁 ...

  9. 浅谈MVC、MVP、MVVM架构模式的区别和联系

    MVC.MVP.MVVM这些模式是为了解决开发过程中的实际问题而提出来的,目前作为主流的几种架构模式而被广泛使用. 一.MVC(Model-View-Controller) MVC是比较直观的架构模式 ...

随机推荐

  1. Html5的新特性总结

    新加语义化标签: HTML5其实是关于图像,位置,存储,速度的优化和改进 图像: 到目前为止,基本上想要直接在网页上进行绘图还是不能轻易完成的,即使是几何图形也不可以.在浏览器当中直接能跟图片的交互操 ...

  2. Chrome 声音自动播放抱错问题【play() failed】

    Chrome下调用play后抱错:DOMException: play() failed because the user didn't interact with the document firs ...

  3. setInterval 与 clearInterval详解

    首先注意,setInterval与clearInterval都是直属于window对象的. 1.直接调用setInterval(即不通过函数调用) <div id="oDiv_show ...

  4. js 两个小括号 ()() 的用法

    实现一个函数fn, 使fn(1)(2)的结果为两个参数的和,刚开始没反应过来,其实细细一想第二个括号就是函数再调用的问题,废话不多说,代码奉上: var fn = function(n) { func ...

  5. php接收post过来的json数据

    <html> <head> <title>json</title> <script src="//cdn.bootcss.com/jqu ...

  6. 实例解析Docker数据卷+数据卷容器+flocker数据共享+DockerHub操作

    Docker内部数据管理和Docker之间的数据共享为数据卷和数据卷容器,实例解析1.将本地的文件作为容器的数据卷,2.数据卷flocker插件实现容器集群(或者Docker Swarm)的数据共享3 ...

  7. 仿照jQuery进行一些简单的框架封装（欢迎指教~）

    (function(window,undefined){ var arr = [], push = arr.push, slice = arr.slice; //首先要做的就是封装一个parseHtm ...

  8. js前台实现上传图片的预览

    网上这样的插件一大堆,不过还是谈下js下代码的实现,加深这方面的理解. 当然也没有一种方式就可以完事的情形,主要就两种方面来处理: 1.file API的filereader接口完成(支持的浏览器:I ...

  9. DevExpress中 TreeList控件的常规配置

    //以下为TreeList控件样式相关设置 this.treelist_SystemCfg.BackColor = Color.Transparent; this.treelist_SystemCfg ...

  10. Windows 实用小工具

    超实用的Windows工具 ====================================================================================== ...