05 MVC 模式

MVC 模式

一、概述

MVC 模式（Model–view–controller）是软件工程中的一种软件架构模式，把软件系统分为三个基本部分：模型（Model）、视图（View）和控制器（Controller）。
MVC 模式最早由 Trygve Reenskaug 在1978年提出，是施乐帕罗奥多研究中心（Xerox PARC）在20 世纪 80 年代为程序语言 Smalltalk 发明的一种软件架构。MVC 模式的目的是实现一种动态的程序设计，使后续对程序的修改和扩展简化，并且使程序某一部分的重复利用成为可能。除此之外，此模式透过对复杂度的简化，使程序结构更加直观。软件系统透过对自身基本部分分离的同时也赋予了各个基本部分应有的功能。

二、分析

1、组成结构

将应用程序划分为三种组件，模型 - 视图 - 控制器（MVC）设计定义它们之间的相互作用。

• 模型（Model）
  用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法。“ Model ”有对数据直接访问的权力，例如对数据库的访问。“Model” 不依赖 “View” 和 “Controller”，也就是说， Model 不关心它会被如何显示或是如何被操作。但是 Model 中数据的变化一般会通过一种刷新机制被公布。为了实现这种机制，那些用于监视此 Model 的 View 必须事先在此 Model 上注册，从而，View 可以了解在数据 Model 上发生的改变。（比如：观察者模式）
• 视图（View）
  能够实现数据有目的的显示（理论上，这不是必需的）。在 View 中一般没有程序上的逻辑。为了实现 View 上的刷新功能，View 需要访问它监视的数据模型（Model），因此应该事先在被它监视的数据那里注册。
• 控制器（Controller）
  起到不同层面间的组织作用，负责转发请求，对请求进行处理，用于控制应用程序的流程。它处理事件并作出响应，“事件”包括用户的行为和数据 Model 上的改变。
  控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。

2、优缺点

优点：

• 耦合性低，界面与逻辑分开
• 复用性高，MVC 模式允许使用不同的视图来访问同同一份数据（Model），即多个视图能共享一个模型，例如：同一份网络数据，既可以使用 WEB（HTTP）浏览器 也可以 无线浏览器（wap）来展示。
• 易拓展，可轻松增加新模块，各模块互相独立

缺点：

• 引进更多的类，增加实现成本

三、代码实现

• 实现一
  源码：https://github.com/WarZhan/DesignPatterns/tree/master/MVCPattern
• 实现二

/** 模拟 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;

四、UML 图

MVC 模式

参考资料
[1] MVC ：https://zh.wikipedia.org/wiki/MVC
[2] MVC ：https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller
[3] MVC 模式：https://www.runoob.com/design-pattern/mvc-pattern.html

欢迎关注个人公众号，实时推送最新博文！