前端技术大图

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第13天，点击查看活动详情。

我们先看两张前端的技术大图，这是在网上随便找找，可以对前端大图有个基本的了解。下面我们看看如何画出一张前端技术大图。

前端技术架构图，本质上是要用图来表达出架构。

那么什么是架构？百度上搜到的是，整体结构与组件的抽象描述，即整体结构与组件的关系。它的本质上是用来管理复杂性，保证系统有序且快速发展。通常影响架构的原因有两种，一个是内部优化，一个是需求的变化。

架构的过程就是建模的过程，要先有合理的模型，才能有好的架构。 业务建模就是把业务进行合理的抽象，有业务模块图和业务流程图等等。业务建模的过程需要先搜集大量的数据，然后进行一定的抽象，才形成大图。

系统建模就是对研发的实现角度去产出的图，用来指导研发的实践。业务建模到系统建模，两者是有密切关联的。系统建模需要：

1. 拆分系统，系统拆子模块，模块内拆，层层分解到能讲明白为止
2. 注意将已经知道的场景套进去，找出阻塞和模糊的地方，不断梳理优化

要做好抽象，抽象的的核心就是着眼于问题的本质，不要被细枝末节给带偏。抽象可以划分为多个层次，越往下越偏向于实现。主体、行为和生命周期是非常重要的三个要素，不要因为抽象而脱离了实际。

系统建模通常需要从上到下的方法论。最重要的是想清楚面向谁，解决什么问题，再决定从哪个角度、哪个层次去抽象。