网站首页 > 技术文章正文

这是我的第一篇Web前端架构浅谈，说说前端架构

ins518 2024-10-04 02:02:52 技术文章 21 ℃ 0 评论

最近几年都在做Web前端相关工作，虽然我把自己归于全栈工程师，但最近确实都在研究前端相关工作。还记得年轻时，经常写博客，但过了三十后，基本不怎么写了，想想，也该梳理下知识，一方面，进行知识积累，增加点成就感，另一方面，也给孩子做个学习榜样。

Web前端架构体系方面，打算写十篇左右的文章，因为相关文章很多很多，而我最推崇的是费曼学习法则，所以我尽量写出让大家都能轻松阅读的文章。

现在我们进入正题，淡淡Web前端架构。

首先说下，为什么要架构呢?

你想象下，你在建一幢高楼，结果没有图纸；在拼乐高星战飞船，没有说明；在拼拼图，没有背面标注，也没有原缩小图参考。这时候，怎么办？当然是凉拌。你的答案已经很明显了，结局只有两种，花更多的时间来做，或就根本做不出来。

架构设计的最重要目的是为了进行整体系统概览，以及开发方向指导。

而架构要包含的内容，简单说就是下面四个

1、系统间关系

2、系统内关系

3、应用内架构

4、系统规范与原则

而架构的原则主要是三个方面

1、架构的合适：架构就像衣服，不能太长，也不能太短

2、可扩展的：架构需要充分考虑扩展性

3、持续不断的：架构不是一次性物品，是一个跟着软件生命周期的长期过程

好吧，前面说了半天，都没到前端架构，现在我们来说下前端架构，在早期，前端基本上是没有架构的，对，都是堆HTML、CSS和JS，架构？没有的！我们都是梭哈代码的。

在这混沌的年代，一切都是那么的不美好。

有一天，Node.js出现了，于是，前端有了更好的包管理工具，有了模块管理的概念和应用，有了更好的构建工具，加上后来的前后端分离，组件化思路，Web前端就慢慢形成了自己的架构体系。

而随着Web系统的复杂化及模块化、组件化分解，我们可以把Web系统进行如下分层

1、系统级

2、应用级

3、模块级

4、代码级

每个层级对应不同的架构方向与功能

系统级的架构，我们一般考虑是对接外部系统需要考虑的场景，如你对接微信登录，对接外部SDK，或集成BFF，对API进行管理或梳理等。

应用级别，一般是对应于微服务，一个系统里面会有多个微服务，而对接这些微服务的操作，我们归于应用级别，当然，你有使用什么脚手架，有使用什么第三方库，也应该归于应用级别。

模块级，就是指你的组件化开发中的组件设计了，模块化，组件化后，对各模块及组件的功能梳理，以及对功能的实现

代码级，就比较好理解了，在代码层面，使用SOLID原则，进行代码编写，减少Bug。