10 Web全栈 组件化设计

前端架构层次设计

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

系统内架构
即应用在整个系统内的关系，如与后台服务器通信，与第三方集成

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

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

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

前端组件化架构

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

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

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

原则与模式

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

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