你真的理解了mvc, mvp, mvvm吗？ -欧洲杯足彩官网

3顶
0踩

你真的理解了mvc, mvp, mvvm吗？

2018-03-15 09:41 by 副主编 jihong10102006 评论(1) 有13753人浏览

mvc mvp mvvm

前言：准备写这篇文章的时候，我自认为对mvc已经有深刻理解了，可是画图的时候发现，理解还是有漏洞，于是又阅读，思考，整理，加深了理解，写了这篇文章，估计还有漏洞，欢迎讨论。
这再一次说明了写作的好处：很多时候自以为理解了，实际上脑海中有很多想当然的假设，写作会把这些假设给暴露出来。
大概是二三十年前，人类逐渐从命令行界面时代走出来，进化到了gui时代。

注： gui（graphic user interface），即图形用户接口。

（一个命令行程序）

（一个带有图形界面的桌面应用程序，自己画的，有点丑啊）

每当人类努力地开发新的桌面gui程序的时候，至少要搞定下面几类工作：

1. 界面（以及界面中元素的）布局。
这是一件挺费劲的工作，要尽可能地美观漂亮，要不然就卖不出去。

2. 界面上有些“逻辑”需要处理
比如上图中那个薪水计算程序，“计算” 按钮默认是灰色的，不能点击，用户输入了税前收入以后， “计算”按钮就会被激活，表示计算了。

3. 所谓的业务逻辑。
用户点击了“计算”按钮以后，计算五险一金，个人所得税和税后收入。

这三者搅在一起，让程序代码凌乱不堪，稍微复杂点儿的程序就长达几千行，不断地挑战着程序员的底线，修改别人的代码，添加新的功能要比从头写难好多倍！

大家都在泥潭中挣扎。

桌面应用程序的 mvc

程序越来越复杂，bug越来越多，没办法，大家只好去求编程上帝。
上帝说：想从困境中走出来，一定要实现关注点分离（separation of concerns）。
没人能够理解。
上帝解释道：“ 你们人脑同时能处理的东西是有限的，所以要把一个大系统给分解，变成几个相对独立的部分，这样我们的大脑每次只关注某一方面，暂时忽略其他的，就能够掌控了。”
没人知道该怎么分解。
上帝只好想了一个办法，把关注点分离的理论给具体化，这个办法就是mvc。
上帝告诉人类：
m 表示 model , 专门用来处理业务逻辑，不干别的事情。
例如在那个薪水计算系统中。计算一个人的薪水，五险一金，个人所得税等等。

v 表示view，专注页面布局和数据显示。
例如把button放置到某个位置，把总收入显示到一个文本框，把税金显示到另外一个地方。

c 表示controller 翻译用户的输入，操作模型和视图。
例如，用户在界面点击了一个“计算”的按钮，view 把计算的请求传递给controller (很明显view需要知道controller，换句话说，需要持有controller的实例)，controller找到或者创建model，执行业务逻辑：计算薪水。

计算的结果该怎么展示呢？人类问道。

上帝胸有成竹：可以让model 去通知view。

model需要持有view的实例（当然也可以通过观察者模式），调用view对应的方法。

例如： view中可能有一个onresult的方法，让model去调用，在调用的时候把一个参数对象salary传递过来，不就可以展示数据了吗？

// view的方法，被model调用： 
public void onresult(salary salary){   
      //把个人所得税(salary.gettax()) 展示到一个文本框
      //把净收入(salary.getnetpay()) 展示到另外一个文本框
      ......
}

画成流程图的话是这个样子：

大家都觉得mvc大法好，纷纷开始使用。

mvp

时间久了以后，人类就觉得不爽了，因为在这个mvc中，依赖太多：
view 依赖controller和model
controller依赖view和model
model 和view的关系虽然很弱，但是也需要某种方式来通知view进行数据更新。
人类说：“他们之间的耦合还是挺紧密的啊，亲爱的上帝，能不能改改？”
上帝觉的人类还是挺有上进心的，决定继续施以援手： “这样吧，可以改变一下controller，把model和view完全隔离开，让他们单独变化。”

上帝把controller 改了个名称，叫做presenter，把整体命名为mvp。
在mvp当中，view只知道presenter, 不知道model 。
计算流程和mvc差不多，用户点击了“计算薪水”按钮， view去调用presenter， presenter操作model , model 中进行业务计算。关键点是，presenter去更新view。

//presenter 的方法，被view调用
public void calculatesalary(){
    //调用model计算薪水
    view.showtax(xxx);    // 调用view显示所得税
    view.shownetpay(xxxx);//  调用view净收入
    ......
}

但是presenter还是需要调用view的方法，也就是说presenter对view有依赖，这样presenter就没办法单独做单元测试，非得等到界面做好以后才行。
于是上帝又做了一点改进，让view层提取出接口，presenter只依赖这个接口。

这样presenter不用依赖真正的界面就可以测试了，并且也增加了复用性，只要view实现了那个接口，presenter就可以大发神威。

mvvm

使用了一段时间mvp以后，永不满足的人类又觉得不爽了，因为让presenter调用view的方法去设置界面，仍然需要大量的、烦人的代码，这实在是一件不舒服的事情。
人类突发奇想：能不能告诉view一个数据结构，然后view就能根据这个数据结构的变化而自动随之变化呢？
上帝看到人类思考了，表示了赞赏。
他说，我来送你们一个叫做viewmodel的东西，它可以和view层绑定。 viewmodel的变化，view立刻就会变化。
人类问： viewmodel？里边有什么东西？
上帝说：拿你们的薪水计算为例， viewmodel 差不多这样：

public class salaryviewmodel{
    string grosssalary;  //税前收入，和view中的相关字段对应
    string netsalary;    //净收入，和view中的相关字段对应
    string tax;          //个人所得税，和view中的相关字段对应
    ...... 
    boolean  iscalculating;  // 一个标志位，表示正在计算 
    string errmsg;           // 如果出错的话，记录出错消息。
}

当用户在界面上点击“计算”按钮的时候，你们需要设置一个salaryviewmodel中的标志位：
salaryviewmodel.iscalculating = true;
这样view 中就可以自动给用户展示一个消息：“正在计算....”
当薪水计算完成的时候，如果没有错误，salaryviewmodel 中grosssalary， netsalary，tax等属性就有了值。与此同时view 中对应的内容也会更新，不用你们手工去设置，很方便吧？
如果计算过程出错， salaryviewmodel 的errmsg 会保存出错消息，同样，view中会自动把这个错误消息给显示出来，很智能吧？
人类说：“怎么可能这么智能呢？这里的viewmodel 好像和view没有什么关系啊？到底该怎么绑定啊？！！！”
上帝笑了：你们可以开发一个框架嘛？让两者绑定起来不就行了？
人类没有办法，只好自己动手。
（注：实际上微软的wpf和silverlight， android等框架和系统都可以实现view和viewmodel之间的映射和绑定）

web应用程序的mvc

时间过得飞快，人类发明了互联网，web应用程序如雨后春笋般崛起，b/s(浏览器-服务器)开始大行其道。
用户通过浏览器发出get,post请求，服务器端进行处理，处理完以后生成html给浏览器。
无论什么操作，都是对服务器端url的访问。
人类突然发现，整个编程模型发生了巨变，不能简单地套用原来的mvc和mvp了。
如果把html页面比作原来桌面应用程序的view，服务器无论是controller还是model都是无法远程遥控这个view进行处理的。
人类这一次没有去请教上帝，自己尝试对mvc进行改良，其中有个叫rod johnson 带领一帮人搞出的springmvc很成功。

不像桌面应用的mvc，这里的model没法给view 发通知。
也不像mvp, 这里的controller 也不会调用view的方法来设置界面。
实际上controller 会选择一个view，然后把模型数据“丢过去”渲染。
原来的view 变成了 view template（例如jsp , velocity等等），经过渲染后变成html发给浏览器展示给用户。
有人把这种mvc称为基于web的 mvc，以便和之前的mvc区别开来。

前后端的分离

人类早期的b/s应用程序中，每次访问服务器端， html就会整体发给浏览器，即所谓的整体刷新。
后来人类发明了ajax，可以做到局部刷新。
于是浏览器端的应用变得越来越复杂，再后来人类竟然发明了web上的spa(单页应用程序)，用起来的体验和最初的桌面应用程序越来越像。
人类发现，那些mvc, mvvm之类的模式完全可以用到浏览器端嘛！
例如在浏览器端使用mvvm , 在服务器端可以使用mvc，两者结合起来：

前端和后端成功地分家了！

来自:

分享到：

3
顶

0
踩

评论共 1 条请登录后发表评论

1 楼 2018-03-23 15:01

帅哥，你可以的，用简书吧

发表评论

您还没有登录,请您登录后再发表评论

你真的理解了mvc, mvp, mvvm吗？ -欧洲杯足彩官网

3顶0踩