MV*结构的发展

一,MVC

Model模型,View视图,Controller控制器

理解

MVC就是将最原始的繁琐流程进行模块化,Model负责从数据库取数据,View负责展示获取的数据,用户在View进行操作,Controller处理用户交互,负责主要的业务逻辑处理(例如用户点击事件,Controller修改Model的数据,然后View通过观察者模式检测到Model数据发生变化,然后刷新页面)

缺点

  • MVC是单向的
  • View依赖特定的Model,无法组件化
  • View和Controller耦合度高,脱离Controller,View难以独立应用
  • 主要业务逻辑都在Controller中,变得很重

二,MVP

Model模型,View视图,Presenter控制器

理解:

MVP是双向的,在MVC的基础上进一步完善,View和Model完全没有联系,所有的操作都必须通过Presenter中转。View向Presenter发起请求,Presenter修改Model,Model修改完后反馈给Presenter,然后Presenter调用View的相关接口刷新页面。View层不再像MVC那样监听Model改变了。

优点

  • View可以组件化,不需要了解业务逻辑,只需要提供接口给Presenter
  • 方便测试

三,MVVM

Model模型,View视图,ViewModel封装的P层逻辑与数据对象

理解

在MVP的基础上进一步完善,ViewModel是把MVP的Presenter中调用View的接口同步数据变化的重复工作抽象出来,做成一个binder模块,实现了双向数据流。用户只需要操作数据即可。即用户只需绑定好关系,则不管哪一端的数据改变,都会自动同步到另一端。但View和Model依旧是没有关联。

因此vue属于MVVM框架,但并不完全,因为vue中view和model还可以通过ref来操作关联,二者并非毫无关联。

缺点

  • 由于绑定较随意简单,View对绑定Model进行修改可能会造成其他View也被修改的连锁反应,由此导致代码的可预测性较差(无法判断连锁反应的数据修改是由谁造成的)

四,Flux

理解

对于MVVM双向数据绑定可能会造成的连锁反应问题,所以提出了Flux结构(组件化 + 单向数据流),他的本质还是MVC结构,只是更加简单和清晰。

组件化:由于MVC中,Model要存储数据,还要存储UI状态;同样Controller既要控制业务逻辑,也要处理交互等事件。因此将这些部分抽离出来,和View结合在一起,就成了组件。这样大大提高了代码的可读性和复用性。

单向数据流:Flux主要通过单向数据流提高代码的可预测性。单向数据流主要引入了Store(每个程序可以有多个Store,存储应用程序状态的不同部分)、Action(包含对应的type和payload,用来发起修改Store的请求)、Dispatcher(接收Action,通过回调函数完成Store数据的修改)3个概念。

Store对View是只读的,只有Dispatcher可以通过Store的回调函数修改他的内容

当发起一个Action改变Store数据时,会发送一个事件,View通过监听这个事件完成页面UI的刷新。如果需要再次刷新,则需要再次发起一个新的Action,因此整个过程是单向的。

  • 修改流程1:用户在View上操作并修改Store的数据,则需要先发起一个Action(包含对应的type和payload),然后Dispatcher当接收到Action,会通过回调函数调用所有Store的,完成数据的修改。View完成页面UI刷新(即View => Action => Dispatcher => Store => View)
  • 修改流程2:服务器或者web API可以直接发起Action,并通过Dispatcher修改Store的数据,完成View的刷新(即 Action => Dispatcher => Store => View)

缺点

  • 他采用多Store,各个Store之间可能存在数据依赖,协同管理上存在一定的设计缺陷(因此Redux的实现避免这一问题)
相关推荐
canonical_entropy8 分钟前
下一代低代码渲染框架 nop-chaos-flux 的设计原则
前端·低代码·前端框架
东方小月17 分钟前
5分钟搞懂Harness Engineering(驾驭工程):从提示词到AI Agent的进化之路
前端·后端·架构
我叫黑大帅20 分钟前
为什么需要 @types/react?解决“无法找到模块 react 的声明文件”报错
前端·javascript·面试
之歆44 分钟前
DAY_21JavaScript 深度解析:数组(Array)与函数(Function)(一)
前端·javascript
XinZong1 小时前
【AI社交】基于OpenClaw自研轻量化AI社交平台实战
前端
Le_ee2 小时前
ctfweb:php/php短标签/.haccess+图片马/XXE
开发语言·前端·php
爱上好庆祝2 小时前
学习js的第七天(wed APIs的开始)
前端·javascript·css·学习·html·css3
KaMeidebaby3 小时前
卡梅德生物技术快报|冻干工艺开发:注射用心肌肽全流程参数优化与工程化方案
前端·其他·百度·新浪微博
Moment3 小时前
面试官:如果产品经理给你多个需求,怎么让AI去完成❓❓❓
前端·后端·面试
每天吃饭的羊3 小时前
JSONP
前端