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