前端设计模式 —— 2. Flux架构包含了哪些设计模式?

今天通过 Flux 架构来学习设计模式。

Flux架构是一个用于构建客户端Web应用的应用架构模式,这种架构模式强调数据的单向流动,从而使得应用状态的管理更加清晰和可预测。Flux架构为现代前端框架提供了强大的数据管理能力,其思想也被Vuex、Redux、Pinia等状态管理库所借鉴和实现。

flux 架构原理

Flux架构由以下四个主要部分组成:

  1. Actions - 用于描述发生了什么(例如用户的交互行为)。
  2. Dispatcher - 用于接收Actions并派发给Stores。
  3. Stores - 存储应用的状态,并对状态进行管理。
  4. Views - 展示数据,并在数据变化时更新视图。

在Flux中,数据以及产生的动作沿着一个方向流动:Actions -> Dispatcher -> Stores -> Views。这种模式确保了数据的一致性和可控性。

相关设计模式

Flux架构涉及多种设计模式,这些模式共同构成了Flux的理论基础和实现细节。

1.观察者模式

基本概念:观察者模式(Observer Pattern)是一种行为设计模式,允许对象(称为观察者)订阅另一个对象(称为主题)的状态变化,当主题的状态发生变化时,所有订阅者都会收到通知。这种模式用于建立一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都得到通知并自动更新。

应用:在Flux架构中,观察者模式广泛应用于Stores和Views的关系。Stores负责存储应用状态,当状态更新时,它会通知所有订阅了这些变化的Views。这使得Views能够及时响应状态的变化,更新界面。

2.单向数据流

单向数据流是Flux架构的核心特征,但它本身不是一个传统的设计模式。它更像是一种架构模式,指的是数据在应用组件之间流动的方向。这种模式确保了数据流动的清晰和一致性,降低了数据管理的复杂性。

3.命令模式

基本概念:命令模式(Command Pattern)是一种行为设计模式,它将一个请求封装为一个对象,从而允许使用不同的请求、队列或日志来参数化其他对象。命令模式也支持撤销操作。它包括四个角色:命令(Command)、接收者(Receiver)、调用者(Invoker)、和客户端(Client)。在这种模式下,调用者通过命令对象来执行一个动作,命令对象再调用接收者的一个或多个动作。

应用:Flux中的Actions可以被视为命令模式的实现。每个Action都是一个命令,它告诉Dispatcher要执行什么样的操作。这种模式使得动作的生成和执行过程分离,提高了代码的可维护性和可测试性。

4.单例模式

基本概念:单例模式(Singleton Pattern)是一种创建型设计模式,确保一个类只有一个实例,并提供一个访问它的全局访问点。单例模式经常用于管理共享资源,如数据库连接或文件系统。应用中的单例类负责创建自己的对象,并确保只有单个对象被创建。这个类提供了一种方式来访问其唯一的对象,可以直接访问,不需要实例化对象。

应用:在Flux中,Dispatcher通常被实现为一个单例。这确保了应用中有一个统一的派发中心,所有的Actions都通过这个中心来协调,这样可以确保数据流的一致性和顺序性。

5.模版方法模式

基本概念:模板方法模式(Template Method Pattern)是一种行为设计模式,它在超类中定义了一个算法的框架,允许子类在不改变算法结构的情况下重写算法的某些步骤。这种模式是基于继承的:它使得子类可以在不改变算法结构的情况下重新定义算法的某些步骤。

应用:虽然Flux架构本身并不直接使用模板方法模式,但在实现Flux的过程中,这一模式可以用于定义Stores的更新机制。通过定义一个模板方法来指定如何处理Actions,各个Store可以在此基础上定制自己的处理逻辑。

总结

观察者模式、单项数据流、命令模式、单例模式,模版方法模式......设计模式在 Flux 架构中无处不在。

相关推荐
高申航5 分钟前
Vue 3 + DYMO Connect Framework 实战:从标签模板到打印服务的完整实现
前端·javascript·vue.js
梨想橙汁9 分钟前
Vue3 组件开发:生命周期钩子,组件之间通信全方案
前端·vue.js
雪芽蓝域zzs10 分钟前
分页组件 + el-config-provider 中文国际化 + 靠右布局
前端·javascript·vue.js
恋猫de小郭14 分钟前
iPhone Duo 适配详解,需要改变的不止是布局模型
前端·flutter·ios
萧行之25 分钟前
Observable Plot 源码深度解析——4 核心抽象逐项学习
前端·学习·数据可视化
今日无bug42 分钟前
为什么大模型回答总是一个字一个字蹦出来?聊聊 SSE 流式输出与 BFF 层的那些事
前端·llm
CIO_Alliance1 小时前
AI微调系列(1)| 全量微调、LoRA、QLoRA 三种方案怎么选
前端·人工智能·神经网络·机器学习·embedding·企业ai转型
hanbo17C21 小时前
企业官网能不能看出公司实力?选建站公司前,先看这6条硬标准
运维·服务器·前端
zzzll11111 小时前
LLM 学习第 24 课:Agent Harness
前端·人工智能·学习
Bmob后端云1 小时前
Bmob后端云实战|Python实现SSE流式输出,给备忘录AI加上打字机效果
前端·github