前端框架之MVC、MVP、MVVM
一、MVC、MVP、MVVC
复杂的软件必须有清晰合理的架构,否则无法开发和维护。为了将业务和视图的实现代码分离,目前比较流行三种前端架构:
MVC = Model-View-Controller
MVP = Model-View-Presenter
MVVM = Model-View-ViewModel
Model 为模型层,主要管理业务模型的数据和行为;
View 为展示层,其职责就是管理用户界面。
三个架构模式目的都是为了解耦 Model 和 View,主要不同点就在于三者实现解耦的方案不同。
二、MVC
MVC = Model-View-Controller,
- 视图(View):用户界面。
- 控制器(Controller):业务逻辑
- 模型(Model):数据保存
各部分之间的通信方式如下
View会接收用户的交互请求并展示数据信息给用户。在 MVC 里,View 被设计为可嵌套的,使用了组合(Composite)模式来实现。比如,列表视图(ListView)或表格视图(TableView)由每个 Item 组成,每个 Item 又可以由图片、文本、按钮等组成。View 是倾向于可复用的,因此,在实际应用中,倾向于将 View 开发成相对通用的组件。
Controller 层主要担任 Model 与 View 之间的桥梁,用于控制程序的流程。Controller 负责确保 View 可以访问到需要显示的 Model 对象数据,并充当 View 了解 Model 更改的渠道。View 接收到用户的交互请求之后,会将请求转发给 Controller,Controller 解析用户的请求之后,数据就会交给对应的 Model。
Model在前端框架中就是数据的存储。在传统后端开发中习惯把业务层归入Model,而对前端框架来说,通常不这样划分。
三、MVP
MVP 模式将 Controller 改名为 Presenter,同时改变了通信方向。
MVP有以下三个特点:
1. 各部分之间的通信,都是双向的。
2. View 与 Model 不发生联系,都通过 Presenter 传递。
3. View 非常薄,不部署任何业务逻辑,称为"被动视图"(Passive View),即没有任何主动性,而 Presenter非常厚,所有逻辑都部署在那里。
四、MVVM
MVVM 模式将 Presenter 改名为 ViewModel,MVP 很相似,最大的不同在于 View 和 ViewModel 之间主要是通过数据绑定的方案来实现交互的。
MVVM采用双向绑定(data-binding):View的变动,自动反映在 ViewModel,反之亦然。AngularJS 和 Vue 都采用这种模式,而React采用了单向数据流,属于MVP架构。
要实现数据绑定,通常都采用发布者-订阅者模式进行实现,但这部分工作如果由开发人员自己来写代码实现,其实还是挺复杂的,因此,各大平台都提供了各自的内部实现。比如 Vue 和 AngularJS 自身都实现了数据绑定,Android 目前最主流的方案就是采用 Jetpack,iOS 最常用的方案则是结合 ReactiveCocoa(RAC)实现。
MVP 和 MVVM 都是为了解决界面和数据的分离问题,两者只是采用了不同的实现方案。MVP 之间的交互主要是通过接口实现的,其主要弊端就是需要编写大量接口。而 MVVM 则是通过数据绑定的方式实现交互,虽然其实现需要依赖具体的一些框架工具,但明显大大减少了开发者需要编写的代码量。
原文地址:https://www.cnblogs.com/guanghe/p/15186487.html
- Extjs4---Cannot read property 'addCls' of null 或者 el is null 关于tab关闭后再打开不显示或者报错
- 【干货】什么?Python3.X不能输出中文?原来是编辑器geany的锅?!
- Shell 历史记录异地留痕审计与监控
- [译]WebAPI下的如何实现参数绑定
- 这或许是对小白最友好的python入门了吧——10,元组
- Extjs 在项目中碰到问题
- 网站防刷方案
- 如何正确的猜拳:反事实遗憾最小化算法
- 使用python中的Numpy进行t检验
- 实操 Web Cache
- 怎样制作RPM包
- 框架设计原则和规范(完)
- 这或许是对小白最友好的python入门了吧——9,数字深入体验
- WebAPI返回数据类型解惑 以及怎样解决Extjs无法解析返回的xml
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法