资讯频道 → 编程语言
阅读更多

3顶
0踩

编程语言

转载新闻 你真的理解了MVC, MVP, MVVM吗？

2018-03-15 09:41 by 副主编 jihong10102006 评论(1) 有13844人浏览
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， 两者结合起来：

前端和后端成功地分家了 ！
  • 大小: 72.3 KB
  • 大小: 20.8 KB
  • 大小: 34.3 KB
  • 大小: 63.7 KB
  • 大小: 72.2 KB
  • 大小: 26.5 KB
  • 大小: 36.5 KB
3
顶
0
踩
评论 共 1 条 请登录后发表评论
1 楼 coolboyysy 2018-03-23 15:01
帅哥，你可以的，用简书吧

发表评论

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

相关推荐

  • 线性表的链式存储结构..

    实验二 线性表的链式存储结构 题目：设计并实现以下算法：给出用单链表存储多项式的结构，利用后接法生成多项式的单链表结构，实现两个多项式相加的运算，并就地逆置相加后的多项式链式。1. 用户可以根据自己的需求分别输入两个一元多项式，并且能够实现输入的一元多项式的显示。2. 能够完成两个一元多项式的相加功能，而且还能显示相加后的逆置的一元多项式。3. 程序执行的命令包括：（1）构造链表A （2）构造链表B （3）两个链表的相加 （4）求链表的长度 （5）打印（显示）已有的链表 （6）将已相加的链表进行逆序排列

  • 数据结构实验报告2线性表的链式存储结构.doc

    学院： 专业： 班级： "姓名 " "学号 " "实验组" " "实验时间 "2011-11-11 "指导教师" "成绩 " " "实验项目名称"线性表的链式存储结构 " "实"了解和掌握线性表的逻辑结构和链式存储结构，掌握单链表的基本算法" "验"。 " "目" " "的" " "实"运行Visual c++的微机一台 " "验" " "条" " "件" " "实"根据实验内容编程，上机调试、得出正确的运行程序。 " "验"2. 编译运行程序，观察运行情况和输出结果。 " "原"3. 写出实验报告（包括源程序和运行结果）。 " "理" " "方" " "法" " "和" " "手" " "段" " "实"#include <> " "验"#include <> " "步"#include <> " "骤"typedef int ElemType; " "程"struct list { " "序"ElemType *elem ; " "清"int size; " "单"int maxsize; " " "}; " " "/* 初始化 ,构造一个新的线性表 */ " " "void In

  • 顺序存储结构

    线性表的资源存储结构 小甲鱼视频中的一部分线性表的资源存储结构 小甲鱼视频中的一部分线性表的资源存储结构 小甲鱼视频中的一部分线性表的资源存储结构 小甲鱼视频中的一部分

  • 1.基于顺序存储结构的图书信息表的创建和输出 2..基于顺序存储结构的图书信息表的排序 3.基于顺序存储结构的图书信息表的修改

    1.基于顺序存储结构的图书信息表的创建和输出 问题描述定义一个包含图书信息 (书号、书名、价格)的顺序表，读入相应的图书数据来完成图书信息表的创建。然后，统计图书表中的图书个数，同时逐行输出每本图书的信息。输入要求输入n+1行，其中前n行是n本图书的信息(书号、书名、价格)，每本图书信息占一行，书号、书名、价格用空格分隔，价格之后没有空格。最后第n+1行是输入结束标志: 000(空格分隔的三个0)。其中，书号和书名为字符串类型，价格为浮点数类型输出要求总计n+1行，第1行是所创建的图书信息表中的图书个数，后n行是n本图书的信息(书号书名、价格)，每本图书信息占一行，书号书名、价格用空格分隔。其中，价格输出保留两位小数。 输入样例 9787302257646程序设计基础25.00 9787302164340程序设计基础(第2版) 20.009787302219972 单片机技术及应用32.00 9787302203513 单片机原理与应用技术26.009787810827430工业计算机控制技术-原理与应用29.00 9787811234923 汇编语言程序设计教程21.00 000 输

  • 用C写的图书管理系统

    用C写的图书管理系统

  • 02.顺序表 排序--定义一个包含图书信息（书号、书名、价格）的顺序表读入相应的图书数据完成图书信息表的创建，然后将图书按照价格降序排序，逐行输出排序后每本图书的信息。

    输入n+1行，前n行是n本图书的信息（书号、书名、价格），每本图书信息占一行，书号、书名、价格用空格分隔，价格之后没有空格。最后第n+1行是输入结束标志：0 0 0（空格分隔的三个0）。其中书号和书名为字符串类型，价格为浮点数类型。定义一个包含图书信息（书号、书名、价格）的顺序表读入相应的图书数据完成图书信息表的创建，然后将图书按照价格降序排序，逐行输出排序后每本图书的信息。总计n行，每行是一本图书的信息（书号、书名、价格），书号、书名、价格用空格分隔。其中价格输出保留两位小数。

  • 数据结构练习题之---链表

    1、描述 定义一个包含图书信息（书号、书名、价格）的链表，读入相应的图书数据来完成图书信息表的创建，然后统计图书表中的图书个数，同时逐行输出每本图书的信息。 输入 9787302257646 Data-Structure 35.00 9787302164340 Operating-System 50.00 9787302219972 Software-Engineer 32.00 9787302203513 Database-Principles 36.00 9787810827430 Discre

  • 二十四点问题

    【题目背景】 二十四点是一款著名的纸牌游戏，其游戏的目标是使用3个加减乘除运算使得4张纸牌上数字的运算结果为24. 【题目描述】 定义每一个游戏由4个从1-9的数字和3个四则运算符组成，保证四则运算符将数字两两隔开，不存在括号和其他字符，运算顺序按照四则运算顺序进行。加法用+表示，减法用-表示，乘法用小写字母x表示，除法用/表示。在游戏里除法为整除。 老师给了你n个游戏的解，请你编写程序验证每个游戏的结果是否为24. 【输入格式】 从标准输入读入数据。 第一行输入一个整数n，从第二行开始到第n+1行中，每一

  • 数据结构实验一，第4题：基于顺序存储结构的图书信息表的逆序存储

    描述 定义一个包含图书信息（书号、书名、价格）的顺序表，读入相应的图书数据来完成图书信息表的创建，然后将读入的图书信息逆序存储，逐行输出逆序存储后每本图书的信息。 输入 输入n+1行，第一行是图书数目n，后n行是n本图书的信息（书号、书名、价格），每本图书信息占一行，书号、书名、价格用空格分隔，价格之后没有空格。其中书号和书名为字符串类型，价格为浮点数类型。 输出 总计n行，第i行是原有图书表中第...

  • C语言——图书结构体数组实现以及简单操作

    导言：本文使用C语言构建图书结构体，并实现其创建、输出、新旧书入库出库、最贵图书查找、图书修改、排序、逆序存储以及数组图书去重等函数的实现。 一、图书结构体定义 为了方便数组操作的实现，初始化图书数组1000个，根据用户需要的大小进行图书的初始化。 #include&lt;stdio.h&gt; #include&lt;stdlib.h&gt; #define N 1000 //图书数组...

  • 2020-07-09

    数字钟设计#

  • 1. 基于链式存储结构的图书信息表的逆序存储

    题目描述 定义一个包含图书信息（书号、书名、价格）的链表，读入相应的图书数据来完成图书信息 表的创建，然后将读入的图书逆序存储，逐行输出逆序存储后每本图书的信息。 输入描述 输入 n+1 行，第一行是图书数目 n，后 n 行是 n 本图书的信息（书号、书名、价格），每本 图书信息占一行，书号、书名、价格用空格分隔，价格之后没有空格。其中书号和书名为字 符串类型，价格为浮点数类型。 输出描述 总计 n 行，第 i 行是原有图书表中第 n-i+1 行的图书的信息（书号、...

  • BJFU 207基于顺序存储结构的图书信息表的逆序存储

    【代码】BJFU 207基于顺序存储结构的图书信息表的逆序存储。

  • 定义一个图书类（Book），数据成员包括：书名、作者、单价、数量；成员函数包括：借书、还书、显示；

    1定义一个图书类（Book），数据成员包括：书名、作者、单价、数量；成员函数包括：借书、还书、显示； 2借书时判断数量，如果数量为0输出书名借阅失败，如果数量大于0，数量减1并输出书名和剩余数量。 3还书时数量加1并输出书名和剩余数量。显示时能够输出图书的所有信息。 4创建图书对象时，可以给出书名、作者、单价、数量的数据进行初始化；也可以不给出任何数据，此时图书的书名是未命名，作者是佚名，单价是0...

  • 声明一个图书类，其成员包括书名、编号（利用静态变量实现自动编号）、书价

    声明一个图书类，其数据成员为书名、编号（利用静态变量实现自动编号）、书价，并拥有静态数据成员册数、记录图书的总册数，在构造方法中利用些静态变量为对象的编号赋值，在主方法中定义数组对象，并求出总册数

  • 数据结构实验一，第8题：基于顺序存储结构的图书信息表的新图书的入库

    描述 定义一个包含图书信息（书号、书名、价格）的顺序表，读入相应的图书数据来完成图书信息表的创建，然后根据指定的待入库的新图书的位置和信息，将新图书插入到图书表中指定的位置上，最后输出新图书入库后所有图书的信息。 输入 总计n+3行。首先输入n+1行，其中，第一行是图书数目n，后n行是n本图书的信息（书号、书名、价格），每本图书信息占一行，书号、书名、价格用空格分隔，价格之后没有空格。其中书号和书...

  • #03顺序表

    参考答案看底部 基于顺序存储结构的图书信息表的创建和输出 题目描述 定义一个包含图书信息（书号、书名、价格）的顺序表，读入相应的图书数据来完成图书信息表的创建，然后统计图书表中的图书个数，同时逐行输出每本图书的信息。 输入描述 输入n+1 行，其中前n 行是n 本图书的信息（书号、书名、价格），每本图书信息占一行，书号、书名、价格用空格分隔，价格之后没有空格。最后第n+1 行是输入结束标志：0 0 0（空格分隔的三个0）。其中书号和书名为字符串类型，价格为浮点数类型。 输出描述 总计n+1 行，第1 .

  • 数据结构实验一，第14题：基于链式存储结构的图书信息表的逆序存储

    描述 定义一个包含图书信息（书号、书名、价格）的链表，读入相应的图书数据来完成图书信息表的创建，然后将读入的图书逆序存储，逐行输出逆序存储后每本图书的信息。 输入 输入n+1行，第一行是图书数目n，后n行是n本图书的信息（书号、书名、价格），每本图书信息占一行，书号、书名、价格用空格分隔，价格之后没有空格。其中书号和书名为字符串类型，价格为浮点数类型。 输出 总计n行，第i行是原有图书表中第n-i...

  • 数据结构实验一，第2题：基于顺序存储结构的图书信息表的排序

    描述 定义一个包含图书信息（书号、书名、价格）的顺序表，读入相应的图书数据完成图书信息表的创建，然后将图书按照价格降序排序，逐行输出排序后每本图书的信息。 输入 输入n+1行，前n行是n本图书的信息（书号、书名、价格），每本图书信息占一行，书号、书名、价格用空格分隔，价格之后没有空格。最后第n+1行是输入结束标志：0 0 0（空格分隔的三个0）。其中书号和书名为字符串类型，价格为浮点数类型。 输出...

  • 基于顺序存储结构的图书信息表的逆序存储

    描述 定义一个包含图书信息（书号、书名、价格）的顺序表，读入相应的图书数据来完成图书信息表的创建，然后将读入的图书信息逆序存储，逐行输出逆序存储后每本图书的信息。 输入 输入n+1行，第一行是图书数目n，后n行是n本图书的信息（书号、书名、价格），每本图书信息占一行，书号、书名、价格用空格分隔，价格之后没有空格。其中书号和书名为字符串类型，价格为浮点数类型。 输出 总计n行，...

Global site tag (gtag.js) - Google Analytics