MVC、MVP和MVVM的区别
前言
在web1.0时代时,那个时候程序猿还没有前后端之分,更程序员开发的时候,都是要前后端一起写的,前后端的代码都是杂揉在一起,如图下
这种开发模式的话,开发的时候因为不需要和其他人员沟通协作,前后端都是代码都是写在一起,优缺点如下:
优点:简单快捷
缺点:代码难以维护
为了让开发更佳便捷,代码更易于维护,前后端职责更加清晰。便衍生出MVC开发模式和框架,前端展示以模板的形式出现。我当时实习的时候,所在的公司开发模式就是使用这种开发模式,开发模式如图:
使用这种分层架构,前后端职责清晰,代码也易于维护。但是这里的MVC仅限于后端,前后端形成了一定的分离,前端只完成了后端开发中的view层
缺点:
1. 前端页面开发效率不高
2. 前后端职责不够清晰
自从Gmail的出现,ajax技术开始风靡全球。有了ajax之后,前后端的职责就更加清晰了。因为前端可以通过ajax与后端进行数据交互,因此,整体的架构图也就变化成了下面这幅图。
通过ajax与后台服务器进行数据交换,前端开发人员,只需要开发页面这部分内容,数据可由后台进行提供。而且ajax可以是的页面实现部分,减少了服务端负载和流量消耗,用户体验也更佳。这时,才开始有专职的前端工程师,同时前端的类库也慢慢的开始发展,例如当时最著名的jquery。
缺点:缺乏可行的开发模式承载更复杂的业务需求,页面内容都杂糅在一起,一旦应用规模增大,就会导致项目难以维护。因此,前端的MVC框架也就随之而来了
前后端分离后的架构演变--MVC、MVP、MVVM
MVC
前端的MVC与后端类似,具备着view、controller和Model。
Model:负责保存应用数据,与后端数据进行同步
Controller:负责业务逻辑,根据用户行为对model数据进行修改
View:负责视图展示,将model中的数据可视化出来
三者形成了如图所示的模型:
实际开发中,我们往往会看到另外一种模式:
这种模式在开发中更加的灵活,backbone.js就是这种模式
但是,这种灵活可能导致严重的问题:
数据流混乱。如下图:
view比较庞大,而Controller比较单薄:由于很多的开发者都会在view中写一些逻辑代码,逐渐的就导致view中的内容越来越庞大,而controller变得越来越单薄
既然有缺陷,就会有变革,前端的变化中,似乎跳过了MVP这种模式,是因为Angular早早的将MVVM框架带入了前端。MVP模式虽然前端开发中并不常见,但是在安卓等原生开发中,开发中还是会考虑它
MVP
MVP和MVC很接近,P指的是Presenter,presenter可以理解为一个中间人,它负责着View和Model之间的数据流动 ,防止View和model之间直接交流。我们可以看一下图示
我们通过图可以看到,presenter负责和Model进行双向交互,这种交互方式,相对于MVC来说,少了一些灵活,View变成了被动视图,并且本身变得很小,虽然它分了view和model,但是应用逐渐变大之后,导致presenter的体积增大,难以维护,要解决这个问题。或许可以从MVVM的思想中找到答案
MVVM
什么是MVVM?MVVM可以分解为Model-View—ViewModel,ViewModel可以理解为在presenter基础上的进阶版本,如图所示:
ViewModel通过实现一套数据响应式机制自动响应Model中数据变化;
同时ViewModel会实现一套更新策略自动将数据变化转换为视图更新
通过事件监听响应View中交互修改Model中数据
这样在ViewModel中就娴熟了大量DOM操作代码
MVVM在保持VIEW和Model松耦合的同时,还减少了维护他们关系的代码,使用户专注于业务逻辑,兼顾开发效率和可维护性
总结:
这三者都是框架模式,他们设计的目标都是为了解决Model和View的耦合问题。
MVC模式出现较早,主要应用在后端,如Spring MVC、Asp.NET MVC等,在前端领域的早期也有应用,如Backbone.js。它的优点是分层清晰,缺点是数据流混乱,灵活性带来的维护性问题
MVP模式是在MVC的进化形式,Presenter作为中间层负责MV通信,解决了两者耦合问题,但P层过于臃肿会导致维护问题
MVVM模式是目前前端的主流模式,在前端领域有着广泛应用,它不仅解决MV耦合问题,还同时解决了维护两者映射关系的大量繁杂代码和DOM操作代码,在提高开发效率、可读性同时还保持了优越的性能表现
MVC、MVP和MVVM的区别的更多相关文章
- MVC MVP 和 MVVM的图示
一直对于这些什么MVC MVP 和 MVVM都是云里雾里的 完全分不清楚 感觉jq上也没怎么用过,理解也很片面,画几张图也许能够大体分清他们之间的区别. 1.MVC(Model-View-Contro ...
- 【设计模式】MVC,MVP 和 MVVM 的区别
复杂的软件必须有清晰合理的架构,否则无法开发和维护. MVC(Model-View-Controller)是最常见的软件架构之一,业界有着广泛应用.它本身很容易理解,但是要讲清楚,它与衍生的 MVP ...
- MVC,MVP 和 MVVM 的区别之处
其实我一直以来,虽然做的是前端的工作,但是有一个疑问,就是什么是mvc模式,虽然大概知道,但是具体确实说不上来的的,今天,我就好好总结一下mvc ,mvp,mvvm模式的区别与相同. 1.MVC模式: ...
- [转载]Android MVC,MVP和MVVM 思想&例子
在Android开发中,常采用 MVC(Model-View-Controller)或者MVP(Model-View-Presenter) 等框架模式.设计如图 mvc mvp 可以看出,在 MV ...
- MVC,MVP和MVVM的区别
MVC 转载标名出处 dub 从这幅图可以看到,我们可以看到在MVC里,View是可以直接访问Model的!从而,View里会包含Model信息,不可避免的还要包括一些业务逻辑. 在MVC模型 ...
- MVC, MVP, MVVM比较以及区别(上)
MVC, MVP和MVVM都是用来解决界面呈现和逻辑代码分离而出现的模式.以前只是对它们有部分的了解,没有深入的研究过,对于一些里面的概念和区别也是一知半解.现在一边查资料,并结合自己的理解,来谈一下 ...
- MVC, MVP, MVVM比较以及区别
MVC, MVP和MVVM都是用来解决界面呈现和逻辑代码分离而出现的模式.以前只是对它们有部分的了解,没有深入的研究过,对于一些里面的概念和区别也是一知半解.现在一边查资料,并结合自己的理解,来谈一下 ...
- MVC, MVP, MVVM比较以及区别(下)
上一篇得到大家的关注,非常感谢.一些朋友评论中,希望快点出下一篇.由于自己对于这些模式的理解也是有限,所以这一篇来得迟了一些.对于这些模式的比较,是结合自己的理解,一些地方不一定准确,但是只有亮出自己 ...
- 转: GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean
十年前,Martin Fowler撰写了 GUI Architectures 一文,至今被奉为经典.本文所谈的所谓架构二字,核心即是对于对于富客户端的 代码组织/职责划分 .纵览这十年内的架构模式变迁 ...
随机推荐
- 网络编程Netty入门:责任链模式介绍
目录 责任链模式 责任链模式的简单实现 Netty中的ChannelPipeline责任链 服务端接收客户端连接 pipeline初始化 入站事件和出站事件 Pipeline中的Handler Pip ...
- 在Android、iOS、Web多平台使用AppGallery Connect性能管理服务
性能管理(App Performance Management,简称APM)是华为应用市场AppGallery Connect(简称AGC)质量系列服务中的其中一项,可以提供分钟级应用性能监控能力,支 ...
- hdu1261 JAVA
题意: 一个A和两个B一共可以组成三种字符串:"ABB","BAB","BBA".给定若干字母和它们相应的个数,计算一共可以组成多少个不同的 ...
- 设计模式-UML图简单介绍
直接上法宝: 1.类(Class) 类图分三层: 第一层显示类的名称,如果是抽象类,则就用斜体显示. 第二层是类的特性,通常就是字段和属性. 第三层是类的操作,通常是方 ...
- 绕过网站WAF(图片绕过)
当我们在渗透一个网站的时候,很多时候,会遇到下面这种情况.网站装有WAF,把我们的SQL注入语句给拦截了. 这就是网站的安全狗 此时,我们的渗透会陷入僵局.到底应该如何才能让我们的语句绕过安全狗的检查 ...
- Win64 驱动内核编程-25.X64枚举和隐藏内核模块
X64枚举和隐藏内核模块 在 WIN64 上枚举内核模块的人方法:使用 ZwQuerySystemInformation 的第 11 号功能和枚举 KLDR_DATA_TABLE_ENTRY 中的 I ...
- Andrew Ng机器学习算法入门(二):机器学习分类
机器学习的定义 Arthur Samuel给出的定义,Field of Study that gives computers the ability to learn without being ex ...
- 依赖倒置原则(Dependence Inversion Principle)
目录 背景 说明 例子 "倒置"的解释 总结 参考资料 背景 这几天组内的人一起学习DDD,里面再次提到了依赖倒置原则,在这学习过程中,大家又讨论了一下依赖倒置原则. 说明 采用依 ...
- ArcGIS JS API使用PrintTask打印地图问题解决汇总
环境:来源于工作过程,使用的API是 arcgis js 3.* 3系API,4.*暂时没测试: 1.数据与打印服务跨域情况下,不能打印问题. 一般情况下,我们发布的数据服务和打印服务是在一台服务 ...
- 实施CRM系统后 企业客户服务的改变
通过实施CRM客户管理系统,企业的竞争力和盈利能力得到大幅提高.在这个过程中,客户服务不仅能够持续的满足客户的需求,还能够促进客户与企业建立长期的互惠互利的良好客户关系,这也为企业赢得了更多的商机和利 ...