首页手记深入理解 MVC...

深入理解 MVC 在实际开发中和thinkPhp、angular、vue框架关系，理解什么是 MVP MVVM

标签：

AngularJS Vue.js

MVC 简介

MVC（Model View Controller），是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。主要目的提高了软件可维护性、可复用性，也因为把模型-视频-控制器，进行抽象分离开发，有助于管理复杂的应用程序，因为您可以在一个时间内专门关注一个方面。例如，您可以在不依赖业务逻辑的情况下专注于视图设计。同时也让应用程序的测试更加容易。

Model（模型）是应用程序中用于处理应用程序数据逻辑的部分。
　　通常模型对象负责在数据库中存取数据，前端表现为和后端之间接口调用。
View（视图）是应用程序中处理数据显示的部分。
　　通常视图是依据模型数据创建的。
Controller（控制器）是应用程序中处理用户交互的部分。
　　通常控制器负责从视图读取数据，控制用户输入，并向模型发送数据。

MVC 关系图

我们以web前端为例，来解释一下 M-V-C 三者之间的关系，当用户打开一个网站后

加载静态文件 html、css、js
View 渲染出第一次视图，这时候是没有数据的，View 调用 Model 方法
Model 调用后端接口，获取到初始化数据并缓存在本地，通知 View 进行数据填充
用户操作界面，发起事件 => Controller 接收到事件
- 如果是切换页面的，则进行视图选择，View 改变之后，发现需要有数据没有，则调用 model 方法，进行重新获取数据
- 如果是数据增、删、改，则调用 Model 方法进行修改，Model 通知视图做相应调整

到这里大家还是会感觉到比较抽象，没有实际的感觉，下面我们用后端一个框架（php 中的 thinkPHP）前端中的 vue 来理解这三者之间的关系

MVC 从后端到前端简单发展历程

没有前端工程师的年代

在很多年前，当时 js 刚起步，由于性能问题，前后端分离还没开始等因素，但是网站开发仅仅是后端一个人的事，他们不写接口，而是使用数据塞入html方式进行开发。

最早以 php 为例，是 php + html + css 开发模式，但是也同样遇到 php 和 html 混编，导致代码可以维护性、复用性、开发的专注性、协作性，都非常低，为了改变这种现状，出现了很多解决方案，而 thinkPHP 提供了 MVC 开发模式的解决方案，大大的改变了那种垃圾代码的现状，让开发者感受到了爽的感觉。

thinkPHP 中的 MVC

在 thinkPHP 中

Model 就是作为，数据库直接的增、删、改、查，四个部分的，其它事情都不做，而且也只有 Model 可以直接和数据库进行打交道
Controller 比真实的控制器能力要强，它不仅仅承载用户操作事件接受者、视图选择、数据库状态改变，它还把数据库通知视图渲染数据的能力交给了它
View 根据 Controller 选择的视图，Controller 给与的数据进行视图渲染，并把用户操作的事件通知给 Controller 进行处理

thinkPHP MVC 关系图

可以看出和 MVC 概念里面不同的是，Model 没有直接通知 View 改变的能力，全部需要经过 Controller 进行处理加工，然后放入到 View 进行渲染（也就是另一种开发模式 MVP）

前端工程师崛起

后来因为互联网的发展，业务开发的业务复杂度日益增长，用户对于也没的体验要求越来越高（体验式经济）纯服务端渲染的形态体验肯定不可能非常好，也由于 js 的快速发展（得益于 Google 的 v8 引擎）使得前端工程师崛起了。

js 的崛起使得，用户对 web 交互操作的时候，可以立马可以得到相应，且可以做动画，而不是傻不拉几的开始请求新的页面，在哪等待浏览器的加载、

而后为了使得前端开发更便捷，dom操作更方便，也出现了 jq 为代表的很多框架，但是依然没有从软件设计模式上去解决好维护、好协同、更专注的问题，这个阶段主要是对于常用的操作进行封装阶段。

这个阶段在前端抽象层来说，Model View Controller 三者相当耦合。

而后出现了 angular 改变了这种格局，angular 的 MVC 的抽象

View 很清晰，就是 HTML + CSS
Controller 里面进行业务逻辑处理 & 后端数据、状态的缓存
Model 比较不清晰，没有明确说明，其实在 angular 中 Model 就是调接口的 ajax 但由于框架本身没有明确的定义，所以有很多时候，开发者又耦合到 C 中

angular的出现简直算是跨时代的产物，从此前端 jq 独大的局面开始变化。angular 中除了使用了 MVC 开发模式外，还引入很多比较好的概念，比如：依赖注入、双向数据绑定等，具体这边不做说明，今天的主题不是说这个。

angular 虽然使用了 MVC ，但是对于很多东西的定义的不够清晰，比如 Model，比如 Controller 中存在数据的缓存 + 业务逻辑的处理，这时候我们中国的开发者就有重新定义了一下 MVC，也就是现在中国很流行的 vue

vue 中的实际上有两个 MVC，第一个 MVC，是相对于后端的，第二个MVC是前端内部的数据和视图直接的MVC关系

首先我们来说第一个，相对于后端的MVC

Model 是指调接口的 ajax，框架中没有明确的定义，但是在样例中却表达的很清楚，Model 需要单独建立文件夹，进行基于 promise 的 ajax 的封装，Controller 中如果使用则进行调用
Controller 负责业务逻辑，视图选择，数据初始化等（在这个抽象里面 C 应该称作 P，MVP 的 P 和 php 中的 C 很像，因为 Model 不直接和 View 进行打交道）
View 就是 HTML + CSS 对于数据的渲染，事件钩子调用 C

第二个，纯前端内部的 MVC 抽象吗，后来称作 MVVM