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的实现避免这一问题)
相关推荐
Flynt25 分钟前
我把热榜那篇"禁用 axios"逐条实测了一遍:结论大体对,坑在它没讲的地方
前端·javascript·axios
Csvn1 小时前
bundle优化
前端
北冥有鱼1 小时前
发版后动态路由点击报 `Failed to fetch dynamically imported module`」问题上的完整排查与修复过程
前端·vue.js
静默回滚1 小时前
视频压到 25 MB 以内,码率要算、音轨要扣、余量要留
前端
用户37203749260182 小时前
把 10MB 中文语义模型塞进浏览器:STSB 做到教师模型的 93%,但线上 top1 只有 42%
前端
光锥智能2 小时前
海康机器人举行2026移动机器人新品发布会:箱式存拣升级,「明智」系列发布
java·前端·机器人
计算机魔术师2 小时前
Anthropic 上市文件最吓人的一幕,不是亏损 807 亿
前端
alsmile2 小时前
AI友好的可视化图形引擎自我革命:Meta2d.js 2.0 历时一年全新重写,性能与多人协作全面升级
前端·开源·数据可视化
行思理2 小时前
Nginx 跨站请求(CORS)配置完全指南:从原理到生产实践
java·前端·nginx
粥里有勺糖2 小时前
视野修炼-技术周刊第137期 | 编程已经面目全非
前端·github·ai编程