基于阮一峰对MVC,MVP,MVVM的图示自己的理解

最新推荐文章于 2024-05-23 09:18:11 发布
原创 最新推荐文章于 2024-05-23 09:18:11 发布 · 1.5k 阅读 · 4 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍了MVC、MVP和MVVM三种软件设计模式，详细解析了各部分职责和通信方式。在MVC中，View、Controller和Model通过单向通信交互；MVP模式中，Presenter作为中间者实现双向通信，View变得被动；而在MVVM模式下，双向绑定使得View和ViewModel同步变化，常见于Angular和Ember等框架。

阮一峰大佬对架构的解释还是很到位的

一、MVC

  • 视图（View）：
  • 用户界面 控制器（Controller）：业务逻辑
  • 模型（Model）：数据保存

各部分之间通信方式

  1. View传送指令到Controller
  2. Controller完成业务逻辑后，要求Model改变状态
  3. Model将新的数据发送到View，用户得到反馈

所有通信都是单向的

二、互动模式

MVC通过两种方式接收用户指令

  • 通过View接收指令，传递给Controller
    在这里插入图片描述
  • 直接通过controller接受指令
    在这里插入图片描述

三、实例

实际项目往往采用更灵活的方式，这里举例的是Backbone，没怎么见过，不赘述，有兴趣了解的点最下方原文

四、MVP

MVP模式将Controller改名为Presenter，同时改变了通信方向
在这里插入图片描述

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

五、MVVM

MVVM模式将Presenter改名VIewModel，基本上与MVP模式完全一致
在这里插入图片描述
唯一的区别是，采用双向绑定（data-binding）,VIew的变动，自动反映在ViewModel,反之亦然。Angular和Ember都采用这种模式

原文

Dreamer_WYL
关注
MVC，MVP 和 MVVM 的图示
swust_chenpeng的专栏
02-13 1134
地址：http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html 复杂的软件必须有清晰合理的架构，否则无法开发和维护。 MVC（Model-View-Controller）是最常见的软件架构之一，业界有着广泛应用。它本身很容易理解，但是要讲清楚，它与衍生的 MVP 和 MVVM 架构的区别就不容易了。 昨天晚上，我读了《Sc
MVC, MVP 与 MVVM
Jingwen_molo的博客
11-24 815
前几天读了阮一峰老师的文章《MVC，MVP 和 MVVM 的图示》，觉得讲得十分清晰，所以在这里做一波复习和总结。 MVC, MVP 与 MVVM 是三种常见的软件架构,它们之间的特点与区别如下: 一、MVC : 1. MVC是模型( Model )，视图( View )，控制器( Controller )的缩写； -视图( View ) 负责用户界面 - 模型( Model )负责保存数据 - 控制器 ( Controller )负责业务逻...
前端 MVC 分层的实践
每天都要努力学习哦~~
05-23 1538
前面我们讲了 JavaScript 面向对象编程，这篇文章我们会介绍一下面向对象中的经典编程模式 —— MVC。MVC、MVVM、MVP 这三个概念在前端领域是老生常谈了，但这节课不会只在概念层面讲述三者的区别，而是更偏向实践、从编写业务代码层面讨论一下 MVC 模式在前端开发中的意思。虽历经几十年的洗礼，MVC 架构依然没有过时，在各种语言中我们也经常能看到对应的 MVC 框架。在前端开发中，我们也可以借鉴 MVC 的思想来对项目进行重新组织和解耦，这样可以大大提高项目的灵活性。
设计模式 （转）
小飘飘玲的博客
04-15 371
http://blog.csdn.net/aric_chen/article/details/44871683
JavaScript设计模式es6（23种)
qq_42003636的博客
02-09 1462
设计模式代表了最佳的实践，通常被有经验的面向对象的软件开发人员所采用。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。设计模式是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了重用代码、让代码更容易被他人理解、保证代码可靠性。毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖石一样。
1.3 MV*模式介绍
Zch的博客
08-20 166
MVC，MVP 和 MVVM 的图示–阮一峰
架构 MVC，MVP 和 MVVM 图示
程序IT圈
10-27 235
来自：阮一峰的网络日志链接：http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html复杂的软件必须有清晰合理的架构，否则无法开发和维...
mvc mvp mvvm的区别与联系_架构 MVC，MVP 和 MVVM 图示
weixin_29095587的博客
01-23 130
来自：阮一峰的网络日志链接：http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html复杂的软件必须有清晰合理的架构，否则无法开发和维护。MVC(Model-View-Controller)是最常见的软件架构之一，业界有着广泛应用。它本身很容易理解，但是要讲清楚，它与衍生的 MVP 和 MVVM 架构的区别就不容易了。昨天晚上，我读了《...
mvvm模式和mvc的区别_MVC，MVP 和 MVVM 的图示
weixin_39541044的博客
12-05 329
来自：阮一峰的网络日志链接：http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html复杂的软件必须有清晰合理的架构，否则无法开发和维护。MVC(Model-View-Controller)是最常见的软件架构之一，业界有着广泛应用。它本身很容易理解，但是要讲清楚，它与衍生的 MVP 和 MVVM 架构的区别就不容易了。昨天晚上，我读了《...
前端 设计模式
绿足 博客
09-07 717
目录一. 设计模式描述模式定义模式分类工厂模式1.1 基本特征1.2 主要作用1.3 分类概括1.4 实例 一. 设计模式描述 模式定义 设计模式： 在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。 （开发实践中总结出来的针对特定问题的一套有效解决方案） 模式分类 设计模式按标准划分有3大类，共包含23中主要的类型。 由于JavaScript的一些特性， 如弱类型语言，无接口编程等特征...
JavaScript 设计模式学习第二十七篇－ 模块模式
分享前端工程化、动效魔法与性能之舞！
12-12 886
模块是任何健壮的应用程序体系结构不可或缺的一部分，特点是有助于保持应用项目的代码单元既能清晰地分离又有组织，下面我们来看看各种不同的模块模式解决方案。 1. 模块模式 1.1. 命名空间模式 命名空间模式是一个简单的模拟模块的方法，即创建一个全局对象，然后将变量和方法添加到这个全局对象中，这个全局对象是作为命名空间一样的角色。 var MYNS = {} MYNS.param1 = '.........
阮一峰JavaScript教程读书笔记——异步操作
qq_40423135的博客
04-10 748
阮一峰JavaScript教程读书笔记——异步操作 1. 单线程模型 JavaScript单线程（为了避免浏览器复杂性，锁机制），不代表 JavaScript 引擎只有一个线程。JavaScript 引擎有多个线程，单个脚本只能在一个线程上运行（称为主线程），其他线程都是在后台配合。 常见的浏览器无响应（假死），往往就是因为某一段 JavaScript 代码长时间运行（比如死循环），导致整个页面卡在这个地方，其他任务无法执行。 如果排队是因为计算量大，CPU 忙不过来，倒也算了，但是很多时候 CPU 是闲
认识mvc，mvp，mvvm
qq_38522842的博客
04-17 577
MVC 简介 使用MVC的目的是将M和V的实现代码分离，从而使同一个程序可以使用不同的表现形式 M model 模型 模型model用于封装与应用程序的业务逻辑相关的数据以及对数据的处理方法，会有一个或多个视图监听此模型。一旦模型的数据发生变化，模型将通知有关的视图。 V view 视图 视图view是屏幕上的表示，描绘的是model的当前状态。当模型的数据发生变化，视图相应地得到刷新自己的机会。 C controller 控制器 控制器controller定义用户界面对用户输入的响应方式，起到不
对MVC模式的理解
weixin_33861800的博客
04-09 369
转自http://www.ruanyifeng.com/blog/2007/11/mvc.html 作者： 阮一峰 日期： 2007年11月 8日 1. 如何设计一个程序的结构，这是一门专门的学问，叫做"架构模式"（architectural pattern），属于编程的方法论。 MVC模式就是架构模式的一种，它对我的启发特别大。我觉得它不仅适用于开发软件，也适用...
阮一峰：Javascript的10个设计缺陷 你同意几个？
Web全栈笔记
01-11 3215
今天的这一篇，前半部分就谈为什么会这样，后半部分将列举Javascript的10个设计缺陷。我参考的文献主要是Douglas Crockford的专著《JavaScript语言精粹》（JavaScript: The Good Parts）和Fredrik Holmström的文章《我对Javascript的抱怨》（My gripes with Javascript）。一、为什么Javascript有
【理解RESTful架构】——阮一峰版
一年之内毫无半点成绩，想起来做人真是没趣。
04-18 1468
理解RESTful架构1.名称2.含义3.总结4.误区 入门web，但是并没有真正的学习过网络基础知识，对于RESTful并不是很了解 1.名称 互联网软件的架构原则，定名为REST，即Representational State Transfer的缩写。翻译是"表现层状态转化"。 2.含义 资源（Resource） “表现层状态转换”，是资源的状态转换，是资源的表现层。 所谓的“资源”，就是网络上的实体，或者说是网络上的一个薪资信息。它可以是一个图片、一段音乐、一种服务，总之就是一个具体的存在。
RESTful API设计指南——阮一峰的网络日志
禅与计算机程序设计艺术
08-29 1076
作者：禅与计算机程序设计艺术 1.简介 REST（Representational State Transfer）即表述性状态转移，它是一种互联网软件 architectural style，旨在通过使用统一、资源化、URL地址表示的、各种服务操作的方式，在不改动协议的前提下，实现不同组件之间的通信。其
mvc和mvvm区别
dearMengJJ的博客
10-23 2361
一、MVC 1、MVC允许在不改变视图的情况下改变视图对用户输入的响应方式，用户对View的操作交给了Controller处理，在Controller中响应View的事件调用Model的接口对数据进行操作，一旦Model发生变化便通知相关视图进行更新。 二、MVVM MVVM与MVC最大的区别就是：它实现了View和Model的自动同步，也就是当Model的属性改变时，我们不用再自己手动操作Dom...
软件架构分类(转载)
weixin_33916256的博客
09-04 3322
思维导图： 作者：阮一峰(以下内容) 日期：2016年9月 3日 软件架构（software architecture）就是软件的基本结构。 合适的架构是软件成功的最重要因素之一。大型软件公司通常有专门的架构师职位（architect），只有资深程序员才可以担任。 O'Reilly 出版过一本免费的小册子《Software Architecture Patterns》（PDF）...
***RESTful API 设计指南（阮一峰）
weixin_33725126的博客
04-28 131
网络应用程序，分为前端和后端两个部分。当前的发展趋势，就是前端设备层出不穷（手机、平板、桌面电脑、其他专用设备......）。 因此，必须有一种统一的机制，方便不同的前端设备与后端进行通信。这导致API构架的流行，甚至出现"API First"的设计思想。RESTful API是目前比较成熟的一套互联网应用程序的API设计理论。我以前写过一篇《理解RES...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值