一、MVC
MVC，Model View Controller，是软件架构中最常见的一种设计模式，简单来说就是通过Controller的控制去操作Model层的数据，并且返回给view层展示。View跟Model，必须通过Controller来承上启下，属于单向通信。
模型（Model）：数据保存；视图（View）：用户界面；控制器（Controller）：业务逻辑。
所有方式都是单向通信：
- View 接受用户交互请求
- View 将请求转交给Controller处理
- Controller 操作Model进行数据更新保存
- 数据更新保存之后，Model会通知View更新
- View 更新变化数据使用户得到反馈
1、创建MVC对象
//页面加载后创建MVC对象
$(function(){
//创建MVC对象
var MVC=MVC||{}；
//初始化MVC数据模型层
MVC.model=function(){}();
//初始化MVC视图层
MVC.view=function(){}();
//初始化MVC控制器层
MVC.controller=function(){}();
});
2、MVC数据模型
//MVC数据模型层
MVC.model=function(){
//内部数据对象
var M={};
//服务器端获取数据，通常通过Ajax获取并存储
M.data={};
//配置数据
M.config={};
return {
//获取服务器端数据
getData:function(m){
return M.data[m];
},
//获取配置数据
getConfig:function(c){
//根据数据字段获取数据
return M.config[c]
},
//设置服务器数据
setData:function(m,v){
M.data[m]=v;
return this;
},
//设置配置数据
setConfig:function(c,v){
M.data[c]=v;
return this;
}
};
}();
3、MVC视图层
//MVC视图层
MVC.view=function(){
//模型数据层对象操作方法引用
var M=MVC.model;
//内部视图创建方法对象
var V={};
//获取视图的接口方法
return function(v){
//根据视图名词返回视图
V[v]();
}
}();
4、MVC控制器层
//MVC控制器层
MVC.controller=function(){
//模型数据层对象操作方法引用
var M=MVC.model;
//视图数据层对象操作方法引用
var V=MVC.view;
//控制器创建方法对象
var C={};
}();
二、MVP
MVP模式将Controller改名为Presenter，同时改变了通信方向。
1、各部分之间的通信，都是双向的。
2、View与Model不发生联系，都通过Presenter传递。
3、View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。
各部分之间都是双向通信：
- View 接收用户交互请求
- View 将请求转交给 Presenter
- Presenter 操作Model进行数据更新
- Model 通知Presenter数据发生变化
- Presenter 更新View数据
三、MVVM
MVVM模式将Presenter改名为ViewModel，基本上与MVP模式完全一致。唯一的区别是，它采用双向绑定（data-binding），View的变动，自动反映在ViewModel上。View和ViewModel可以互相通信，数据驱动视图，核心是ViewModel。MVVM的优点是低耦合、可重用性、独立开发。
双向绑定（data-binding）：
- View 接收用户交互请求
- View 将请求转交给ViewModel
- ViewModel 操作Model数据更新
- Model 更新完数据，通知ViewModel数据发生变化
- ViewModel 更新View数据