浅析MVC、MVP、MVVM 框架实现

科技 08-11 来源： Android秃老师

复杂的软件必须有清晰合理的架构，否则无法开发和维护。为了将业务和视图的实现代码分离，目前比较流行三种前端架构：

MVC （ Model-View-Controller）
MVP （Model-View-Presenter）
MVVM（ Model-View-ViewModel）

Model 为模型层，主要管理业务模型的数据和行为；View 为展示层，其职责就是管理用户界面。

三个架构模式目的都是为了解耦 Model 和 View，主要不同点就在于三者实现解耦的方案不同。

1、MVC

一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。简单来说就是通过controller的控制去操作model层的数据，并且返回给view层展示，当用户出发事件的时候，view层会发送指令到controller层，接着controller去通知model层更新数据，model层更新完数据以后直接显示在view层上，这就是MVC的工作原理。如下图：

代码实现如下：

's voice is .var M = {    voices : {        chick : 'bi bi',        hen : 'gu gu',        cock : 'wo wo'    },    name : '',    voice : '',    change : function(name){        this.name = name;        this.voice = this.voices[name];        V.update();//调用V    },    get : function(k){        return this[k];    }}; var V = {    init : function(){        document.querySelector('#animal').onchange= function(){            C.set(this.value);//调用C        };    },    update : function(){        document.querySelector('#name').textContent = M.get('name');        document.querySelector('#voice').textContent = M.get('voice');    }}; var C = {    init : function(){        V.init();    },    set : function(name){        M.change(name);//调用M    }}; C.init();

以上代码很清晰分出M、V和C三个模块，V通过事件通知C控制M的变化，M变化后会调用V进行视图更新，整个流程是单向的。

2、MVP

MVP 是从经典的模式MVC演变而来，它们的基本思想有相通的地Controller/Presenter负责逻辑的处理，Model提供数据，View负责显示。

各部分之间的通信，都是双向的。；View 与 Model 不发生联系，都通过 Presenter 传递；View 非常薄，不部署任何业务逻辑，称为"被动视图"（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。如下图：

代码实现如下：

'voice is .var M = {    voices : {        chick : 'bi bi',        hen : 'gu gu',        cock : 'wo wo'    },    name : '',    voice : '',    change : function(name){        this.name = name;        this.voice = this.voices[name];    },    get : function(k){        return this[k];    }}; var V = {    init : function(){        document.querySelector('#animal').onchange = function(){            C.set(this.value);//调用C        };    },    update : function(kv){        for(k in kv){            document.querySelector('#'+k).textContent = kv[k];        }    }}; var P = {    init : function(){        V.init();//调用V    },    set : function(name){        M.change(name);//调用M        V.update({            name : M.get('name'),             voice : M.get('voice')        });//调用V    }}; P.init();

代码来看跟MVC差不太多，区别主要在于M和V没有直接交互，而是通过P来进行完全控制，所以P也被称为控制狂，任何交互上的事情都由很强的控制欲。

3、MVVM

MVVM采用双向绑定（data-binding）：View的变动，自动反映在 ViewModel，反之亦然。AngularJS 和 Vue 都采用这种模式，而React采用了单向数据流，属于MVP架构。　　

要实现数据绑定，通常都采用发布者-订阅者模式进行实现，但这部分工作如果由开发人员自己来写代码实现，其实还是挺复杂的，因此，各大平台都提供了各自的内部实现。比如 Vue 和 AngularJS 自身都实现了数据绑定，Android 目前最主流的方案就是采用 Jetpack，iOS 最常用的方案则是结合 ReactiveCocoa（RAC）实现。

MVP 和 MVVM 都是为了解决界面和数据的分离问题，两者只是采用了不同的实现方案。MVP 之间的交互主要是通过接口实现的，其主要弊端就是需要编写大量接口。而 MVVM 则是通过数据绑定的方式实现交互，虽然其实现需要依赖具体的一些框架工具，但明显大大减少了开发者需要编写的代码量。

代码实现如下：

         'voice is .var M = {    voices : {        chick : 'bi bi',        hen : 'gu gu',        cock : 'wo wo',    },    name : '',    voice : ''    doChang : function(){        M.name = this.value;        M.voice = this.voices[obj.name];    }}; var V = {       bindEvent : function(el, evt, func){        el['on'+evt] = M[func]();    },    updateText : function(el, text){        el.textContent = text;    }}; var VM = {    init : function(rootSelector){        this.observer();        this.compiler(rootSelector);    },    paths : {},    observer : function(){        var _this = this;        for(var k in M){            (function(k){                var name = k, value = M[k];                Object.defineProperty(M, name, {                    get : function(){                        return value;                    },                    set : function(v){                        value = v;                        V.updateText(_this.paths[name], v);                    }                });            })(k);        }            },    compiler : function(rootSelector){        var binds = document.querySelector(rootSelector).querySelectorAll('[data-bind]');        for(var i=0, len=binds.length;i-1){//事件指令                var directives = directive.split(':');                var evt = directives[0], func = directives[1];                V.bindEvent(el, evt, func);            }else{//文本指令                this.paths[directive] = el;                V.updateText(el, M[directive]);            }        }    }}; VM.init('#content');

MVC/MVP/MVVM的原理以及代码实现，文章到这里就差不多结束了。可能文章解析的不够全面，需更全面对架构的进阶。我们可以前往这里获取学习笔记方式，里面有对（架构的全方位解析+大厂架构实战演练），展示如下部分截图：《Android架构学习》私信：“手册”获取！