当前位置: 首页 > 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;如核心、功能等。在这篇文章中&#…...

LeetCode Easy|【21. 合并两个有序链表】

力扣题目链接 状态&#xff1a;拿到本题的第一反应就是使用双指针&#xff0c;分别指向两个链表的开头位置。 随后的思路就是以第一条链表为基准完成插入&#xff0c;并且对于遍历到的每个节点都应该保存其状态。 写了一下代码后发现&#xff0c;我们应该以第一个节点较小的链表…...

大模型的架构参数是指定义模型基本结构和组成的各种参数,这些参数对模型的性能、训练效率和泛化能力具有重要影响。以下是对大模型架构参数的详细介绍

大模型架构参数 大模型的架构参数是指定义模型基本结构和组成的各种参数&#xff0c;这些参数对模型的性能、训练效率和泛化能力具有重要影响。以下是对大模型架构参数的详细介绍&#xff1a; 一、基本结构和组成 层数&#xff1a;模型的层数是指模型中全连接网络或特定结构…...

人工智能会越来越闭源——对话东北大学副教授王言治 | Open AGI Forum

作者 | Annie Xu 责编、采访 | Echo Tang 出品丨GOSIM 开源创新汇 在读期间研究方向为并不“火”的模式识别与深度学习&#xff0c;毕业却刚好踩上人工智能计算研究的风口……来自美国东北大学的王言治副教授深耕深度学习与大模型&#xff0c;前瞻性地探索大模型的本地化部署…...

【前端】(仅思路)如何在前端实现一个fc手柄,将手机作为游戏手柄设备。

文章目录 背景界面demo原型图&#xff08;没错&#xff0c;就是它&#xff0c;童年回忆&#xff09; 遇到的问题最终后端demo(甚至比前端逻辑更简单) 背景 突发奇想&#xff0c;想要在前端实现一个fc游戏手柄&#xff0c;然后控制电脑的nes模拟器玩玩魂斗罗。 思路很简单&…...

三十种未授权访问漏洞合集

未授权访问漏洞介绍 未授权访问可以理解为需要安全配置或权限认证的地址、授权页面存在缺陷&#xff0c;导致其他用户可以直接访问&#xff0c;从而引发重要权限可被操作、数据库、网站目录等敏感信息泄露。---->目录遍历 目前主要存在未授权访问漏洞的有:NFS服务&a…...

【Golang 面试 - 进阶题】每日 3 题(十五)

✍个人博客&#xff1a;Pandaconda-CSDN博客 &#x1f4e3;专栏地址&#xff1a;http://t.csdnimg.cn/UWz06 &#x1f4da;专栏简介&#xff1a;在这个专栏中&#xff0c;我将会分享 Golang 面试中常见的面试题给大家~ ❤️如果有收获的话&#xff0c;欢迎点赞&#x1f44d;收藏…...

Java中实现文件上传

目录 1、文件上传本地 1.1 原理 1.2 如何使用文件上传 1.2.1 引入文件上传的依赖 1.2.2 配置文件上传拦截器 1.2.3 完成文件上传的代码 2、文件上传oss服务器 2.1 为什么需要上传到oss服务器 2.2 如何使用oss 2.2.1 开启oss服务 2.2.2 在Java中引入依赖 2.2.3 查看自…...

一种别样的Unicode Python编码方式,完美转换表情和阿拉伯语

我们可能有时候在处理字符时需要处理到非ASCII的字符&#xff0c;比如将表情、阿拉伯语转换为Unicode字符&#xff0c;从而避免在传输时会出现乱码的情况。 Unicode验证网站&#xff1a; unicode转换网站 目的&#xff1a;转换下面除ASCII字符外的字符为Unicode字符&#x1f…...

小白的晋升之路

编程小白如何成为大神&#xff1f;大学新生的最佳入门攻略 编程已成为当代大学生的必备技能&#xff0c;但面对众多编程语言和学习资源&#xff0c;新生们常常感到迷茫。如何选择适合自己的编程语言&#xff1f;如何制定有效的学习计划&#xff1f;如何避免常见的学习陷阱&…...

WebLogic:CVE-2017-10271[XML反序列化]

漏洞成因 Weblogic的WLS Security组件对外提供 webservice服务 其中使用了XMLDecoder来 解析用户传入的XML数据 在解析的过程中出现 反序列化漏洞 &#xff0c;导致可执行任意命令 原理&#xff1a;https://xz.aliyun.com/t/10172 靶场部署 1.进入靶场目录 cd /vulhub-maste…...

Day13--JavaWeb学习之Servlet后端渲染界面

基于Day12中登录页面实现的修改&#xff0c;这里实现的是如果登录成功&#xff0c;跳到LoginSuccess页面中展示后端查询到数据库中的信息&#xff0c;并实现在浏览器实现插入数据和删除数据&#xff08;mybaits&#xff09;。 当输入账号密码正确后进入LoginSuccess页面&#x…...

【MySQL】全面剖析索引失效、回表查询与索引下推

1.索引失效的情况 以tb_user表举例&#xff0c;id为主键索引、name和phone字段上建立了一个普通索引&#xff0c;name和phone均为varchar类型。 索引列运算 当在 WHERE 子句或 JOIN 子句中对列使用函数或表达式时&#xff0c;索引会失效。 执行以下语句&#xff0c;可以发现执…...

1、爬⾍概述

1. 什么是爬虫&#xff1f; 爬虫&#xff08;Web Crawler&#xff09;是一种通过编写程序自动访问并提取互联网上数据的技术。爬虫可以帮助我们在浏览网页时自动收集和保存一些有用的数据&#xff0c;例如图片、视频和文本信息。简单来说&#xff0c;爬虫就是自动化的浏览器。…...

科普文:微服务之分布式链路追踪SkyWalking单点服务搭建

1. 概述 1.1 概念 SkyWalking 是什么&#xff1f; SkyWalking 极简入门 | Apache SkyWalking FROM Apache SkyWalking 分布式系统的应用程序性能监视工具&#xff0c;专为微服务、云原生架构和基于容器&#xff08;Docker、K8s、Mesos&#xff09;架构而设计。 提供分布式追…...

R 语言学习教程,从入门到精通,R的安装与环境的配置(3)

1、R 基础语法 一门新的语言学习一般是从输出 “Hello, World!” 程序开始&#xff0c;R 语言的 “Hello, World!” 程序代码如下&#xff1a; myString <- "Hello, World!" print ( myString )以上示例将字符串 “Hello, World!” 赋值给 myString 变量&#x…...

【Pageadmin】之cms漏洞

方法一&#xff1a;上传模块拿webshell 首页如下 第一步&#xff1a;访问admin/login&#xff0c;登录后台 第二步&#xff1a;使用哥斯拉工具生成payload 然后自动生成了一个asp的payload 第三步&#xff1a;上传文件 将asp文件压缩为压缩包&#xff0c;上传。 解压访问1.asp…...

AIGC重塑设施农业:让农事操作更智能,生产效率更高

设施农业是现代农业的重要组成部分,随着人工智能等前沿技术的快速发展,这个领域迎来了新的变革机遇。尤其是大语言模型(Large Language Model,LLM)技术的崛起,其强大的语言理解和知识汇聚能力,为设施农业智能化发展带来了新的想象空间。本文将深入探讨大模型技术在设施农业生产…...

netty应用-手写RPC

文章目录 手写RPC之案例定位与通信过程介绍RPC框架案例定位服务端与客户端架构通信过程1. 服务注册与发现2. 请求序列化与传输3. 请求处理与响应4. 响应反序列化与结果处理实现细节1. 服务端2. 客户端技术选型关键挑战总结手写RPC之请求响应通信协议定制协议结构示例消息头格式…...

私域流量变迁与精细移动化趋势下的AI智能名片小程序源码应用探索

摘要&#xff1a;随着移动互联网技术的飞速发展&#xff0c;私域流量的价值日益凸显&#xff0c;成为企业营销战略的重要组成部分。私域流量的精细化和移动化趋势不仅改变了传统的营销格局&#xff0c;也为新兴技术的应用提供了广阔空间。本文深入探讨了私域流量的变迁历程&…...

XCTF-web-easyupload

试了试php&#xff0c;php7&#xff0c;pht&#xff0c;phtml等&#xff0c;都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接&#xff0c;得到flag...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

【从零学习JVM|第三篇】类的生命周期(高频面试题)

前言&#xff1a; 在Java编程中&#xff0c;类的生命周期是指类从被加载到内存中开始&#xff0c;到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期&#xff0c;让读者对此有深刻印象。 目录 ​…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

Windows安装Miniconda

一、下载 https://www.anaconda.com/download/success 二、安装 三、配置镜像源 Anaconda/Miniconda pip 配置清华镜像源_anaconda配置清华源-CSDN博客 四、常用操作命令 Anaconda/Miniconda 基本操作命令_miniconda创建环境命令-CSDN博客...

华为OD机试-最短木板长度-二分法(A卷,100分)

此题是一个最大化最小值的典型例题&#xff0c; 因为搜索范围是有界的&#xff0c;上界最大木板长度补充的全部木料长度&#xff0c;下界最小木板长度&#xff1b; 即left0,right10^6; 我们可以设置一个候选值x(mid)&#xff0c;将木板的长度全部都补充到x&#xff0c;如果成功…...