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

前端不同架构的分层设计

news 2026/2/10 1:29:38

1. 架构设计分层:

(1). 系统架构:

①. 应用场景:a. 应用在整个系统内,如与后台服务如何通信,与第三方系统如何集成.②. 前提条件:a. 了解前端系统与其它系统间的关系,包括业务关系和协作机制.b. 了解后端系统,需要规定与后台数据传递的机制,包括:(1). api设计规范(2). 访问授权的一个开放标准(OAuth)跳转token的验证(3). 数据传递cookie等.c. 了解前后端关系,如前后端分离的架构设计③. 前后端分离的架构设计:a. 指的是如何实施技术决策.b. 包括:(1). 用户鉴权(2). API接口管理和设计、API文档管理(3). Mock的使用(4). BFF(服务于前端的后端、node.js)(5). 是否需要服务端渲染(6). 应用间的分层(7). 软件的性能优化(8). 代码的拆分(9). 项目的管理等

(2). 应用级架构:

①. 应用场景:a. 应用级架构可以看作系统级架构的细化.b. 单个应用与其它外部应用的关系,微服务架构下多个应用的协作、数据交换等:(1). 比如一个微前端子应用与其它子应用的交互(2). 或者单一的子应用与主应用数据交换②. 应用级架构设计的形式:a. 应用间的脚手架：用于整体应用、项目的生成b. 模式库：Utils方法库、UI库c. 设计系统：整体应用级架构内部的功能实现、与外部的信息交互等

(3). 模块级架构:

①. 应用场景:a. 开始业务编码之前进行的设计,称为迭代过程

(4). 代码级架构:

①. 规范与原则:a. 规范:(1). eslint、stylelint、htmllintb. 软件的设计原则、设计模式②. 开发流程③. 代码质量:a. 代码可维护性、可扩展性b. 简单代码可维护性高,越是抽象代码越难以维护

2. 微前端:

①. 定位:a. 应用级架构方案:(1). 在一个系统内微前端是应用间的架构方案(2). 微前端整体的子应用是应用在一个系统之间b. 系统级架构方案:(1). 对于整体的应用而言,在多个应用之间,微前端是一种系统间等架构方案(2). 微前端负责的是调度所有的子应用,不管是每个子应用的渲染、数据依赖的更新和获取、子应用的激活与卸载c. 总结:(1). 微前端是将多个前端应用以某种形式结合在一起进行应用②. 应用场景:a. 旨在解决单体应用在一个相对长的时间跨度下b. 由于参与的人员、团队的增多、变迁,从一个普通应用演变成一个巨石应用(Frontend Monolith)c. 随之而来的应用不可维护、不利于扩展的问题d. 解决方案:(1). 可以使用微前端将一个巨石应用拆解成颗粒度细的应用来进行维护

相关文章：

前端不同架构的分层设计

1. 架构设计分层: (1). 系统架构: ①. 应用场景:a. 应用在整个系统内,如与后台服务如何通信,与第三方系统如何集成.②. 前提条件:a. 了解前端系统与其它系统间的关系,包括业务关系和协作机制.b. 了解后端系统,需要规定与后台数据传递的机制,包括:(1). api设计规范(2). 访问授…...

编程日记 2023/12/19 17:49:51

android系统镜像文件

boot.img：这是包含内核和设备树（Device Tree）的镜像文件。它被引导加载程序（bootloader）加载以启动系统，并负责将控制权转交给内核。 dtbo.img：这是设备树增量编译（Device Tree Ove…...

编程日记 2023/12/19 17:46:48

相位的重要性

在过去的几年中，相干信号和图像处理尖端技术的开发和应用有了显著的增长。相干处理的特点是使用一个称为相位的单一量[1]。相比之下，非相干处理只利用信号幅度或强度。需要进行相干处理的例子包括合成孔径雷达（SAR）、合成孔径声纳…...

编程日记 2023/12/19 17:45:47

（三十三）补充Python经典面试题（吸收高级编程特性）

第一题： def func(a, b[]): pass一、上题讲解： 这个函数定义有一个默认参数b，它的默认值是一个空列表[]。这道面试题涉及到Python中函数参数默认值的一些重要概念和陷阱。 首先，当你调用这个函数时，如果不传递参数b…...

编程日记 2023/12/19 17:41:43

SQL进阶理论篇（四）：索引的结构原理（B树与B+树）

文章目录 简介如何评价索引的数据结构设计好坏二叉树的局限性什么是B树什么是B树总结参考文献 简介 我们在上一节中说过，索引其实是一种数据结构，那它到底是一种什么样的数据结构呢？本节将简单介绍一下几个问题： 什么样的数据结…...

编程日记 2023/12/19 17:40:42

springMVC-模型数据的处理

一、数据放入到request域当中 1、把获取的数据放入request域中&#xff0c; 方便在跳转页面去显示 <a>添加主人信息</a> <form action"vote/vote04" method"post" >主人id&#xff1a;<input type"text" name"id&q…...

编程日记 2023/12/19 17:39:42

计算机组成原理-微指令的设计与微程序控制单元的设计

文章目录 微指令的设计微指令的格式微指令的编码方式水平型微指令的操作控制部分的编码方式直接编码字段直接编码例题字段间接编码方式 微指令的地址形成方式例题小结 微程序控制单元的设计微程序设计分类硬布线与微程序的比较 微指令的设计 微指令的格式 水平型微指令的操作…...

编程日记 2023/12/19 17:34:36

PyTorch机器学习与深度学习

近年来&#xff0c;随着AlphaGo、无人驾驶汽车、医学影像智慧辅助诊疗、ImageNet竞赛等热点事件的发生&#xff0c;人工智能迎来了新一轮的发展浪潮。尤其是深度学习技术&#xff0c;在许多行业都取得了颠覆性的成果。另外&#xff0c;近年来&#xff0c;Pytorch深度学习框架受…...

编程日记 2023/12/19 17:32:34

羊奶vs牛奶，羊大师告诉你谁是更营养的选择？

羊奶vs牛奶&#xff0c;羊大师告诉你谁是更营养的选择&#xff1f; 羊奶和牛奶是两种常见的乳制品&#xff0c;它们不仅在口味上有所差异&#xff0c;而且在营养成分方面也存在一些差异。本文将对羊奶和牛奶的营养成分进行全面对比&#xff0c;旨在帮助读者更好地了解这两种乳…...

编程日记 2023/12/19 17:29:32

机器学习之线性回归（Linear Regression）

概念 线性回归（Linear Regression）是机器学习中的一种基本的监督学习算法，用于建立输入变量（特征）与输出变量（目标）之间的线性关系。它假设输入变量与输出变量之间存在线性关系，并试图找到最佳拟合线来描述这种关系。 在简单线性回归中，只涉及两个变量：一个是自变量…...

编程日记 2023/12/19 17:27:30

ChatGPT与ArcGIS PRO 如何结合，打造一个全新的工作流程

在地学领域&#xff0c;ArcGIS几乎成为了每位科研工作者作图、数据分析的必备工具&#xff0c;而ArcGIS Pro3除了良好地继承了ArcMap强大的数据管理、制图、空间分析等能力&#xff0c;还具有二三维融合、大数据、矢量切片制作及发布、任务工作流、时空立方体等特色功能&#x…...

编程日记 2023/12/19 17:25:28

【深度学习】对比学习的损失函数

前言 对比学习损失&#xff08;Contrastive Learning Loss&#xff09;是一种用于自监督学习的损失函数。它侧重于学习一个特征空间&#xff0c;其中相似的样本被拉近&#xff0c;而不相似的样本被推远。在二分类任务中&#xff0c;对比学习损失可以用来学习区分正负样本的特征…...

编程日记 2023/12/19 17:24:27

哈夫曼解码

【问题描述】 给定一组字符的Huffman编码表&#xff08;从标准输入读取&#xff09;&#xff0c;给定一个用该编码表进行编码的Huffman编码文件&#xff08;存在当前目录下的in.txt中&#xff09;&#xff0c;编写程序对Huffman编码文件进行解码。 例如给定的一组字符的Huffm…...

编程日记 2023/12/19 17:22:26

Excel小技能：excel如何将数字20231211转化成指定日期格式2023/12/11

给了一串数字20231211&#xff0c;想要转成指定格式的日期格式&#xff0c;发现设置单元格格式为指定日期格式不生效&#xff0c;反而变成很长很长的一串#这个&#xff0c;如图所示&#xff1a; 其实&#xff0c;正确的做法如下&#xff1a; 1&#xff09;打开数据功能界面&am…...

编程日记 2023/12/19 17:19:23

Selenium自动化测试框架（超详细总结分享）

设计思路 本文整理归纳以往的工作中用到的东西&#xff0c;现汇总成基础测试框架提供分享。 框架采用python3 selenium3 PO yaml ddt unittest等技术编写成基础测试框架&#xff0c;能适应日常测试工作需要。 1、使用Page Object模式将页面定位和业务操作分开&#xff…...

编程日记 2023/12/19 17:17:21

STM32 DAC+串口

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、DAC是什么&#xff1f;二、STM32 DAC1.什么型号有DAC2. 简介3. 主要特点4. DAC框图5. DAC 电压范围和引脚 三、程序步骤1. 开启DAC时钟2. 配置引脚 PA4 PA5…...

编程日记 2023/12/19 17:14:18

SolidWorks二次开发 C#-读取基于Excel的BOM表信息

SolidWorks二次开发 C#-读取基于Excel的BOM表信息 问题点来源解决方案及思路相关引用链接 问题点来源 这是一位粉丝问的一个问题&#xff0c;他说到: 老师&#xff0c;请问Solidworks二次开发工程图中"基于Excel的材料明细表"怎么读取里面的数据&#xff1f; Ps:这…...

编程日记 2023/12/19 17:11:14

maui中实现加载更多 RefreshView跟ListView（2）

一个类似商品例表的下拉效果&#xff1a; 代码 新增个类为商品商体类 public class ProductItem{public string ImageSource { get; set; }public string ProductName { get; set; }public string Price { get; set; }}界面代码&#xff1a; <?xml version"1.0&quo…...

编程日记 2023/12/19 17:10:12

win10环境下git安装和基础操作

简述 关于git的作用就不多赘述了&#xff0c;配合GitHub&#xff0c;达到方便人们日常项目维护和管理&#xff0c;每一次项目增删改查都可以看的清清楚楚&#xff0c;方便团队协作和个人项目日常维护。 下载git 首先我们自然是要到官网下载git&#xff0c;下载地址为https:/…...

编程日记 2023/12/19 17:08:10

将yolo格式转化为voc格式：txt转xml(亲测有效)

1.文件目录如下所示&#xff1a; 对以上目录的解释&#xff1a; 1.dataset下面的image文件夹&#xff1a;里面装的是数据集的原图片 2.dataset下面的label文件夹&#xff1a;里面装的是图片对应得yolo格式标签 3.dataset下面的Annotations文件夹&#xff1a;这是一个空文件夹&…...

编程日记 2023/12/19 17:03:02

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

编程新知 2025/11/29 6:54:19

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2026/1/24 14:31:01

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

编程新知 2026/1/25 13:13:20

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2026/2/7 10:59:04

【HTTP三个基础问题】

面试官您好&#xff01;HTTP是超文本传输协议&#xff0c;是互联网上客户端和服务器之间传输超文本数据&#xff08;比如文字、图片、音频、视频等&#xff09;的核心协议&#xff0c;当前互联网应用最广泛的版本是HTTP1.1&#xff0c;它基于经典的C/S模型&#xff0c;也就是客…...

编程新知 2025/12/10 6:18:55

mysql已经安装，但是通过rpm -q 没有找mysql相关的已安装包

文章目录 现象&#xff1a;mysql已经安装&#xff0c;但是通过rpm -q 没有找mysql相关的已安装包遇到 rpm 命令找不到已经安装的 MySQL 包时&#xff0c;可能是因为以下几个原因&#xff1a;1.MySQL 不是通过 RPM 包安装的2.RPM 数据库损坏3.使用了不同的包名或路径4.使用其他包…...

编程新知 2026/2/4 16:17:25

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/2/8 2:27:29

html css js网页制作成品——HTML+CSS榴莲商城网页设计（4页）附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

编程新知 2026/2/7 22:17:30