浅析Android开发中的-MVC-MVP-MVVM-模式

我们将依照这个“栗子”，尝试用JavaScript实现简单的具有MVC/MVP/MVVM模式的Web应用。

Model

Model层用于封装和应用程序的业务逻辑相关的数据以及对数据的处理方法。这里我们把需要用到的数值变量封装在Model中，并定义了add、sub、getVal三种操作数值方法。

var myapp = {}; // 创建这个应用对象

myapp.Model = function() {
var val = 0; // 需要操作的数据

/* 操作数据的方法 */
this.add = function(v) {
if (val < 100) val += v;
};

this.sub = function(v) {
if (val > 0) val -= v;
};

this.getVal = function() {
return val;
};
};复制代码

View

View作为视图层，主要负责数据的展示。

myapp.View = function() {

/* 视图元素 */
var $num = $(‘#num’),
$incBtn = $(‘#increase’),
$decBtn = $(‘#decrease’);

/* 渲染数据 */
this.render = function(model) {
$num.text(model.getVal() + ‘rmb’);
};
};复制代码

现在通过Model&View完成了数据从模型层到视图层的逻辑。但对于一个应用程序，这远远是不够的，我们还需要响应用户的操作、同步更新View和Model。于是，在MVC中引入了控制器controller，让它来定义用户界面对用户输入的响应方式，它连接模型和视图，用于控制应用程序的流程，处理用户的行为和数据上的改变。

MVC

那时计算机世界天地混沌，浑然一体，然后出现了一个创世者，将现实世界抽象出模型形成model，将人机交互从应用逻辑中分离形成view，然后就有了空气、水、鸡啊、蛋什么的。
——《前端MVC变形记》

上个世纪70年代，美国施乐帕克研究中心，就是那个发明图形用户界面(GUI)的公司，开发了Smalltalk编程语言，并开始用它编写图形界面的应用程序。

到了Smalltalk-80这个版本的时候，一位叫Trygve Reenskaug的工程师为Smalltalk设计了MVC（Model-View-Controller）这种架构模式，极大地降低了GUI应用程序的管理难度，而后被大量用于构建桌面和服务器端应用程序。

如图，实线代表方法调用，虚线代表事件通知。

MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新。

Model

Model层用来存储业务的数据，一旦数据发生变化，模型将通知有关的视图。

myapp.Model = function() {
var val = 0;

this.add = function(v) {
if (val < 100) val += v;
};

this.sub = function(v) {
if (val > 0) val -= v;
};

this.getVal = function() {
return val;
};

／* 观察者模式 *／
var self = this,
views = [];

this.register = function(view) {
views.push(view);
};

this.notify = function() {
for(var i = 0; i < views.length; i++) {
views[i].render(self);
}
};
};复制代码

Model和View之间使用了观察者模式，View事先在此Model上注册，进而观察Model，以便更新在Model上发生改变的数据。

View

view和controller之间使用了策略模式，这里View引入了Controller的实例来实现特定的响应策略，比如这个栗子中按钮的 click 事件：

myapp.View = function(controller) {
var $num = $(‘#num’),
$incBtn = $(‘#increase’),
$decBtn = $(‘#decrease’);

this.render = function(model) {
$num.text(model.getVal() + ‘rmb’);
};

/* 绑定事件 */
$incBtn.click(controller.increase);
$decBtn.click(controller.decrease);
};复制代码

如果要实现不同的响应的策略只要用不同的Controller实例替换即可。

Controller

控制器是模型和视图之间的纽带，MVC将响应机制封装在controller对象中，当用户和你的应用产生交互时，控制器中的事件触发器就开始工作了。

myapp.Controller = function() {
var model = null,
view = null;

this.init = function() {
/* 初始化Model和View */
model = new myapp.Model();
view = new myapp.View(this);

/* View向Model注册，当Model更新就会去通知View啦 */
model.register(view);
model.notify();
};

/* 让Model更新数值并通知View更新视图 */
this.increase = function() {
model.add(1);
model.notify();
};

this.decrease = function() {
model.sub(1);
model.notify();
};
};复制代码

这里我们实例化View并向对应的Model实例注册，当Model发生变化时就去通知View做更新，这里用到了观察者模式。

当我们执行应用的时候，使用Controller做初始化：

(function() {
var controller = new myapp.Controller();
controller.init();
})();复制代码

可以明显感觉到，MVC模式的业务逻辑主要集中在Controller，而前端的View其实已经具备了独立处理用户事件的能力，当每个事件都流经Controller时，这层会变得十分臃肿。而且MVC中View和Controller一般是一一对应的，捆绑起来表示一个组件，视图与控制器间的过于紧密的连接让Controller的复用性成了问题，如果想多个View共用一个Controller该怎么办呢？这里有一个解决方案：

来把王者荣耀压压惊～其实我想说的是MVP模式…

MVP

MVP（Model-View-Presenter）是MVC模式的改良，由IBM的子公司Taligent提出。和MVC的相同之处在于：Controller/Presenter负责业务逻辑，Model管理数据，View负责显示。

虽然在MVC里，View是可以直接访问Model的，但MVP中的View并不能直接使用Model，而是通过为Presenter提供接口，让Presenter去更新Model，再通过观察者模式更新View。

与MVC相比，MVP模式通过解耦View和Model，完全分离视图和模型使职责划分更加清晰；由于View不依赖Model，可以将View抽离出来做成组件，它只需要提供一系列接口提供给上层操作。

Model

myapp.Model = function() {
var val = 0;

this.add = function(v) {
if (val < 100) val += v;
};

this.sub = function(v) {
if (val > 0) val -= v;
};

this.getVal = function() {
return val;
};
};复制代码

Model层依然是主要与业务相关的数据和对应处理数据的方法。

View

myapp.View = function() {
var $num = $(‘#num’),
$incBtn = $(‘#increase’),
$decBtn = $(‘#decrease’);

this.render = function(model) {
$num.text(model.getVal() + ‘rmb’);
};

this.init = function() {
var presenter = new myapp.Presenter(this);

$incBtn.click(presenter.increase);
$decBtn.click(presenter.decrease);
};
};复制代码

MVP定义了Presenter和View之间的接口，用户对View的操作都转移到了Presenter。比如这里可以让View暴露setter接口以便Presenter调用，待Presenter通知Model更新后，Presenter调用View提供的接口更新视图。

Presenter

myapp.Presenter = function(view) {
var _model = new myapp.Model();
var _view = view;

_view.render(_model);

this.increase = function() {
_model.add(1);
_view.render(_model);
};

this.decrease = function() {
_model.sub(1);
_view.render(_model);
};
};复制代码

Presenter作为View和Model之间的“中间人”，除了基本的业务逻辑外，还有大量代码需要对从View到Model和从Model到View的数据进行“手动同步”，这样Presenter显得很重，维护起来会比较困难。而且由于没有数据绑定，如果Presenter对视图渲染的需求增多，它不得不过多关注特定的视图，一旦视图需求发生改变，Presenter也需要改动。

运行程序时，以View为入口：

(function() {
var view = new myapp.View();
view.init();
})();复制代码

MVVM

最后

这里附上上述的技术体系图相关的几十套腾讯、头条、阿里、美团等公司2021年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。

相信它会给大家带来很多收获：

当程序员容易，当一个优秀的程序员是需要不断学习的，从初级程序员到高级程序员，从初级架构师到资深架构师，或者走向管理，从技术经理到技术总监，每个阶段都需要掌握不同的能力。早早确定自己的职业方向，才能在工作和能力提升中甩开同龄人。

• 无论你现在水平怎么样一定要 持续学习 没有鸡汤，别人看起来的毫不费力，其实费了很大力，这四个字就是我的建议！！！
• 我希望每一个努力生活的IT工程师，都会得到自己想要的，因为我们很辛苦，我们应得的。

当我们在抱怨环境，抱怨怀才不遇的时候，没有别的原因，一定是你做的还不够好！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

我们应得的。

当我们在抱怨环境，抱怨怀才不遇的时候，没有别的原因，一定是你做的还不够好！

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！