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

现代前端架构介绍(第一部分):App是如何由不同的构建块构成的

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

几周前,我的同事们对我们的前端架构、代码结构和面临的挑战很感兴趣。在做了几次关于如何构建可扩展且健壮的前端的演讲后,我觉得把它们都总结一下并与社区分享我们的策略是一个不错的主意。废话不多说,以下是第一部分。

我们先来看看一个典型的网页吧👀

一个典型的网页

普通用户看到的是垂直和水平的条形图,一个主要内容区域,其中包含一个艺术品列表和一个图表,但对于前端开发人员来说,只有组件(VBarComponent、HBarComponent、OverviewComponent等等)。

从前端开发者的角度来看,网页

这些组件以树形结构排列,通常以根节点的形式出现,通常称为主组件。每个现代前端应用程序至少必须有一个组件(即主组件)。

这棵树是基于组件的架构的基础。从现在开始,我们将看到它如何驱动前端世界的各个方面。

分析树形

人们很快就会注意到,在同一分支上放置的组件会协同工作,为用户提供一个独立且连贯的功能。然而,由于不同的功能所提供的商业价值不同,其在界面上的展示方式也不同,因此同一分支上的组件形状也会有所不同。

这种多样性使得代码结构成为一个挑战,因为与后端不同,前端没有标准化的N层架构来帮助组织应用程序的文件。

n层架构的例子

这里的解决办法是基于功能而不是层类型来驱动。每个功能都将其组件放入一个子文件夹中,这样可以帮助开发人员了解在何处添加新组件,同时保持对分支任何可能形状的灵活性。

<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                      * Overview feature folder<strong>|</strong>   ├──/Components                * Components folder<strong>|</strong>      ├──/ListComponent          * List component│      └──/ChartComponent         * Chart component│├──/Details                       * Details feature folder├──/Components                * Components folder├──SomeComponent           * Some component└──SomeOtherComponent      * SomeOther component</span></span></span></span>

虽然这是个直观的解决方案。

它很快遇到了一些限制。该如何处理技术组件?应该在哪里添加共享组件?

我们从“ feature ”这个词过渡到一个更通用、与功能领域耦合更少的词,我选择了“ brick ”。为什么呢?可以说我的应用程序是由砖块组成的。每个砖块都有特定的作用,但它们共同构成了应用程序的构建块。

在这个例子中,我的应用程序是由不同的砖块组成的:

  • 核心:包含应用程序启动所需的一切内容。它还为其他砖块(监控、日志记录等)提供了技术实用工具。
  • 共享:共享工具、小部件等所有在所有砖块中使用的元素,如提示框、错误对话框、排序函数等等。
  • 特点1, 2 & 3:与用户特定附加价值相关的功能域特征。
  • 功能A、B与C:也包含砖块功能,但它们的附加价值旨在为功能服务,而不是直接为应用程序服务,可以在一些功能砖块之间共享(例如功能A的情况)。

在本文中,我们了解到如何将网页转换为组件树。这种树形结构解释了我们的代码结构为何由功能驱动,以及我们如何将应用程序分割为具有独特角色的不同砖块。

我将在下一篇文章 《如何将功能架构分为三层》中继续介绍现代前端架构,深入探讨“砖块”的构成,并重点介绍更多与树形结构相关的问题及其处理方法。

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

相关文章:

现代前端架构介绍(第一部分):App是如何由不同的构建块构成的

远离JavaScript疲劳和框架大战&#xff0c;了解真正重要的东西 几周前&#xff0c;我的同事们对我们的前端架构、代码结构和面临的挑战很感兴趣。在做了几次关于如何构建可扩展且健壮的前端的演讲后&#xff0c;我觉得把它们都总结一下并与社区分享我们的策略是一个不错的主意。…...

Android 11 关于按键拦截/按键事件处理分享

系统在frameworks/base/services/core/java/com/android/server/policy/PhoneWindowManager.java处理按键事件,不管是物理按键还是 SystemUI的nav_bar上的虚拟按键(使用了KeyEvent类中的,比如:KeyEvent.KEYCODE_VOLUME_UP). 主要注意的有两个函数&#xff1a; interceptKeyBef…...

最新TomatoIDC开源虚拟主机销售系统源码/有插件系统模块+模版系统

源码简介&#xff1a; 最新TomatoIDC开源虚拟主机销售系统源码&#xff0c;它有一个方便扩展的插件和模版系统模块&#xff0c;使用实用。 TomatoIDC&#xff0c;一款遵循GPL3.0协议的开源虚拟主机销售系统&#xff0c;不仅有着可以轻松扩展的插件系统和模版系统&#xff0c;…...

简单的docker学习 第4章docker容器

第4章 Docker容器 4.1 容器基础 4.1.1 容器启动流程 通过 docker run 命令可以启动运行一个容器。该命令在执行时首先会在本地查找指定的镜像&#xff0c;如果找到了&#xff0c;则直接启动&#xff0c;否则会到镜像中心查找。如果镜像中心存在该镜像&#xff0c;则会下载到…...

PHP中如何声明数组

数组是一种数据结构&#xff0c;用于存储一系列的值或对象&#xff0c;这些值或对象可以通过索引&#xff08;或键&#xff09;来访问。在PHP中&#xff0c;数组是一种复合类型的数据结构&#xff0c;可以存储多个值&#xff0c;这些值可以是整型、字符串、布尔值&#xff0c;甚…...

JavaScript前端面试题——fetch

什么是fetch&#xff1f; fetch&#xff1a;fetch是浏览器内置的api&#xff0c;用于发送网络请求 ajax&axios&fetch的关系 ajax&#xff1a;ajax 是一种基于原生 JavaScript 的异步请求技术。它使用 XMLHttpRequest 对象来发送请求和接收响应。 axios&#xff1a;…...

在Qt中获取Windows中进程的PID

主要是用到了系统自带的工具【tasklist.exe】 利用 QProcess调用这个tasklist有一点坑&#xff0c;已经在代码中指出了。 指定为csv格式输出的话&#xff0c;在后处理时比较方便。 QList<quint64> listProcessIdentifier(QString processName) {QProcess process;QStrin…...

8.1-java+tomcat环境的配置+代理

一、回顾 1.安装nodejs&#xff0c;这是一个jdk一样的软件运行环境 yum -y list installed|grep epel yum -y install nodejs node -v 2.下载对应的nodejs软件npm yum -y install npm npm -v npm set config .....淘宝镜像 3.安装vue/cli command line interface 命令行…...

gorm框架实现基本的增删改查

连接数据库 package mainimport ("github.com/jinzhu/gorm"_ "github.com/jinzhu/gorm/dialects/mysql" )func main() {db, err : gorm.Open("mysql","root:roottcp(127.0.0.1:3306)/test?charsetutf8mb4&parseTimeTrue&locLocal…...

AUTOSAR介绍

1、AUTOSAR架构介绍 AUTOSAR(AUTomotive Open System ARchitecture&#xff0c;汽车开放系统架构)是汽车和软件行业领先公司的全球合作联盟&#xff0c;为智能移动开发和建立标准化的软件框架以及开放的E/E系统架构。考虑到目前和未来市场中不同的汽车E/E架构&#xff0c;AUTOS…...

10. 计算机网络HTTP协议

1. 前言 无论是作为后端开发、前端开发、测试开发程序员或者是运维人员,在面试过程中,大概率都会被问到 HTTP 协议相关题目。 因为伴随着 2010 年之后移动互联网在全世界的高速发展,各种各样的浏览器(Chrome、FireFox、Safari 等)层出不穷,也诞生了诸多服务端开发的语言…...

“职场中,不要和上司作对”,真的很重要吗?你认同这句话吗?

在职场上&#xff0c;领导对下属的期望永远都只有两个字&#xff0c;不是忠诚&#xff0c;也不是能力&#xff0c;而是省心。 领导对下属的要求就是别让我操心。 在职场中&#xff0c;通常面临的首要问题就是如何与领导相处。 把职场中的前辈当作老师来尊重&#xff0c;你尊…...

可视化目标检测算法推理部署(一)Gradio的UI设计

引言 在先前RT-DETR模型的学习过程中&#xff0c;博主自己使用Flask框架搭建了一个用于模型推理的小案例&#xff1a; FlaskRT-DETR模型推理 在这个过程中&#xff0c;博主需要学习Flask、HTML等相关内容&#xff0c;并且博主做出的页面还很丑&#xff0c;那么&#xff0c;是…...

【PyTorch】基于YOLO的多目标检测项目(一)

【PyTorch】基于YOLO的多目标检测项目&#xff08;一&#xff09; 【PyTorch】基于YOLO的多目标检测项目&#xff08;二&#xff09; 目标检测是对图像中的现有目标进行定位和分类的过程。识别的对象在图像中显示有边界框。一般的目标检测方法有两种&#xff1a;基于区域提议的…...

spring boot 实现 Stream 钉钉事件订阅

1: 参考链接 https://open.dingtalk.com/document/orgapp/develop-stream-mode-push-server 2&#xff1a;钉钉开放平台订阅配置 配置之后运行一下上面提供的链接 里面的main方法&#xff0c;验证通道 3&#xff1a;订阅启动方式 EventListenerThread eventListenerThrea…...

基于 Rough.js 的 Vue 散点图绘制

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 基于 Rough.js 的 Vue 散点图绘制 应用场景 本代码展示了如何使用 Rough.js 库在 Vue 应用程序中绘制散点图。Rough.js 是一个轻量级 JavaScript 库&#xff0c;用于创建具有手绘风格的可视化效果。散点图是一…...

【c++】用c++指针传递来模拟“靶向治疗”

一:源码: #include <iostream>void targetedTherapy(bool* flag) {if (*flag == false) {*flag = true;} }int main() {//代表一系列癌细胞//true为健康细胞 false为癌变细胞bool cancerCell[7] = {true, false, true, true, true, true, false};for (int i = 0; i &…...

如何开启idea中的断言功能?

目录 一、什么是断言&#xff1f; 二、Java断言的语法 三、开启断言 一、什么是断言&#xff1f; 断言&#xff08;assert&#xff09;是 Java 中的一条语句&#xff0c;一种在程序中的逻辑&#xff08;如一个结果为真或假的逻辑判断式&#xff09;&#xff0c;目的是验证软…...

大模型之语言大模型技术

本文作为大模型综述第二篇,介绍语言大模型基本技术。 近年来,在 Transformer 架构基础上构建的预训练语言模型为自然语言处理领域带来了一系列突破式进展,成为人工智能主流技术范式。预训练语言模型采用“预训练+微调”方法,主要分为两步: 1)将模型在大规模无标注数据上…...

浮点数例外 (核心已转储) 的问题记录

一般这种问题&#xff0c;是程序运行过程中出现浮点数运算错误导致的程序崩溃 浮点异常可能由以下几个原因引起&#xff1a; 除以零&#xff1a;当程序中出现除以零的操作时&#xff0c;会触发浮点异常。例如&#xff0c;当一个数除以0时&#xff0c;会导致浮点异常。数值溢出…...

JVM垃圾回收机制全解析

Java虚拟机&#xff08;JVM&#xff09;中的垃圾收集器&#xff08;Garbage Collector&#xff0c;简称GC&#xff09;是用于自动管理内存的机制。它负责识别和清除不再被程序使用的对象&#xff0c;从而释放内存空间&#xff0c;避免内存泄漏和内存溢出等问题。垃圾收集器在Ja…...

linux 下常用变更-8

1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行&#xff0c;YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID&#xff1a; YW3…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...

mac 安装homebrew (nvm 及git)

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

Linux中《基础IO》详细介绍

目录 理解"文件"狭义理解广义理解文件操作的归类认知系统角度文件类别 回顾C文件接口打开文件写文件读文件稍作修改&#xff0c;实现简单cat命令 输出信息到显示器&#xff0c;你有哪些方法stdin & stdout & stderr打开文件的方式 系统⽂件I/O⼀种传递标志位…...