MVC、MVP、MVVM三种架构模式的对比

2020年11月15日MobileOffice·HomeOffice总第435期MVC、MVP、MVVM三种架构模式的对比*游俊慧（广州工程技术职业学院广州510925）摘要：移动互联网的发展对Web项目的可扩展性、可复用性、维护成本等提出了更高的要求，如何选择合适的软件架构模式，成为众多项目团队在创建项目之初面临的重要问题。本文选取了目前最流行的三大架构模式：MVC、MVP、MVVM，通过从概念、流程、特点、应用场合等多个方面对三者进行了综合比较，为不同Web项目开发中的架构模式选取给出了合理的依据，有利于增强Web项目的健壮性。（MVC）（MVP）关键词：模型-视图-控制器；模型-视图-展示器；模型-视图-视图模型（（MVVM）；架构模式中图分类号:TP311.52文献标识码:A文章编号:7644ContrastonMVC，MVPandMVVMtheThreeArchitecturalPatternsYOUJunhui（GuangzhouInstituteofTechnologyGuangzhou510925）Abstract：WiththedevelopmentofmobileInternet，theexpandability，ore，howtochooseasuitablesoftwarthesis，theautho,MVC，MVPandMVVM，accordingtotheirconcepts，processes，ovidesreason-ablegistfordifferentWebprojects’development，ds：MVC；MVP；MVVM；architecturalpattern0引言随着移动互联应用的飞速发展，Web项目被应用于更复杂的业务场景中。早期的Web开发模式由于前后端的高度耦直接导致了项目的可扩展合性，业务逻辑与展现逻辑相混合，性差、可重用度低、代码维护成本高等问题[1]，逐渐不能满足产品快速迭代的要求及用户日益升高的对前端应用的体验要求，于是从Web2.0时代到如今的Web3.0时代，MVC、MVP、MVVM等一系列的软件架构模式应运而生。这些模式通过对程序模块化从而降低项目应用前后端的耦合度[2]；同时大大提高了程序员的开发效率、代码的可维护性及对用户的友好性。它MVC模式最早由TrygveReenskaug于1978年提出，最初源于服务器端的Web开发，后来由于能够满足客户端对复杂度、丰富度的要求，而逐渐被应用到Web前端开发当中。在采用MVC模式设计WebUI应用时，一般会根据开（Model）（View）（Con-发框架的特点对模型、视图和控制器同时为它们之间的troller）这三元素设置一个明确的界限，交互制订一个严格的规则。后来，在软件发展历程中又相继涌现了一批MVC模式的变体，其中比较主流的有MVP但对三元素之和MVVM，它们都遵循MVC所定义的规则，由于MVP、间的交互制订了更为严格的规范。虽然，MVVM的兴起，MVC在Android中的应用非常少，但MVP、MVVM因此，在研究MVP和MVVM模式都是由MVC衍生而来的。的特点时，有必要结合MVC一并进行讨论和比较。1MVC模式1.1MVC概念MVC全称是模型-视图-控制器（Model-View-Con-数据、界面显示这三troller），其目标在于分离出业务逻辑、形成松散耦合、可部分的代码，并组织成三层的模型结构，复用性高的应用程序。这样，当需要对用户界面和交互进行个性化定制或改进时，就不需要重写业务逻辑[3]，Web项目将更易于开发和维护。MVC模式将应用程序划分为如下三个部分：模型，被观察者（Model）：用于封装与应用程序的业务逻辑相关的数据（如：数据库）以及对数据的处理方法，其中包含增加、删除和通知观察者的方法。视图，观察者（View）：作为一种可视化的表示，是经过渲染后的直接面向用户的界面效果，比如：通过浏览器打开的网页、通过移动端设备打开的界面等。控制器（Controller）：作为视图与模型之间的中间枢纽，其典型任务是从视图读取数据，接收用户输入，向模型发送数据。1.2MVC流程（如图1所示）：MVC模式的执行流程1.2.1View接收用户操作，传递给Controller，由Con-troller决定调用哪个方法来处理。1.2.2Controller根据用户的具体操作，通过直接调用*基金项目：本文系2018年广东省普通高校特色创新类项目（2018GKTSCX096）“基于情境感知的广播电视群组推荐关键技术研究”研究成果之一。办公自动化杂志·11·

2020年11月15日图1MVC流程Model提供的方法来操作Model，或通过其他服务方法来对Model进行操作。1.2.3当Model发生变化时，通过观察者模式通知View，View再从Model中取出数据完成界面刷新。1.3MVC应用场合MVC最大的的优势是将视图展示和业务逻辑清晰地分离开来，能够满足不同用户通过不同类型设备对数据进行访问的需求，其分层结构也有助于管理复杂的应用程序，大大降低了设计大型应用程序的难度。然而，由于MVC内部原理的复杂且缺乏明确的定义，设计者需要花费相当一部分时间来考虑如何把MVC运用到应用程序中;另外，由于模型和视图需要严格分离，每个构件都需要经过彻底的测试方可使用。基于以上原因，在过去一段时间里，MVC曾被认为不适用于中小型项目，但随着现今越来越多的软件设计框架能够直接提供对MVC的支持，此问题已不复存在。对于开发具有多种用户界面的大型应用程序而言，尽管MVC模式仍需要花费较大的工作量，但就总体来看，它仍然能使应用程序的健壮性、代码重用性更上一个台阶，并大大提高软件开发效率。2MVP模式2.1MVP概念MVP全称是模型-视图-展示器(Model-View-Presen-ter），它是经典MVC模式的衍生模式，因此与MVC有着许多相似之处：Controller/Presenter负责业务逻辑，Model负责管理数据，View负责界面显示。而不同之处则在于Controller更名为展示器(Presenter），以及通信方向的改变。在MVP模式中，P代表展示器(Presenter），它是从MVC的View中解耦出来并通过接口与View通信的界面逻辑组件。View中不再部署任何业务逻辑，所有业务逻辑均由Presenter实现，这使得View层的主动性被清除，变得轻薄许多，因此View在MVP中也被称为“被动视图”。2.2MVP流程MVP的执行流程（如图2所示）与MVC不同，在MVP中，View与Model不再直接通信，两者之间的所有交互均发生在Presenter内部。而View与Presenter之间、Presenter与Model之间均实现了双向通信。Presenter负责观察Model，一旦Model发生改变则对View进行更新。2.3MVP应用场合虽然Presenter负责视图的更新，但其与具体的视图并没有直接关联，而是通过定义好的接口进行交互，这样在变更·12·办公自动化杂志总第435期MobileOffice·HomeOffice图2MVP流程View时就可以保持Presenter不变，从而实现重用；同时，由于业务逻辑都封装在Presenter，测试人员就可以脱离用户接口来测试这些逻辑，使得单元测试在一定程度上更加便捷。然而事物总有两面性，如果从另一个角度思考，由于用户界面可能会非常复杂，甚至存在多种不同的UI，一旦View发生改变，View与Presenter之间的接口也必然需要变更，这就意味着当测试的UI很多时就需要一个庞大的View接口群。目前，MVP模式被更多地用在Android开发当中。3MVVM模式3.1MVVM概念MVVM模式正是为解决MVP中UI种类变多，接口也会不断增加的问题而提出。MVVM模式全称是模型-视图-视图模型(Mod-el-View-ViewModel），它和MVC、MVP类似，主要目的都是为了实现视图和模型的分离，不同的是MVVM中，View与Model的交互通过ViewModel来实现。ViewModel是MVVM的核心，它通过DataBinding实现View与Model之间的双向绑定，其内容包括数据状态处理、数据绑定及数据转换[4]。例如，View中某处的状态和Model中某部分数据绑定在一起，这部分数据一旦变更将会反映到View层。而这个机制通过ViewModel来实现。ViewModel，即视图模型，是一个专门用于数据转换的控制器，它可以把对象信息转换为视图信息，将命令从视图携带到对象。它通过View发布对象的公共数据，同时向视图提供数据和方法。View和ViewModel之间使用DataBinding及其事件进行通信。View的用户接口事件仍然由View自身处理，并把相关事件映射到ViewModel，以实现View中的对象与视图模型内容的同步，且可通过双向数据绑定进行更新。因此，程序员只需编写包含声明绑定的视图模板，以及ViewModel中的数据变更逻辑，就能使View获得响应式的更新。3.2MVVM流程在MVVM流程（如图3所示）中，View仍然代表前端的界面，Model仍然代表后端传递的数据，而ViewModel作为核心有着两个传递方向：3.2.1将Model转换成View，即将后端传递的数据转换成用户界面，实现方式为数据绑定；3.2.2将View转换成Model，即将用户界面转换成后端数据，实现方式为DOM事件监听。渊下转第27页冤

2020年11月15日Security总第435期“雨课堂”里的PPT操作视频，学习积极性。教学过程中，学生可以通过在电脑上实际操作，并能够匿名发送答疑弹幕，教师能够快速及时地解答。教师使用“雨课堂”提供的实时答题功“雨课堂”发布能，检测学生对知识的掌握情况。最后通过作业，要求学生在规定时间提交作业，考察学生对知识掌握的深度和广度。“雨课堂”教学平台，解在课程教学实施过程中，采用决了学生操作跟不上老师的节奏，又不好意思单独问老师的害羞心理。学生通过反复观看雨课堂的视频，能够巩固的在线测试，能够提自己不熟悉的知识点；而且“雨课堂”醒和督促学生复习掌握不牢的知识点。而传统的当面教学课后复习的情况。难以掌握学生课前预习、和采用传统当面授在平行班教学中对比采用“雨课堂”课模式的学生成绩、学生反馈、教师反馈，对比两种方式的教学效果。学生成绩比对如下图1：参考文献[1]雨课堂.雨课堂.雨课堂.[2020-05-24].[2]nternet.[2014-08-16].[3]网易正式推出"全球名校视频公开课项目[J].网易科技[2019-09-20].作者简介图1学生成绩比对采用匿名提交单在使用“雨课堂”平台教学的班级中，“雨课堂”的反馈，项选择的方式，统计学生对使用85%的学提升课堂效率，提高生认为使用“雨课堂”能够提高成绩，渊上接第12页冤MVVM，倾向建议使用官方的架构组件ViewModel、LiveData等去实现MVVM。（1982年1月-）高校讲师，张丽英，女，湖南省邵东县人，计算机应用，数据分析。硕士研究生。研究方向：教授，研究生。龚斌（1971年4月-），男，云南省昆明人，龙晓燕（1971年10月-），女，云南省丽江人，教授，研究生。综合学生反馈、教师反馈，发现教师认为“雨课堂”可以提高学生的预习效率，并能及时看到学生的反馈，督促提醒学生做好课前预习，对明确学习任务，提升教学效果具有积极意义，采用“雨课堂”授课的班级学生成绩比传统课“雨课堂”解决了上课羞于提堂的学生成绩要高。学生认为认为“雨课堂”问，能够通过“雨课堂”及时得到教师帮助，提高了课堂教学效果。综上所述，采用“雨课堂”平台实施线上与线下结合的教学模式，取得较好的教学效果。对提升学生学习积极性、提升课堂效率、提高学生成绩有较大的帮助。4结论MVC、MVP和MVVM都是常见的软件架构模式，它们都通过分离关注点来改进代码的组织方式。笔者认为这三种模式都各有其优缺点，不能武断地评价哪种绝对优秀。无论在项目中采用哪种架构模式，只要运用得当，都可以图3MVVM流程得到良好的效果。参考文献[1]徐鹏涛.基于Vue的前端开发框架的设计与实现[D].山东大学，2020.叶奕.在前端开发应用中的性能影响研究[J].[2]唐斌斌，电子制作，2020（5）：49-50+59.朱珍元.基于MVVM模式的Web开发研究[J].菏[3]王鹤琴，泽学院学报，2019（4）：7-13.[4]邓成，孙书会.MVVM设计模式的前端应用[J].电脑知识与技术，2019（10）：249-250.作者简介游俊慧（1983-），女，硕士，讲师，广东省佛山市南海人。主软件开发。要研究方向：3.3MVVM应用场合在MVVM模式下View和Model不能直接通信，两者的通信只能通过ViewModel来实现。ViewModel通常要实现一个观察者，当数据发生变化，ViewModel能够监听到数据的变化，然后通知对应的视图做自动更新；而当用户操作视再通知数据做改动，图，ViewModel也能监听到视图的变化，从而形成数据的双向绑定。这使得MVVM更适用于数据驱动的场景，尤其是数据操作特别频繁的场景。但也正是由于数据和视图的双向绑定，导致出现问题时不太好定位来源，有可能由数据问题导致、也有可能由业务逻辑中对视图属性的修改导致。若项目中有计划采用办公自动化杂志·27·