前端的MVC和MVP和MVVM

时间:2021-03-07 21:13:53
  1. MVC(Model-View-Controller)
  2. MVP(Model-View-Presenter)
  3. MVVM(Model-View-ViewModel)

  • M-V- X 本质都是一样的 重点还是在于M-V 的桥梁要靠 X来牵线。
  • 所以无论是复杂化 简单化 还是修改流程,基本都是因为技术栈变化了 对应做的调整。

  • X的模式之间不同 主要是 M与V 的数据传递的流程不同。

    数据传递的流程不同来源于运行环境技术栈能够做到的事情不同。


  • 在相同技术栈下 能够实现的各种 X都可以是大同小异的。
  • 在不同技术栈下 相同的X可能实现都大相径庭,仅有非常抽象的流程类似。

Model-View-Controller

在ASP还在奋斗的时候WebForm突然到来,正如WebForm还在奋斗的时候MVC突然到来。当然,我这里讲的MVC还是最原始的MVC,因为MVC在我们还在争论的时候已经发展了许多不同分支了

有一点相信大家同意的就是,我们今天讨论争论的MVC、MVP、MVVM、Code Behind等等都源自于职能分化和规划的思想与目的,MVC不是它们的开始,但是一个很好的开始

相信MVC的模型大家很熟悉,也很容易找到,我们这里用一下某百科的图:

前端的MVC和MVP和MVVM

我们可以看到的是,界面被分到了View,数据分到了载体Model上由Model“携带”,业务集中在Controller中,而推动业务的事件由用户与View交互,通过View向Controller发动。

当然,实现由很多种,每种细节上都有不同,所以我才只讲也只能讲大致的MVC。MVC的其中一个缺点便是没有明确的定义,所以不同的实现(比如Struts和ASP.NET MVC)细节上都是不一样的

我们需要知道的是,MVC并不是像上面所说的一些事情那样是一种“必然的”结果,它是一系列必然结果问题中的一种解决方案,而且是不完美的解决方案。我们顺着推理去到一个地方很容易犯的一个错误就是认为路只有这一条而忽视其他可能性(估计这也是导致很多争斗的原因)。另外,我们在讨论一件事物不完美的时候是有一个情境的,所以请不要像“我说它色彩单一,然后你把它涂成彩色后证明我是错的”。

MVC的一般流程是这样的:View(界面)触发事件--》Controller(业务)处理了业务,然后触发了数据更新--》不知道谁更新了Model的数据--》Model(带着数据)回到了View--》View更新数据

这里也不多再陈述MVC的原理、实践等等,因为这就太长篇大论了。

 

 

Model-View-Presenter和一些衍生

像我们之前推理的,分化是一种需求的必然结果,但却没有个一个确定的结果,比如Code Behind和Code Block的问题等等。

MVC顺着需求把UI相关的工作分化成了三份,这点经过实践证明无可厚非。但是它们的三角关系却被一些人认为带来了一些问题,或者应该说他们有“更好的”解决方案

在只有Code Behind和Code Block的那个时候维护是很直接的,不是在同一段代码内解决就是在同一个关联的事件上解决。三角关系的问题就是维护问题。在MVC,当你有变化的时候你需要同时维护三个对象和三个交互,这显然让事情复杂化了

我们之前说到,随着摩尔定律,软件的需求不断地变化和变得庞大。随着需求变得庞大的时候,需求变化也变得频繁,这是一个出现了无数次以后也将会出现无数的无数次的一个问题,所以它需要一个解决方案,哪怕它不一定能被解决

为了解决需求变化,从《人月神话》到敏捷到DDD,它不是我们已经解决了的问题,而是我们正在解决的问题。放在UI的模式和MVC上来讲,就是优化或者替代MVC模式,其中之一就是Model-View-Presenter(MVP)模式。

我们先看看两个MVP模式的图:

前端的MVC和MVP和MVVM(图一)

前端的MVC和MVP和MVVM(图二)

两幅图是不同的,但是对MVC的改进的思想却是一样的:切断的View和Model的联系,让View只和Presenter(原Controller)交互,减少在需求变化中需要维护的对象的数量

这种方式很符合我们的期待,因为我们倾向于:

  • 用更低的成本解决问题
  • 用更容易理解的方式解决问题

许多时候并不是一种模式不好,而是因为人没办法执行,比如不容易理解,我们就会选择容易理解的方式。计算机依赖摩尔定律用数量的增长来解决问题,而人是用方式的改变来解决问题的。同样因为客观原因我们不善于维护多个对象和多个对象之间的关系,所以我们改变了,或者说简化了这种方式。

MVP定义了Presenter和View之间的接口,让一些可以根据已有的接口协议去各自分别独立开发,以此去解决界面需求变化频繁的问题。上面两图都有接口,不过接口的实现和使用细节不一样,不过思想上是一致的。

在这里要提到的是,事实上,需求变化最频繁的并不一定是最接近用户的界面,但基本可以确定的是,最接近用户的界面是因为需求变化而需要最频繁更改的。当然,如果View如果是API而不是UI,那就另说了。

还有一些用来“解决”MVC这项缺点的比如有:ASP.NET MVC的ViewBag,Cocoa的delegate。它们都为了简化数据更新的问题而存在,包括MVVM。

 

 

Model-View-ViewModel

先直接看看Model-View-ViewModel(MVVM)的图:

 前端的MVC和MVP和MVVM

从图上看是比MVP简单了,更不用说MVC了。个人不认为MVVM是从MVP进化而来,我只觉得这是在MVP之后出现的一种“更好的”UI模式解决方案,但是用MVP来与之对比比较容易说明问题。

ViewModel大致上就是MVP的Presenter和MVC的Controller了,而View和ViewModel间没有了MVP的界面接口,而是直接交互,用数据“绑定”的形式让数据更新的事件不需要开发人员手动去编写特殊用例,而是自动地双向同步。数据绑定你可以认为是Observer模式或者是Publish/Subscribe模式,原理都是为了用一种统一的集中的方式实现频繁需要被实现的数据更新问题

比起MVP,MVVM不仅简化了业务与界面的依赖关系,还优化了数据频繁更新的解决方案,甚至可以说提供了一种有效的解决模式

至此,我们能理解为什么许多人认为MVVM是最好的一种模式,没有之一。但事实上,MVVM也是依赖于我们至今所讲的“特有的情境”

当然,最优雅的也是第一个能作代表的实践就是Windows Presentation Foundation(WPF)了。

 

 

Web

之上,我们在模式演变的推论基本上都还是基于桌面软件的,但是过去十年却是互联网的时代。实际上大部分让大家争议的并不是在桌面领域最合适的是那个,而是在Web领域的模式问题,也就是在B/S场景下的问题

当软件离开单机,去到网络的时候,因为场景变了,所以原有的解决方案也变了,不过需求依然是不变的。我们依然要解决的问题是用户交互与数据更新的问题,还有维护等等的问题

当场景变到Web的时候,我们发现MVVM用来做服务端是极其不适用的,至少现在是不适用的。而MVP你提都不用提。为什么呢?因为:

  • 网络资源成本过高
  • 开发成本过高

问大家一个问题,当一个网页的数据更新后,你希望更新用户看到的数据,你会怎么做?

一般情况下,你会:

window.location.reload();

就算你不这么做,用户也会:

F5

 

就像之前说的,我们会选择更直接的方式解决问题。直接刷新页面的原因是因为这样更直接,更容易解决数据更新的问题。

很多时候你不会愿意为了一个数据更新写一个AJAX,更别说这个AJAX要带来Loading、事件顺序处理、网络问题、异常处理等等,这就是开发成本过高

另一个网络成本过高就更容易解释了,虽然宽带是基本包月的,但也不带这么用的,何况还有移动用户。更主要的原因是,在本地软件,更新数据是一个引用问题,而在网络应用上,这是一个传输问题。传输成本远高于引用成本,引用之上顶多是在本地内存中再进行一次内存拷贝。

这个时候,我们会更倾向于用MVC模式,因为在Web层面,我们更倾向于一次性更新数据

 

 

Web的MVVM

所有问题都不是问题,就算有问题也要解决问题。

为什么这个标题下突然冒出这么一句话?我想说的是,需求依旧是不变的,是推动进步的原动力

还有我之前说过,当我们讨论或者争论一个问题的时候,问题的对象已经发生改变了,而且这次是在我们讨论这个问题之前已经发生改变了。

网络资源成本不断下降,相信已经不需要多提及。摩尔定律和相近的一些原理正在发挥着它应用的作用,网络带宽越来越高、相应速度越来越快。

如果传输因为相对成本下降而导致数据传输的成本低于开发人员拒绝客户的成本,那么它就会被实现而不是被拒绝

另外还有一点就是因为技术的进步,技术的资源不断被更大规模地压榨,需求也不断地增长,那么需求始终会增长超过相对不变的开发成本的。比如jQuery的出现解决了很多问题,我们现在更多地去使用AJAX,哪怕很大一部分依然是为了解决网络资源不足的问题;我们会用更多的样式代码而用了相对更少的图片;我们不再那么依赖Flash一类的矢量图解决方案而直接录制视频。

至少上一节我们说到的两个导致大家选用MVC的问题都正在被解决,所以我们有理由相信未来Web不仅仅需要MVC,可能会需要MVVM或其他解决方案。至少我们能理解容易理解为什么前端会出现一些MVVM的框架,比如先驱knockout.js和AngularJs。这些框架本身的好坏就不作讨论了,因为我们讨论的是模式。

在Web上,MVVM的对比对象就不是MVC,而是Code Block

数据即时更新的需求在扩大,但未必有达到一定要用MVVM这一等级的高大上的模式,实际上如果你要更新一个数据,你还是会采取:

$('.notice').html('发送成功!');

因为......我们依然会采取更直接的方式解决问题......

实际上,现在Web MVVM主要并不是用在了Web或者Wap上,而是移动App上。按照前面的说法,只可能是:

  • HTML+JS比原生在一些场景上更适合Native
  • 在移动App上比Web上更适合使用MVVM

哪怕是Native开发,实际上iOS的开发上也是用类似的数据绑定的方式的。这里也不深究了,毕竟我也不算懂iOS。

要说的是,在Web MVVM或者Web的模式上,也就是Web的富应用上,现在还不过是个初期由膨胀的需求推动的阶段重要的不是技术会怎么走,而是需求和客观条件会怎么走

可能Webform会因为高速开发而焕发第二春,它的AJAX的模式也十分满足于简单开发,但似乎大家需要的不是GUI式的网页。

 

 

结尾语

我们不一定需要MVVM,但我们一定需要更强大的方式去解决不断膨胀的Web需求。

我们可以预见的是:

  • 会有更强大的浏览器
  • 会有更强大的JavaScript或者框架
  • 会有更加适合的模式

除去客气话的部分,我还是想说,在不同的需求下其实有最适合的解决方案,通常让我们纠结的不是因为哪个解决方案更好,而是我们看到的条件不够多

编译语言当然比解释语言效率高,但考虑到开发和维护成本,JavaScript等始终会大行其道,比如Node.JS、Python;.NET和微软当然很强大,移植.NET到其他平台也很容易,但微软是家有自己商业模式和要赚钱的公司;当然有些实践和技术更好,但其他开发人员会避开甚至否定自己不擅长的东西,大家都喜欢确定的东西;有些技术更强大,但是只是基于特殊的客观条件和需求,如果你想做大,要么创造客观条件,要么把它结合需求......



来自博客园大牛的文章