MVC-MVP-MVVM框架模式分析

MVC(Model-View-Controller)

MVC 架构模式图(经典版)

注:实际上,Model和View永远不能相互通信,只能通过Controller传递;上图只是MVC模式的经典图。

MVC一般流程:
用户操作->View(负责接收用户的输入操作)->Controller(业务逻辑处理)->Model(数据持久化)->View(将结果反馈给View),单向通信。

各模块功能:
视图(View):用户界面。(传送指令到 Controller)
控制器(Controller):业务逻辑 (完成业务逻辑后,要求 Model 改变状态)

  • 作用:负责将 View 中用户的动作传达给 Model,将 Model 的数据通过 View 展现出来
  • 负责:显示界面、响应用户的操作、网络请求以及与 Model 交互

模型(Model):数据保存、数据持久化。(将新的数据发送到 View,用户得到反馈)

缺点:
1.Controller逻辑复杂,难以维护。
2.Controller 和 View 紧耦合,无法测试。

MVP(Model-View-Presenter)

特点:

  1. 各部分之间的通信,都是双向的。
  2. View 与 Model 不发生联系,都通过 Presenter 传递。
  3. View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。

MVVM(Model-View-ViewModel)

各模块功能:
Model【模型】:指的是后端传递的数据。
View【视图】:指的是所看到的页面。
ViewModel【视图模型】:mvvm模式的核心,它是连接view和model的桥梁。
**ViewModel 负责: **
1.校验用户输入
2.网络请求
3.展示层的逻辑,比如格式化字符串
4.其他不能放入 Model,与 View 无关的逻辑
作用:
1、将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。
2、将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。
这两个转化的实现过程,我们称之为数据的双向绑定

详细流程图:

注:
1.视图和模型是不能直接通信的。
2.与MVC相比,把原来View和Controller层的业务逻辑和页面逻辑等剥离出来放到ViewModel层。

在vue前端框架中,MVVM的应用:
ViewModel通常要实现一个observer观察者,当数据发生变化,ViewModel能够监听到数据的这种变化,然后通知到对应的视图做自动更新;而当用户操作视图,ViewModel也能监听到视图的变化,然后通知数据做改动,这实际上就实现了数据的双向绑定。并且MVVM中的View 和 ViewModel可以互相通信

posted @ 2018-10-13 18:08  adash  阅读(219)  评论(0编辑  收藏  举报