你真的理解了mvc, mvp, mvvm吗? -买球官网平台

3顶
0踩

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

2018-03-15 09:41 by 副主编 jihong10102006 评论(1) 有13456人浏览
前言: 准备写这篇文章的时候 , 我自认为对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 楼 2018-03-23 15:01
帅哥,你可以的,用简书吧

发表评论

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

相关推荐

  • 采用结构体数组或文件形式存储每本书的信息,每本书应包含如下几方面的信息:主编、出版社、出版年、版次、isbn书号、书名、定价、拥有本数、借出本数、现余本数。软件由主函数(含欢迎界面);退出程序模块;(一般用户) 3个主要功能模块:(1)借出功能(被借之书“借出本数”增1,“现余本数”减1);(2)归还功能;(3)查找功能(需指定书的某项信息,查找该书目前借出、余存信息)以及(管理员用户)3个主要功能模块(1)添加书目;(2)修改书目;(3)查看书库信息组成。

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

  • 题目描述 定义一个包含图书信息(书号、书名、价格)的顺序表,读入相应的图书数据来完成图书信息表的创建,然后统计图书表中的图书个数,同时逐行输出每本图书的信息。 输入描述 输入n 1行,其中前n行是n本图书的信息(书号、书名、价格),每本图书信息占一行,书号、书名、价格用空格分隔,价格之后没有空格。最后第n 1行是输入结束标志:0 0 0(空格分隔的三个0)。其中书号和书名为字符串类型,价格为浮点数类型。 输出描述 总计n 1行,第1行...

  • 描述 定义一个包含图书信息(书号、书名、价格)的顺序表,读入相应的图书数据来完成图书信息表的创建,然后统计图书表中的图书个数,同时逐行输出每本图书的信息。 输入 输入n 1行,其中前n行是n本图书的信息(书号、书名、价格),每本图书信息占一行,书号、书名、价格用空格分隔,价格之后没有空格。最后第n 1行是输入结束标志:0 0 0(空格分隔的三个0)。其中书号和书名为字符串类型,价格为浮点数类...

  • 图书信息管理系统,使用链表写的,含有对文件的操作,将信息保存到txt文件中,可以读取出来,初学者作业。

  • 书名:数据结构(c语言版)(第2版) isbn:9787115379504 作者:严蔚敏 李冬梅 吴伟民

  • 定义图书类型结构,定义顺序表;完成功能:初始化构建空表、插入新记录到第i个位置、删除表中第i个记录、按图书名称进行查找、按作者进行查找、按价格区间进行查找。

  • 基于顺序存储结构的图书信息表的最爱图书的查找 描述 定义一个包含图书信息(书号、书名、价格)的顺序表,读入相应的图书数据来完成图书信息表的创建,然后根据指定的最爱图书的名字,查找最爱的图书,输出相应图书的信息。 输入 总计n m 2行。首先输入n 1行,其中,第一行是图书数目n,后n行是n本图书的信息(书号、书名、价格),每本图书信息占一行,书号、书名、价格用空格分隔,价格之后没有空格。其...

  • day14## 知识点总结 1、集合 2、框架 collection(接口) :list(接口) set(接口) :arraylist linkedlist treeset hashset : stack queue map(接口): treemap hashtable hashmap 3,arraylist应用与底层实现 4,排序(3) (1)a.a...

  • 基于顺序存储结构的图书信息表的最佳位置图书的查找 描述 定义一个包含图书信息(书号、书名、价格)的顺序表,读入相应的图书数据来完成图书信息表的创建,然后根据指定的最佳位置的序号,查找该位置上的图书,输出相应图书的信息。 输入 总计n m 2行。首先输入n 1行,其中,第一行是图书数目n,后n行是n本图书的信息(书号、书名、价格),每本图书信息占一行,书号、书名、价格用空格分隔,价格之后没有...

  • *******************dome3.aspx  书名:             runat="server" height="28px" width="136px">                                                                作者:

  • using system; using system.text; using system.io; namespace consoleapplication2 { class program { static void main(string[] args) { // 图书目录.txt内容如下 //

  • 基于链式存储结构的图书信息表的排序 描述 定义一个包含图书信息(书号、书名、价格)的链表,读入相应的图书数据完成图书信息表的创建,然后将图书按照价格降序排序,逐行输出排序后每本图书的信息。 输入 输入n 1行,前n行是n本图书的信息(书号、书名、价格),每本图书信息占一行,书号、书名、价格用空格分隔,价格之后没有空格。最后第n 1行是输入结束标志:0 0 0(空格分隔的三个0)。其中书号和...

  • #include using namespace std; typedef char node_entry; struct node {     node_entry entry;     node *next;     node();//构造函数     node(node_entry item,node *add_on=null);//构造函数 }; //成员函数实现 no

  • 描述 定义一个包含图书信息(书号、书名、价格)的顺序表,读入相应的图书数据来完成图书信息表的创建,然后根据指定的最爱图书的名字,查找最爱的图书,输出相应图书的信息。 输入 总计n m 2行。首先输入n 1行,其中,第一行是图书数目n,后n行是n本图书的信息(书号、书名、价格),每本图书信息占一行,书号、书名、价格用空格分隔,价格之后没有空格。其中书号和书名为字符串类型,价格为浮点数类型。然后输入m...

  • 单链表的逆序存储 在实际应用中,经常需要用到逆序存储。而当使用链表时,逆序存储的优势更加突出,在这里,我将实现单链表的逆序存储,并且还将实现顺序存储,用以比较。 代码部分://逆序存储 #include #includestruct list { int data; struct list *next; };struct list * creatlist1

global site tag (gtag.js) - google analytics