MVC是三个单词的首字母缩写，他们是Model(模型)，View(视图)和Controller(控制)。

这个模式认为，程序不论简单或复杂，从结构上看，都可以分为三层。

1. 最上面的一层，是面向最用用户的“视图层”（View）。他是提供给用户的操作界面，是程序的外壳。
2. 最底下的一层，是核心的“数据层”（Model）,也就是程序需要操作的数据或信息。
3. 中间的一层，就是“控制层”（Controller）,它负责根据用户从“视图层”输入的指令，选取“数据层中的数据”，然后对其进行相应操作，产生最终结果。

mvc就是把你的代码分成三块。

第一块，v 告诉代码长什么样子，或者说在页面哪部分，view就是视图，就是看的见得东西

第二块，m 你的数据有哪些操作，model就是数据，所有和数据相关的操作都放在model 第三块，c负责其他的所有事情，controller是控制器，它用来控制其他的所有代码

具体过程如图：

Model 和服务器交互，Model 将得到的数据交给 Controller，Controller 把数据填入 View，并监听 View 用户操作 View，如点击按钮，Controller 就会接受到点击事件，Controller 这时会去调用 Model，Model 会与服务器交互，得到数据后返回给 Controller，Controller 得到数据就去更新 View

模块化

MVC的前提是模块化，把某个功能放到一个js文件里，一个文件负责一个功能，就是模块化。

闭包

1. 我们不想要全局变量（会污染环境）
2. 所以我们使用局部变量
3. ES5里，只有函数有局部变量
4. 于是我们声明一个function xxx,然后立即执行这个函数xxx.call
5. 这是xxx还是全局变量(全局函数)
6. 所以我们不能给这个函数名字function(){}.call()
7. 但是这样Chrome会报错，语法错误。
8. 解决方案，加一个"!"!function(){}.call(我们不在乎这个匿名函数的返回值，所以加！取反没关系。)

模块之间的通信

首先，假设我们有两个js文件，他们分别是

第一个文件

!function(){    var person = {        name: 'frank',        age: 18    }    window.frankGrowUp = function(){        person.age += 1        return person.age    }}.call()复制代码

第二个文件,我们可以通过window的属性来访问第一个js文件里的匿名函数

var frankGrowUp = window.frankGrowUpfankGrowUp()复制代码

1. 立即执行函数使得person无法被外部访问
2. 闭包使得匿名函数可以操作person
3. window.frankFrowUp保存了匿名函数的地址
4. 任何地方都可以使用window.frankGrowUp

由此得出，任何地方都可使使用window.frankGrowUp来操作person（只能以它提供的方式来操作，如window.frankGrowUp对应的函数，只能增不能减）,但不能直接访问person，