设计模式之架构型MVC，MVP，MVVM模式

一、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数据