MVC是什么？
MVC这个词似乎经常被包装的非常高大上，让人看到云里雾里。我们先从它的本质出发，看到MVC这个词，马上意识到这是个英文缩写，是三个单词，非常简单的中学英语：model，view，controller。这就是它包含的核心内容。但随着技术的发展，应用环境的改变，这个概念不断延伸，又诞生了许多衍生品，这些稍后再展开。
MVC横空出世
MVC这个概念，并不是前端首创，它的诞生要早于前端几十年。MVC最初是施乐帕克研究中心在研究Smalltalk-80（1979年）期间设计出来的，当时的图形界面少之又少，施乐公司正在研发友好的用户图形界面，以取代电脑屏幕上那些非常晦涩难懂的命令行和DOS提示符。将应用逻辑对象抽象出模型形成model，将人机交互从应用逻辑中分离形成view，再利用controller对两者进行控制管理。这一设计理念的横空出世，在当时的计算机领域可以说是开天辟地级的创举，深远地影响了后世的软件开发领域。在1995年出版的《设计模式：可复用面向对象软件的基础》对MVC进行了深入的阐述，在推广使用方面发挥了重要作用。
前端开发与MVC
MVC，可以说是一种计算机程序架构的构建思想，也可以说是一种设计模式。最开始，MVC思想主要被大量用于构建应用程序软件，它能较好地提供图形界面，降低用户使用门槛。而早期的web开发，正如我们所知是简单的静态网页文档，与用户之间的交互很少且不复杂，几乎用不到这种设计思想就能实现。
而如今时代变了，web级应用程序的复杂程度已经越来越向传统应用软件靠拢，如果不将功能模块化并代码分离，构建起来会纠缠不清，且后续的更新和维护会非常困难。随着web应用和软件应用之间界限的逐步模糊，传统编程语言中的设计模式引入前端开发也是顺理成章的事。而由于前端开发的环境与传统软件不同，在经典MVC模式上也衍生出了诸多形如 MV+ 的模式。在不同的JavaScript框架中，各自使用不尽相同的 MV+ 模式，是前端技术发展的一个特征。作为一个新手，在梳理不同 MV+ 模式和各框架的过程中产生各种疑惑，可以说是“剪不断、理还乱”。MVC思想可以说没有标准答案，每个体系内讲的MVC只要逻辑自洽就都可以说得通。
MVC发展及衍生
经典MVC框架
经典MVC包括三类对象：model，view，controller，将他们分离以提高灵活性和复用性。
- 模型model用于封装与应用程序的业务逻辑相关的数据以及处理方法，会有相关视图监听此模型。一旦模型的数据发生变化，模型将通知有关的视图。
- 视图view是它在屏幕上的显示，描绘的是model的当前状态。当模型的数据发生变化，视图相应地进行刷新。它也是用户进行人机交互的界面。
- 控制器controller定义用户界面对用户输入的响应方式，起到组织作用，用于控制应用程序的流程，它处理用户的行为，控制view和数据model的改变。
实线：方法调用 虚线：事件通知
view到controller的事件通知虚线可能会不太好理解，举个简单的例子就好了。比如用户想要在输入框内输入一些信息，view会将用户的操作通知controller；后者判断这时的状态应该禁止用户输入，锁住输入框，这时用户的输入就无效了。
MVC for Javascipt
MVC刚应用在JS上的这一阶段，就是在三个模块之间构建了更多的交互方法，这时跟经典的MVC框架区别并不大，几乎是复制粘贴。这种从经典MVC到Javascript MVC的copy，能用是能用，但是会发现controller的角色有点尴尬。因为web依赖浏览器系统进行实现，在web应用中，controller的职责已经被系统实现了。view和浏览器就可以处理对用户输入的响应，这就使得，控制器和视图的分界线越来越模糊。
MVP
MVP（model-view-Presenter）是经典MVC设计模式的一种衍生模式，是一个基于 C++ 开发环境的模型。我们前端没必要学它，因为前端的 MV+ 设计模式跳过了这一阶段。
MVVM
MVVM，即Model-View-ViewModel，最初是由微软在使用Windows Presentation Foundation和SilverLight时定义的，2005年John Grossman在一篇关于Avalon（WPF 的代号）的博客文章中正式宣布了它的存在。MV都很熟悉了，ViewModel是什么？是MV的反向复读么。别着急，我们先来看一张图。
首先，在MVVM框架中，view和model是不知道彼此存在的，它将view和model泾渭分明地分离开来。其次，view是对viewmodel的外在显示，与viewmodel保持同步，viewmodel对象可以看作是view的上下文。view绑定到viewmodel的属性上，如果viewmodel中的属性值变化了，这些新值通过数据绑定会自动传递给view。同时，viewmodel也会获取和更新model中的数据。 所以，view不知道model的存在，model也觉察不到view，viewmodel对象担任了中介。这是一种双向绑定的设计，它降低了整体模块间的耦合度。
AngularJS 框架
AngularJS试图成为Web应用中的一种端对端的解决方案。AngularJS是为了克服HTML在构建应用上的不足而设计的，它尝试去补足HTML本身在构建应用方面的缺陷。通过使用标识符(directives)的结构，让浏览器能够识别新的语法。例如使用双大括号语法进行数据绑定；使用ng-controller指定每个控制器负责监视视图中的哪一部分；使用ng-model，把输入数据绑定到模型中的一部分属性上。
双向数据绑定是AngularJS的另一个特性。如UI控件的任何更改会立即反映到模型变量（一个方向），模型变量的任何更改都会立即反映到问候语文本中（另一方向）。AngularJS通过作用域来保持数据模型与视图界面UI的双向同步。一旦模型状态发生改变，AngularJS会立即刷新反映在视图界面中，反之亦然。
由于双向绑定特征，Angular框架可以看作是一种MVVM模式。
React 框架
在React中，只支持单项数据绑定，不支持双向数据绑定。比如可以把把数据从 state 上传到页面，但是，无法自动实现数据从页面传输到 state 中进行保存。先记住这个区别，后续的再学习深入。
Vue 框架
Vue框架是中国最流行的一种前端框架，它支持双向数据绑定。早期的1.0版本，可以说就是一种谷歌的AngularJS 框架的简化版本。后来它逐渐完善自身的设计，增添了许多特性，逐步拥有了自身的特色。它既可以实现数据单向绑定，也可以实现数据双向绑定。
本文参考引用：efe.baidu.com/blog/mvc-de…
