当我们在面试的时候被问到谈谈你对MVC,MVP,MVVM的理解。
我们该如何回答,下面我们将对这些模式进行总结。
一、web1.0时代
在web1.0
时代,当时并没有前端这个概念,当时如果要开发一个项目,通过java/php/.net
进行开发,项目通常由多个aspx/jsp/php
文件编写,每一个文件同时包含html,css,js,c#/java/php
代码,系统架构如下所示。
这种架构的好处就是简单快捷,但是缺点是jsp
代码难以维护。
为了让开发快捷,然后代码更加易于维护,现在后端衍生了MVC
模式,前端展示以模板的形式出现,此时前后端职责更加清晰,代码也易于维护。此时前端只完成后端MVC
模式下的view
层。具体如下所示。
此时这种开发模式中存在的缺点就是前端的开发效率不高。
二、web2.0时代
自动ajax
的出现,前后端的职责就更加清晰,此时前端可以通过ajax
和后台进行交互,因此,整体架构图可以如下所示。
通过ajax
与后台服务器进行数据交互,前端开发人员只需要编写相关的代码,数据完全由后台进行提供,并且ajax
可以实现异步刷新,减少服务器载荷,此时才出现真正意义上的前端工程师。但是此时在前端一些任何代码都写在一起,不利于前端的后期维护。此时前端也开始存在自己的MVC
架构。
三、前后端分离后的架构演变——MVC
前端的MVC
和后端的类似,具备这View
,Controller
和model
。view:
负责保存应用数据,与后端数据进行同步。controller:
负责业务逻辑,根据用户行为对model
数据进行修改。view:
负责视图逻辑,将model
中的数据可视化出来。
但是在开发中,我们经常会看到另一种模式,如下图所示。
这种模式在开发中更加灵活,但是也存在一些问题。1、数据流比较混乱
,如上图所示,我们view
可以更改model
中的数据,controller
可以更改model
中数据,此时我们无法确定model
中的数据是被谁更改的,更无法追中。2、controller比较单薄,view比较庞大
:我们会更加喜欢直接通过view
来修改model
中的数据,所以更多的代码会放在view
模块中,导致view
中的数据比较庞大。
四、前后端分离后的架构演变——MVPMVP
与MVC
很接近,P指的是Presenter
,presenter
可以理解为中间人,它负责着view
和model
之间的数据流动,防止view
和model
之间直接交流。如下图所示。
presenter
为中间层,这种交互方式相比于MVC
少了一些灵活,并且此时的view
的体积要小很多,相反presenter
的代码体积就大的多,导致代码难以维护。
五、前后端分离后的架构演变——MVVM
首先何为MVVM
,MVVM
可以分解为Model-view-ViewModel
,可以理解为在presenter
上的进阶版。
viewModel
通过实现一套数据响应式机制自动响应model
中的数据变化。
同时viewModel
会实现一套更新策略自动数据变化更新视图。
通过事件监听响应view
中的用户交互修改model
中的数据。
这样在viewModel
中就减少操作大量的DOM
。MVVM
在保持view
和model
松耦合得同时,还减少了维护他们关系的代码,使用户更加专注于业务逻辑,兼顾开发效率和维护。
六、总结
这三种都是框架模式,他们的目标都是为了解决model
和view
之间的耦合度问题。MVC
模式出现较早主要应用在后端,如spring MVC
,等,在前端领域早期也有应用,如Backbone.js
,他的优点是分层清晰,缺点是数据流混乱,并且灵活性带来了难以维护的问题。MVP
模式在是MVC
的进化形式,Presenter
作为中间层负责MV之间的通信,解决两者耦合问题,但p
层过于臃肿会导致维护问题。MVVM
模式在前端领域有广泛的应用,它不仅解决MV
耦合问题,还解决了在维护MC
之间的关系产生了大量代码的问题,提高了开发效率和可读性。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_47450807/article/details/123273513
内容来源于网络,如有侵权,请联系作者删除!