当前位置: 首页 > news >正文

现代前端架构介绍(第二部分):如何将功能架构分为三层

远离JavaScript疲劳和框架大战,了解真正重要的东西

在这个系列的前一部分 《App是如何由不同的构建块构成的》中,我们揭示了现代Web应用是由不同的构建块组成的,每个构建块都承担着特定的角色,如核心、功能等。在这篇文章中,我们将深入探讨功能模块,了解其面临的挑战。废话不多说,下面是第二部分的内容。

特性是一组在树的同一分支上排列的组件的集合。

这些组件需要相互通信以实现预期的业务价值。例如,当用户从列表中选择一项时,其详细信息应被检索并显示在另一个组件上。

因为分支的形状不可预测,所以通信流可以向任何方向流动,可以遵循非传统的模式。这很危险,因为它会混淆应该将数据获取代码、用户交互逻辑等放在何处的判断。这甚至可能导致具有混合关注点的组件。

将功能混杂在一起不仅违反了软件工艺的许多原则,还会使理解功能变得繁琐。代码调试变得必要,从而导致沮丧和低效。

特征内部组件之间的通信

所以,第一个挑战是:

通过将组件划分为两类来明确它们的职责:

  • 呈现组件(也称为“哑组件”):正如其名称所述,它的唯一作用是显示UI并与用户交互。它不知道自己被用于哪个领域,也不包含任何业务逻辑,因此具有很高的可重用性。列表组件就是一个很好的例子。它知道如何显示其项以及如何与用户交互,但不知道这些项是如何获取的,也不知道谁对用户事件感兴趣。
  • 容器组件(也称为智能组件):由于呈现组件缺乏上下文,容器组件充当其上下文提供者。它知道如何获取要传递给呈现组件的数据,以及如何处理用户事件。这使其了解其功能领域,因此是理想的业务逻辑宿主,但也使其更难重用。

容器组件与表现层组件之间的通信

PS:一些框架,比如 React,通过将回调函数与数据一起传递来促进单向通信。这并不与容器将数据传递并处理用户事件的事实相矛盾。

虽然容器与呈现组件之间的通信遵循一种标准模式,但不同容器或甚至功能之间的数据流仍然不清晰。它们需要共享、读取和更新应用程序中的数据。这被称为状态管理。

所以,第二个挑战是:🔥

确定谁负责管理应用程序状态并保护其免受不一致性的影响。

虽然解决这个问题的技术方案各不相同,但它们都基于一个简单的基本概念。

因为状态可以被应用程序的任何部分更新和读取,因此其管理不应由任何一方负责。

相反,将由一个全局实体负责管理App的状态。由于它是全局的,因此它是唯一的“真实”来源,从而保护状态免受不一致的影响,并使App更容易理解。

通过全局实体进行状态管理

它将状态管理的责任从容器组件中移除,并将它们转换为一个业务逻辑层,连接状态组件和表现组件。

特征层之间的通信流

这有助于实现职责分离,使每个层级只承担单一职责:

  • 状态:管理应用程序的状态并确保其一致性。
  • 业务逻辑:包含业务逻辑并为表现层组件提供上下文。
  • UI:显示用户界面并与用户交互。

如果我们希望开发人员能够快速在应用程序代码中找到所需内容,这也会对代码结构产生影响。

<span style="color:rgba(0, 0, 0, 0.8)"><span style="background-color:#ffffff"><span style="background-color:#f2f2f2"><span style="color:#242424">AppRepo│  ├──/Overview                           <strong>|</strong>   ├──/Components                     <strong>|</strong>      ├──/ListComponent               │      └──/ChartComponent              <strong>|</strong>   ├──/State                          </span></span></span></span>

状态文件夹将包含与该功能状态相关的所有内容。它与其他功能状态一起构成了整个应用程序的状态。

应用程序状态由功能状态组成。

在本文中,我们了解到如何将一个功能分解为多个层次,以规范通信流程并明确组件职责。

在下一篇文章《深入了解状态管理层及其对前端App的影响》中,我们将探讨状态层的机制,并了解它对组件的具体影响以及对整个应用程序的总体影响。

 欢迎关注公众号:清晰编程,获取更多精彩内容

相关文章:

现代前端架构介绍(第二部分):如何将功能架构分为三层

远离JavaScript疲劳和框架大战&#xff0c;了解真正重要的东西 在这个系列的前一部分 《App是如何由不同的构建块构成的》中&#xff0c;我们揭示了现代Web应用是由不同的构建块组成的&#xff0c;每个构建块都承担着特定的角色&#xff0c;如核心、功能等。在这篇文章中&#…...

测试面试宝典(四十七)— 功能测试用例一般包含哪些内容

首先&#xff0c;明确测试用例的编号和名称&#xff0c;以便于识别和管理。 其次&#xff0c;详细描述测试的目标和背景&#xff0c;让其他人能够清楚了解该测试用例的目的和适用场景。 接着是测试的步骤&#xff0c;需要清晰、准确地列出每一个操作步骤&#xff0c;包括输入…...

如何在 Ubuntu VPS 上安装 Cassandra 并运行单节点集群

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 介绍 Cassandra&#xff0c;或者说 Apache Cassandra&#xff0c;是一个高度可扩展的开源数据库系统&#xff0c;在多节点设置上能够实…...

深入理解 HTTP 状态码

HTTP 状态码是服务器在收到客户端请求后返回的响应代码&#xff0c;用来表示请求的处理结果。这些状态码帮助用户理解请求是否成功以及服务器的响应状态。HTTP 状态码分为五大类&#xff0c;每一类都有特定的含义。下面&#xff0c;我们来详细解读这些状态码&#xff0c;帮助你…...

程序员面试“八股文”:助力成长还是应试枷锁?

程序员面试“八股文”&#xff1a;助力成长还是应试枷锁&#xff1f; 引言 在当今快速迭代的IT行业中&#xff0c;程序员面试作为选拔人才的关键环节&#xff0c;其内容与形式一直备受关注。其中&#xff0c;“八股文”式面试题&#xff0c;作为一类标准化、模式化的问题集合…...

【Java】深度解析监视器的组成原理

目录 一、什么是监视器&#xff08;Monitor&#xff09;二、监视器的组成部分三、线程的状态转换四、总结 一、什么是监视器&#xff08;Monitor&#xff09; 在Java中&#xff0c;监视器&#xff08;Monitor&#xff09;是用来实现线程同步的一种机制。每个Java对象都有一个与…...

Upload-labs靶场Pass01-Pass21全解

文章目录 Pass-01 前端JSJS绕过上传或者用burp抓包的方式 Pass-02 MIME检测Pass-03 特殊文件后缀黑白名单绕过特殊文件名绕过 Pass-04 .htacess上传Pass-05 user.ini文件上传Pass-06 大小写绕过Pass-07 空格绕过Pass-08 .绕过Pass-09 ::$DATA绕过Pass-10 .空格.绕过Pass-11 双写…...

扬声器、麦克风的等效电路及相关技术参数(灵敏度等)

扬声器、麦克风都是日常我们所需的电子小器件&#xff0c;今天小编来具体讲解一下有关两者的等效电路及相关技术参数。 1、扬声器 等效电路 Re表示扬声器音圈的直流电阻 Le表示音圈的电感,对高频信号产生的阻抗 Mm表示动圈的等效质量,主要影响扬声器的低频响应 Rm 表示动圈…...

大数据技术原理-Hadoop的安装

摘要 随着大数据时代的到来&#xff0c;Hadoop作为一项重要的分布式计算框架&#xff0c;其安装与配置是大数据技术学习者必须掌握的技能。本文通过实验报告的形式&#xff0c;详细记录了在虚拟机环境下安装Hadoop并配置其为伪分布式模式的全过程。实验过程中&#xff0c;遇到…...

【12.PIE-Engine案例——加载Landsat 7 SR单景影像】

原始路径 欢迎大家登录航天宏图官网查看本案例原始来源 最后结果 具体代码 /*** File : Landsat7SRImage* Time : 2020/7/21* Author : piesat* Version : 1.0* Contact : 400-890-0662* License : (C)Copyright 航天宏图信息技术股份有限公司* Desc …...

二叉树的中序遍历 - 力扣(LeetCode)C语言

94. 二叉树的中序遍历 - 力扣&#xff08;LeetCode&#xff09;&#xff08;点击前面链接即可查看题目&#xff09; 一、题目 给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,3,…...

状态同步帧同步

帧同步&#xff1a; 有明确的逻辑帧概念&#xff0c;按照固定的逻辑帧间隔同步帧数据 原理 锁帧&#xff1a;mmo那种游戏&#xff0c;服务器需要收到第k帧所有客户端的指令&#xff0c;就算没有操作也发个空指令上去&#xff08;相对来说回合制卡牌这类就简单很多&#xff0…...

JavaScript 箭头函数

箭头函数 箭头函数&#xff08;Arrow functions&#xff09;是ES6引入的一种新的函数定义方式&#xff0c;它相比传统的函数表达式具有简洁和便利的特点。以下是箭头函数的几个重要特点和使用方式&#xff1a; 语法简洁&#xff1a; 箭头函数使用箭头&#xff08;>&#xf…...

JavaDS —— AVL树

前言 本文章将介绍 AVL 树的概念&#xff0c;重点介绍AVL 树的插入代码是如何实现的&#xff0c;如果大家对 AVL 树的删除&#xff08;还是和二叉搜索树一样使用的是替换删除法&#xff0c;然后需要判断是否进行旋转调整&#xff09;感兴趣的话&#xff0c;可以自行去翻阅其他…...

【C++】异常处理:深度解析与实战精髓,不容错过的编程秘籍

&#x1f308; 个人主页&#xff1a;Zfox_ &#x1f525; 系列专栏&#xff1a;C从入门到精通 目录 &#x1f680; 前言&#xff1a;C语言传统的处理错误的方式 一&#xff1a; &#x1f525; C异常概念二&#xff1a; &#x1f525; 异常的使用 2.1 &#x1f4d6; 异常的抛出和…...

计算机网络面试题2

WebSocket相关知识 什么是WebSocket? WebSocket是一种基于TCP连接的全双工通信协议&#xff0c;即客户端和服务器可以同时发送和接收数据 WebSocket和HTTP有什么区别&#xff1f; 1.WebSocket是双向通信协议&#xff0c;HTTP是单向通信协议 2.WebSocket使用ws://或者wss:/…...

浅谈 Spring AOP框架 (1)

文章目录 一、什么是 Spring AOP二、为什么要使用 Spring AOP三、AOP 的一些应用场景四、AOP 的组成五、如何使用 Spring AOP六、Spring AOP 的实现原理6.1、JDK 和 CGLIB 的区别 一、什么是 Spring AOP AOP (Aspect Oriented Programming) &#xff1a;面向切面编程&#xff…...

读零信任网络:在不可信网络中构建安全系统07设备信任

1. 设备信任 1.1. 在零信任网络中建立设备信任至关重要&#xff0c;这也是非常困难的一个环节 1.2. 建立设备信任是基石&#xff0c;直接影响零信任网络架构的成败 1.3. 大多数网络安全事件都和攻击者获得信任设备的控制权相关&#xff0c;这种情况一旦发生&#xff0c;信任…...

[python][代码]遍历一个字典或列表替换其中的 NaN 值为None

代码定义了一个名为 replace_nan 的函数&#xff0c;其目的是遍历一个字典或列表&#xff0c;查找并替换其中的 NaN 值&#xff08;不是数字&#xff0c;Not a Number&#xff09;为 None。 下面是代码的逐行解释&#xff1a; #coding:utf-8&#xff1a;指定文件的编码格式为…...

游戏加速器推荐 网游加速器排行榜

游戏加速器推荐&#xff0c;玩游戏用什么加速器&#xff01;我得给你推荐一款我常用的。首先呢&#xff0c;就是深度加速器&#xff0c;它针对目前手游网游的游戏加速效果特别棒&#xff0c;而且界面也很友好。 另外&#xff0c;还有深度加速器&#xff0c;这款加速器不仅支持国…...

【面试题】C++:指针和引用的区别?

指针&#xff08;Pointer&#xff09;和引用&#xff08;Reference&#xff09;是C中常用的两种数据类型&#xff0c;它们有几点显著的区别&#xff1a; 1. 定义和语法&#xff1a; 指针是一个变量&#xff0c;其存储的是另一个变量的地址。定义指针时需要使用星号&#xff0…...

《Milvus Cloud向量数据库指南》——什么是二进制嵌入?

引言 向量嵌入在现代机器学习和数据科学中已成为不可或缺的工具,它们能够将复杂数据以算法可以理解的数值格式表示。尽管密集嵌入因其能够以最小的信息损失保留语义含义而普遍存在,但随着数据量的增加,它们的计算需求和内存需求也在增加。这种增加促使开发者寻求更高效的数…...

fastjson-1.2.24利用

参考视频&#xff1a;fastjson反序列化漏洞2-1.2.24利用 参考博客&#xff1a;Fastjson系列二——1.2.22-1.2.24反序列化漏洞 分析版本 fastjson1.2.24 JDK 8u141 fastjson反序列化特点 不需要实现Serializable 因为对于找不到符合条件的反序列化器&#xff0c;就把类当作…...

峰绍F6832UI参数调节说明

1/采样电阻/电流 3. 此处 AD3 用于母线平均电压采样; 4. 放大倍数 R9/R6 R8/R7; 5. 最大采样电流 (VREF - VHALF)/放大倍数/采样电阻值; 6. 最大采样电流一般设置为最大母线电流的 4 倍左右。2/电参数 3. 相电感 Ls: 电桥测 1KHz 频率下的两相线电感 LL&#xff0c;相电感 …...

Prometheus-v2.45.0+Grafana+邮件告警

目录 普罗米修斯监控架构介绍 Prometheus 监控架构 1. 数据抓取&#xff08;Scraping&#xff09; 2. 时序数据库&#xff08;TSDB&#xff09; 3. 数据模型 4. PromQL 查询语言 5. 告警&#xff08;Alerting&#xff09; 6. Alertmanager 7. 可视化&#xff08;Visu…...

订单定时状态处理业务(SpringTask)

文章目录 概要整体架构流程技术细节小结 概要 订单定时状态处理通常涉及到对订单状态进行定期检查&#xff0c;并根据订单的状态自动执行某些操作&#xff0c;比如关闭未支付的订单、自动确认收货等. 需求分析以及接口设计 需求分析 用户下单后可能存在的情况&#xff1a; …...

Django之JsonResponse对象

【图书介绍】《Django 5企业级Web应用开发实战&#xff08;视频教学版&#xff09;》_django 5企业级web应用开发实战(视频教学版)-CSDN博客 《Django 5企业级Web应用开发实战&#xff08;视频教学版&#xff09;》(王金柱)【摘要 书评 试读】- 京东图书 (jd.com) 在Django框…...

Adobe ColdFusion反序列化漏洞(cve-2017-3066)

目录 概述复现过程修复建议 概述 Adobe ColdFusion&#xff08;直译&#xff1a;冷聚变&#xff09;&#xff0c;是一个动态Web服务器&#xff0c;其CFML&#xff08;ColdFusion Markup Language&#xff09;是一种程序设计语言&#xff0c;类似JSP里的JSTL&#xff08;JSP St…...

SQLServer设置端口(上)

在SQL Server中设置端口是一个涉及多个步骤的过程&#xff0c;旨在确保数据库服务器的安全、高效运行以及避免端口冲突。以下将详细阐述SQL Server设置端口的步骤、注意事项及相关知识。 一、引言 SQL Server作为微软公司推出的一款关系型数据库管理系统&#xff0c;广泛应用…...

【C++之抛异常基础知识】

C学习笔记---028 C之抛异常基础知识1、C抛异常介绍1.1、抛异常概念1.2、抛出异常 (throw)关键字介绍1.3、捕获异常 (catch)关键字介绍 2、 RAII资源管理2.1、RAII简化资源管理2.2、RAII介绍2.3、RAII的优点2.4、RAII的缺点2.5、RAII的实现 3、标准异常库3.1、标准异常库概念介绍…...

锅总浅析SRE

SRE简介 SRE&#xff08;Site Reliability Engineering&#xff0c;站点可靠性工程&#xff09;是由Google开发的一种运维理念和实践方法&#xff0c;其核心思想是用软件工程的方式来管理和运维系统&#xff0c;以提高系统的可靠性、效率和可扩展性。 SRE的核心理念 自动化&…...

探索编程之旅:新生入门编程的浅见

探索编程之旅&#xff1a;新生入门编程的最佳路径 一、认识编程与编程语言1.1 编程的本质1.2 编程语言简介1.2.1 Python1.2.2 Java1.2.3 C语言1.2.4 C1.2.5 Rust语言 二、学习心态2.1 明确学习目标2.2 分阶段学习2.3 避免常见盲目跟风和急于求成2.4 不能忽视实践2.5 不能闭门造…...

kickstart自动安装脚本

当安装Linux操作系统时&#xff0c;安装过程会需要回答很多关于设定的问题 这些问题必须手动选择&#xff0c;否则无法进行安装。当只安装1台Linux系统&#xff0c;手动选择设定工作量比较轻松&#xff0c;当安装多台Linux&#xff0c;这些设定需要重复多次&#xff0c;这些重复…...

golang快速入门

golang快速入门可以按照如下步骤进行 阶段一&#xff1a; 附8小时快速入门语法文档版&#xff1a;https://www.yuque.com/aceld/mo95lb 看完文档后可看gin框架&#xff0c;推荐看官方文档 链接如下&#xff1a;https://gin-gonic.com/zh-cn/docs/ 后续可以看下context&#xf…...

文件处理库的基本功能

os库主要对目标和文件操作 方法描述os.name返回操作系统类型os.environ以字典形式返回系统变量os.putenv(key, value)改变或添加环境变量os.listdir(path’.’)列表形式列出目录下所有目录和文件名os.getcwd()获取当前路径os.chdir(path)改变当前工作目录到指定目录os.mkdir(p…...

Lambda 表达式(也称为匿名函数)-在java,javascript,python

Lambda 表达式&#xff08;也称为匿名函数或 lambda 函数&#xff09;是一种简洁地表示可以在需要函数对象的地方使用的单表达式的方法。它们是在许多现代编程语言中引入的&#xff0c;包括 Python、Java、C# 和 JavaScript 等&#xff0c;用于编写更简洁、更易于阅读的代码。 …...

中间证书缺失如何发现和修复

一、背景 微信小程序等功能在发送后台请求时一般都会要求证书齐全&#xff0c;否则就会导致请求发送失败。 一般来说&#xff0c;如果中间证书不齐全&#xff0c;在不同设备上表现不一样&#xff0c;一般PC端可能不会有太大问题&#xff0c;仍然认为你的证书可信&#xff0c;但…...

【时时三省】unity test 测试框架 使用 code blocks 移植(核心文件:unity.c)

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 目录 1&#xff0c;使用 Code::Blocks 17.12 创建工程 2&#xff0c;移植文件至该工程下&#xff1a; 移入的文件为: 被移入的文件介绍&#xff1a; 更改代码&#xff1a; 向工程添加文…...

Unity Camera

课程目标 1. 了解摄像机&#xff08;camera&#xff09;不同视角的设计与实现&#xff1b;2. 感受在不同摄像机视角下观察虚拟场景。 喜欢玩游戏或者看3D动漫的朋友可以回忆在虚拟场景中摄像头的运动变化带来的视觉感受&#xff0c;例如&#xff1a;摄像头给场景中的主角来个…...

“八股文”究竟是程序员职场的助力还是绊脚石?

“八股文”在实际工作中是助力、阻力还是空谈&#xff1f; 在当今的IT行业中&#xff0c;“八股文”已成为程序员面试中的常见考察内容。这些精心设计的技术问题通常涉及计算机基础知识&#xff0c;如算法、数据结构、操作系统等&#xff0c;被广泛用于筛选和评估候选人的技术…...

在Ubuntu 14.04上安装Cassandra并运行单节点集群的方法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 简介 Cassandra&#xff0c;或者说是 Apache Cassandra&#xff0c;是一个高度可扩展的开源 NoSQL 数据库系统&#xff0c;在多节点设置…...

软设之网络诊断命令

ping 用于检查网络是否连通 检查错误时&#xff0c;使用由近及远的原则&#xff0c;首先使用ping 127.0.0.1检查本机TCP/IP协议栈&#xff0c;能ping通&#xff0c;说明本机协议栈无问题 tracert:用于确定ip数据包访问目标所采取的路径&#xff0c;若网络不通&#xff0c;能定…...

32.x86游戏实战-使用物品call

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 本次游戏没法给 内容参考于&#xff1a;微尘网络安全 工具下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1rEEJnt85npn7N38Ai0_F2Q?pwd6tw3 提…...

【Bigdata】什么是三层SPI模型

这是我父亲 日记里的文字 这是他的生命 留下留下来的散文诗 几十年后 我看着泪流不止 可我的父亲已经 老得像一个影子 &#x1f3b5; 许飞《父亲写的散文诗》 三层SPI模型是指软件过程改进&#xff08;Software Process Improvement, SPI&#xff09;中常…...

LinkedList接口源码解读

LinkedList 接口源码解读 前言 因为追求质量&#xff0c;所以写的较慢。大概在接下来的三天内会把LinkedList源码解析出完。已经出完啦&#xff01;废话不多说&#xff0c;正片开始&#xff01; &#xff08;文章最后面有后记哦~&#xff09; 大家都知道&#xff0c;LinkedL…...

Linux 系统下载 wgent

目录 1. yum 命令 2. 下载 wget 操作系统安装软件的方式有很多种&#xff0c;一般分为&#xff1a; &#xff08;1&#xff09;下载安装包自行安装&#xff1b; &#xff08;2&#xff09;系统的应用商店内安装&#xff1b; Linux 系统同样支持这两种方式&#xff1a; 另…...

Chainlit快速实现AI对话应用项目定制化配置教程

概述 当你运行 chainlit run ... 或者 chainlit init 命令时会创建 .chainlit/config.toml 文件。这个文件允许你配置你的 Chainlit 应用并启用或禁用特定的功能。 项目配置 [project] # 是否开启遥测功能(默认:true)。不会收集任何个人资料。 enable_telemetry true# 每个…...

Ubuntu配置Ngbatis学习环境

引言 经过考虑&#xff0c;我感觉与NebulaGraph交互的ORM框架还是Ngbatis好。因为现在这个框架开发的比较完善&#xff0c;而且还在不断更新&#xff0c;社区活跃的用户多。从今日开始学习&#xff0c;首先要配置一下环境。 1.安装maven和jdk 选择的版本是maven3.8和jdk17.以…...

PySide6/PyQT学习笔记(很杂)

QGroupBox样式&#xff1a;科技机甲 QGroupBox { border: 2px solid #333; /* 深色边框&#xff0c;类似金属质感 */ border-radius: 8px; /* 轻微的圆角 */ background-color: #222; /* 暗色背景&#xff0c;模拟机甲内部或科技界面 */ color: #fff; /* 字体颜色为白色&a…...

【MSYS】Windows Terminal 集成

Windows Terminal 集成 MSYS2安装在默认位置C:\msys64打开Windows Terminal打开JSON配置文件文件。 添加如下配置&#xff1a; "profiles": {"defaults": {},"list": [{"guid": "{71160544-14d8-4194-af25-d05feeac7233}"…...