10 Web全栈 组件化设计

前端架构层次设计

前端技术体系庞大,层级也非常分明,在架构设计领域中不能一概而论,任何应用种类都有自己独立的架构体系。比如在前端开发领域,在框架基础上进行应用构建的开发者锁思考的问题,与在组件库设计方面的开发者所思考的问题是完全不同的。所以在架构设计方面是由层次划分的,答题可以分为四个层次。

在这里插入图片描述
系统内架构
即应用在整个系统内的关系,如与后台服务器通信,与第三方集成

应用级架构
即应用外部的整体架构,如多个应用之间如何共享组件、如何通信等

模块级架构
即应用内部的模块架构,如代码的模块化、数据的状态的管理等。

代码级:规范与原则
即从基础设施来保障架构实施

前端组件化架构

前端组件化架构是将项目中广泛使用的关注点分离出来,作为可复用的组件进行对外提供。这种方式可以让分离出来的每一个小部分都拥有自己的关注点。这种拆分方式可以将一个复杂的视图组成或功能,拆分成多个松散耦合的独立组件,大大降低系统的复杂度。

用这个方式来看带应用架构,是一种由顶至底的方式。而在日常开发中,我们则是由底至上来开发应用的,即先构建UI组件,在构建页面。从前端来看,组件可以被视为构成用户界面的一个小功能,其表现形式是组件库,而组件库的作用是通过复用已有的组件来快速构建UI应用。从UI设计者来看,单单只有组件是不够的,还需要关注他们之间的配合。

所以在创建一套组件系统时,所经历的步骤必然与在实际应用中封装独立组件的步骤要多很多。在组件库制作前首先需要制作一套设计指南,这个设计指南会体现组件库的设计理念,初心、颜色搭配、排版布局等等一系列设计和规则。

原则与模式

在实际搭建组件库前,需要对整个的组件库做出完善的UI设计,如按钮、表单元素、导航菜单、模态框和图标,以及设计规范

这里需要设计的是我们所搭建的组件库中所有的基础UI组件如何组合搭配形成一个页面。他们摆放的位置和相互的关系就是一个UI系统特有的模式

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/34652.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【文件 part 6 - 格式化读写文件函数 随机读写】

格式化读写文件函数 /* 函数调用: */ fprintf ( 文件指针,格式字符串,输出表列); fscanf ( 文件指针,格式字符串,输入表列);/** 函数功能:* 从磁盘文件中读入或输出字符* fprint…

SAP从入门到放弃系列之生产订单结算

文章目录概览 一、概述二、结算的模式2.1、订单相关的成本归集2.2、产品相关的成本归集 最后 一、概述 当生产从计划到订单,生产领料、投料、报工、入库整个生产流程完成后,生产订单中会产生对应的财务数据,或者说借贷项数据(材料…

npm启动,node.js版本过高

“dev_t”: “set NODE_OPTIONS”–openssl-legacy-provider" & npm run dev\n"

Ubuntu安装碰撞检测库FCL以及前置依赖libccd, OctoMap

Ubuntu安装碰撞检测库FCL以及前置依赖libccd, OctoMap 大致安装流程见FCL github地址,但是在安装libccd时存在一些问题。 建议完整浏览后再进行安装 1.编译libccd的报错 首先FCL页面已经说明libccd要直接克隆源码,不要下载压缩包。 其次,在…

MAYA传送带上放石头(新旧粒子系统)

播放试试 使用老的粒子系统 particleShape1.shuliangrand(0,5); particleShape1.daxiao<<rand(0.2,0.5),rand(0.2,0.5),rand(0.2,0.5)>>; particleShape1.xuanzhuan<<rand(360),rand(360),rand(360)>>; 使用新的粒子系统 粒子向后滑落 新粒子系统能进行…

SSMP整合案例(11) 在界面中实现添加操作

上文 SSMP整合案例(10) vue端调整项目环境 发送请求 基本界面编写我们搭建了基本的页面结构 然后 我们来做个新增的功能 首先 新增 我们肯定是用户点击了这个新建之后 我们再来处理这个逻辑 我们之前的代码 新增是有绑定 一个事件的 但是这个 AddBook中并没有内容 首先 我们…

4.44ue4:相机抖动

1.创建相机抖动类 右键内容面板&#xff0c;点击创建蓝图类&#xff0c;搜索shake&#xff08;camera shake&#xff09; 2.使用相机抖动&#xff1a; 节点&#xff1a;play world .. api解释&#xff1a; epicenter&#xff1a;震源 inner Radius&#xff1a;内圈范围&a…

【梦辛工作室】java实现简易消息队列处理器 可分区 分区顺序消费MxMQ

大家好哇&#xff0c;又是我&#xff0c;梦辛工作室的灵&#xff0c;最近在巩固JUC并发包&#xff0c;突然想到如果自己的应用体量不大&#xff0c;但有需要消息队列来实现应用解耦和削峰来缓解服务器突增压力&#xff0c;比如抢票时&#xff0c;突然有比较用户同时抢票&#x…

分布式运用——rsync远程同步

分布式运用——rsync远程同步 一、rsync的背景和原理1.rsync的功能2.rsync的应用场景3.使用rsync的基本命令4.scp与rsync的区别 二、配置rsync源服务器1.关闭防火墙2.建立/etc/rsyncd.conf 配置文件3.保证所有用户对源目录/var/www/html 都有读取权限4.启动 rsync 服务程序5.关…

flutter3.7版本下使用flutter boost解决使用platview崩溃或异常问题

背景 工程使用了混合开发&#xff0c;使用flutter boost插件&#xff0c;flutter 的activity1 frament1 跳转activity2 frament2&#xff0c;frament1 包含platformView&#xff0c;按照上面老哥解决崩溃问题的基础上&#xff0c;出现activity2 frament2返回activity1 framen…

“未来之光:揭秘创新科技下的挂灯魅力“

写在前面&#xff1a; 高度信息化当下时代&#xff0c;对电脑及数字设备的需求与日俱增无处不在&#xff0c;随之而来的视觉疲劳和眼睛问题也攀升到了前所未有的高度。传统台灯对于长时间使用电脑的人群来说是完全无法解决这些问题的。一款ScreenBar Halo 屏幕挂灯&#xff0c;…

数学建模——插值(下)

本文是面向数学建模准备的&#xff0c;是介绍性文章&#xff0c;没有过多关于原理的说明&#xff01;&#xff01;&#xff01; 目录 一、2维插值原理及公式 1、二维插值问题 2、最邻近插值 3、分片线性插值 4、双线性插值 5、二维样条插值 二、二维插值及其Matlab工具箱…

微信小程序

私人博客 许小墨のBlog —— 菜鸡博客直通车 系列文章完整版&#xff0c;配图更多&#xff0c;CSDN博文图片需要手动上传&#xff0c;因此文章配图较少&#xff0c;看不懂的可以去菜鸡博客参考一下配图&#xff01; 系列文章目录 前端系列文章——传送门 后端系列文章——传送…

opencv使用applyColorMap()函数,可以将灰度图或彩色图转换成自定义的彩色图,或opencv提供的20多种色彩值

文章目录 1、applyColorMap()函数的使用&#xff1a;&#xff08;1&#xff09;函数原型&#xff1a;void applyColorMap(InputArray src, OutputArray dst, int colormap)void applyColorMap(InputArray src, OutputArray dst, InputArray userColor) &#xff08;2&#xff0…

利用Python构建宁德时代、比亚迪、隆基绿能股票时间序列预测模型

存货 import tushare as ts # 导包 import numpy as np import matplotlib.pyplot as plt from scipy.signal import find_peaks from scipy.stats import norm import datetime import pandas as pd import seaborn as sns # pip install seaborn import matplotlib.patches …

WideNet:让网络更宽而不是更深

这是新加坡国立大学在2022 aaai发布的一篇论文。WideNet是一种参数有效的框架&#xff0c;它的方向是更宽而不是更深。通过混合专家(MoE)代替前馈网络(FFN)&#xff0c;使模型沿宽度缩放。使用单独LN用于转换各种语义表示&#xff0c;而不是共享权重。 混合专家(MoEs) 条件计…

数通王国历险记之TCP协议下的三大协议的验证实验

系列文章目录 数通王国历险记&#xff08;1&#xff09; 前言 一&#xff0c;我们要先知道PDU是什么&#xff1f; 二、TCP协议下的三大协议的验证实验 1.FTP的验证实验 1&#xff0c;拓扑图 2.将lsw4配置一下 3&#xff0c;FTP服务器端开启FTP服务&#xff1a; 4&#x…

LIN诊断实现MCU本地OTA升级

一、目标 通过PC端上位机实现MCU本地的OTA升级,本篇文章对实现的目的、需要用到的第三方工具、LIN诊断帧、升级协议、MCU端升级过程以及PC端升级过程做详细说明。 二、目的 最近在做MCU项目时需要将样机寄给客户进行验证,在客户的验证过程中要求参数可调试,如果需要修改软…

vue下基于elementui自定义表单-后端数据设计篇

vue下基于elementui自定义表单-后端篇 自定义表单目前数据表单设计是基于数据量不大的信息单据场景&#xff0c;因为不考虑数据量带来的影响。 数据表有: 1.表单模版表&#xff0c;2.表单实例表&#xff0c;3.表单实例项明细表&#xff0c;4表单审批设计绑定表 以FormJson存…

RuoYi(分离版) 使用代码生成器添加子模块(idea版)

右键总文件夹&#xff0c;选择新模块添加新模块 新建的业务模块 新建的业务模块中添加若依通用模块工具 <dependencies><dependency><groupId>com.ruoyi</groupId><artifactId>ruoyi-common</artifactId></dependency></depen…