MVVM MVC MVP到底是什么

复杂的软件必须有清晰合理的架构,否则无法开发和维护。在这里简述一下这三种结构的区别。

MVC

MVC(Model-View-Controller)这个应该是应用最广泛也是最早的开发架构。
MVC模式的意思是,软件可以分成三个部分。
视图(View):用户界面。
控制器(Controller):业务逻辑
模型(Model):数据保存

Paste_Image.png
View传送指令到Controller,Controller完成逻辑改变Model状态。Model状态的改变影响View的变化。
举个例子:
在Android程序中,界面中有一个按钮(View),点击按钮,通过网络类进行网络请求(Controller),请求完成通过Bean类存储数据(Model),然后根据数据更新界面显示(View)
所有的通信都是单向的,按钮能够控制网络更新,但是网络类不能更改界面。网络类能更新数据,但是数据类不能控制网络,数据类能更新界面,但是界面类不能更新数据。

MVP

MVP只是将MVC中的C改成了P(Presenter),同时也改变了通信方向。

Paste_Image.png
更部分之间的通信都是双向的,而且view与model不直接发生联系。都是通过Presenter传递。
这种模型也曾风靡一时,曾经我做过的一个项目就是以此为框架的。
这里举一个简单的例子,比如在viewpager中有多个fragmen,每个fragment的布局相似,但是数据模型不同,我们可以让view进行复用,每个view设置不同的Presenter,不同的Presenter有不同的Model,例如,有一个界面展示相关用户列表(数据模型User),一个展示消息列表(数据模型Message)。对于数据的下载处理,可以放在Presenter中,view中不放任何业务处理逻辑,所有的逻辑都在Presenter中。这样更加便于开发和维护。

MVVM

MVVM 模式将 Presenter 改名为 ViewModel,基本上与 MVP 模式完全一致。

Paste_Image.png

唯一的区别是,它采用双向绑定:Model的变动,自动反映在 ViewModel,反之亦然。
由于使用MVP会使Presenter中的代码逻辑变得臃肿,所有用ViewModel代替。ViewModel和View之间不是通信的关系而是绑定的关系。这意味着当你更新viewmodel层的数据的时候,view层会相应的变动ui。
关于更多的MVVM,可以关注一下我的下一篇博客 DataBinding。

更多的开发知识,可以关注我的公众号:

Paste_Image.png

### MVCMVPMVVM 的概念与区别 #### 什么是 MVCMVC 是一种软件架构设计模式,全称为 Model-View-Controller。它将应用程序分为三个主要部分:模型(Model)、视图(View)和控制器(Controller)。 - **Model** 负责数据逻辑处理以及业务规则定义[^1]。 - **View** 显示界面给用户并接收用户的输入操作。 - **Controller** 则作为中间层连接 View 和 Model,负责响应用户请求并对两者进行协调。 其核心特点是 Controller 承担了大部分交互职责,而 View 只能单向依赖于 Controller[^2]。 #### 什么是 MVPMVP 即 Modal-View-Presenter,是一种改进版的设计模式,在某些场景下可以替代传统的 MVC 模式。它的结构也由三部分组成:Modal、View 和 Presenter。 - **Presenter** 成为了控制的核心组件,承担起原本属于 Controller 的角色,并且更进一步解耦了 View 和 Model[^4]。 - 它允许 View 和 Presenter 进行双向通信,即 View 将事件通知到 Presenter 后,再由后者决定如何更新 UI 或者调用服务端接口获取新数据。 相比 MVC 来说,MVP 更加注重测试驱动开发 (TDD),因为所有的业务逻辑都集中在 Presenter 中,便于单元测试[^3]。 #### 什么是 MVVMMVVM 表示 Model-View-ViewModel,主要用于现代前端框架如 Vue.js 和 AngularJS 当中的状态管理机制。在这种模式里引入了一个新的抽象层次—— ViewModel: - **ViewModel** 提供了一种绑定机制让开发者能够轻松同步 Model 数据变化至对应的 Views 上去显示出来;同时也支持反方向的操作即将修改后的表单项反馈回原始的数据源中保存起来。 - 使用观察者模式使得当任何一个属性发生变化时都会自动触发关联 DOM 元素重新渲染过程从而减少手动刷新页面的工作量。 目前该方法特别适合用于构建复杂的 Web 应用程序尤其是那些需要频繁动态加载内容或者实时反映后台数据库更改情况下的项目之中。 ```javascript // 示例代码展示 MVVM 实现方式之一 const app = new Vue({ el: '#app', data() { return { message: 'Hello world!' } }, }); ``` 上述 JavaScript 片段演示了基于 Vue.js 构建的一个小型 MVVM 结构实例,其中 `data` 函数返回的对象就是我们的 ViewModel 部分。 --- ### 总结比较表格 | 设计模式 | 主要组成部分 | 控制器/中介位置 | 测试友好度 | |----------|--------------------|-------------------------|---------------| | MVC | Model, View, Controller | Controller | 较低 | | MVP | Model, View, Presenter | Presenter | 较高 | | MVVM | Model, View, ViewModel | ViewModel via Binding | 很高 | 尽管这三种模式都有各自的应用领域,但在当前的技术趋势下,由于 MVVM 对应着更为简洁直观的状态管理和更高的可维护性,因此越来越多地被采纳到了像 React/Vue 等主流前端库里面去了。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值