架构模式：MVC与MVVM

时间 2020-07-12

标签架构模式 mvc mvvm 栏目系统架构繁體版

原文原文链接

本文探讨以下几个问题：html

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

MVC与MVVM

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

Architecture Pattern: { Problem, Context } → architecture approach;
架构模式描述了一组组件之间的关系，用以解决特定上下文内的某个常见的架构问题vue

MVC和MVVM都是架构模式！node

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

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

咱们先说，为何要解耦「界面」和「业务逻辑」？web

早期的界面系统开发时，展现逻辑与数据是糅合在一块儿的！以早期的Java为例，全部的展现逻辑和业务逻辑都写在了Servlet/JSP中，致使了：算法

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

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

控制器（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;

这样的拆分，提升了系统的：session

可扩展性：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

MVC与MVVM

SpringMVC

Vue

此Model非彼Model

参考资料