前端架构层次设计
前端技术体系庞大,层级也非常分明,在架构设计领域中不能一概而论,任何应用种类都有自己独立的架构体系。比如在前端开发领域,在框架基础上进行应用构建的开发者锁思考的问题,与在组件库设计方面的开发者所思考的问题是完全不同的。所以在架构设计方面是由层次划分的,答题可以分为四个层次。
系统内架构
即应用在整个系统内的关系,如与后台服务器通信,与第三方集成
应用级架构
即应用外部的整体架构,如多个应用之间如何共享组件、如何通信等
模块级架构
即应用内部的模块架构,如代码的模块化、数据的状态的管理等。
代码级:规范与原则
即从基础设施来保障架构实施
前端组件化架构
前端组件化架构是将项目中广泛使用的关注点分离出来,作为可复用的组件进行对外提供。这种方式可以让分离出来的每一个小部分都拥有自己的关注点。这种拆分方式可以将一个复杂的视图组成或功能,拆分成多个松散耦合的独立组件,大大降低系统的复杂度。
用这个方式来看带应用架构,是一种由顶至底的方式。而在日常开发中,我们则是由底至上来开发应用的,即先构建UI组件,在构建页面。从前端来看,组件可以被视为构成用户界面的一个小功能,其表现形式是组件库,而组件库的作用是通过复用已有的组件来快速构建UI应用。从UI设计者来看,单单只有组件是不够的,还需要关注他们之间的配合。
所以在创建一套组件系统时,所经历的步骤必然与在实际应用中封装独立组件的步骤要多很多。在组件库制作前首先需要制作一套设计指南,这个设计指南会体现组件库的设计理念,初心、颜色搭配、排版布局等等一系列设计和规则。
原则与模式
在实际搭建组件库前,需要对整个的组件库做出完善的UI设计,如按钮、表单元素、导航菜单、模态框和图标,以及设计规范
这里需要设计的是我们所搭建的组件库中所有的基础UI组件如何组合搭配形成一个页面。他们摆放的位置和相互的关系就是一个UI系统特有的模式