【前端架构】组件化架构设计

一、前端的组件化架构

 

二、基础：风格指南

1. 原则与模式

   1. 亲密性，即将相关的项（组件）组织到一起

   2. 对齐，每一项都应当与页面上的内容存在某种视觉联系

   3. 重复，重复元素以体现一致性

   4. 对比，对比产生强调，以强调产生强烈的反差

2. 色彩

   1. 主题色，又可以称为品牌色，用于体现产品的特色和宣传时使用

   2. 功能色，用来展示数据和状态，以及提醒用户

   3. 中性色，用于常规的页面显示和过渡，通常是浅色和深色的变种，如白色和灰色

3. 文字排印

   1. 字体大小

   2. 字体颜色

   3. 行高

   4. 字重

   5. 字体家族

4. 布局

   1. 固定布局：栅格布局

   2. Flex布局

      1. 在任何流动的方向上（上、下、左、右）都能进行良好的布局

      2. 能以逆序或者任意顺序排列布局

      3. 可以线性地沿着主轴或侧轴换行排列

      4. 能以弹性的方式在任意容器中伸缩大小

      5. 可以与容器对齐，或彼此对齐

      6. 可以沿主轴动态折叠或不折叠，同时保留容器的交叉大小

5. 组件

6. 文档及其他

   1. 设计人员如何使用设计指南

   2. 开发人员如何维护设计指南

   3. 如何在项目中使用设计指南

   4. 图片使用规范

   5. 留白间距

   6. 统一的圆角大小

   7. 常见问题的解决方式等等

7. 维护风格指南

 

三、重用：模式库

1. 组件库

   1. 创建组件库

      1. 创建脚手架：可以从框架自带的工具生成，或是从其组件库修改

      2. 第一个组件：创建一个基本的组件，引入项目上，进行脚手架测试

      3. 进行发布测试：选择合适的发布策略，发布组件库，提供快捷的使用方式

      4. 创建组件的文档中心：可以通过JSDoc类似的方式从代码中生成文档，也可以用更专业的编写方式

      5. 提供组件示例：创建一个专门的网站，来提供组件交互访问

      6. 持续改进：添加新的组件，修复bug，并不断优化组件库

   2. 维护组件库

      1. 自动化版本发布semantic-release

      2. 自动复查代码工具Danger

      3. 持续集成工具Travis CI

      4. 代码质量工具Code Climate

2. 组件类型

   1. 基础UI组件

   2. 符合组件

   3. 业务组件

3. 隔离：二次封装

 

四、进阶：设计系统

1. 设立原则，创建模式（以Ant Design原则为例）

   1. 亲密性

   2. 对齐

   3. 对比

   4. 重复

   5. 直截了当

   6. 简化交互

   7. 足不出户

   8. 提供邀请

   9. 巧用过渡

   10. 即时反映

2. 原子设计

   1. 原子：网页构成的基本要素

   2. 分子：复合组件

   3. 有机体：包含多个具有自己独特属性和功能的小界面，比如header组件、footer组件、列表组件等

   4. 模板：有机体、分子、原子的结合，提供可重用的模板

   5. 页面：具有真实业务功能和真实数据的组件集合

3. 维护与文档（Storybook、Vue Design System）

   1. 搭建指引

   2. 内容指南

   3. 工具指南等

 

五、跨框架组件化

1. 框架间互相调用：Web Components

2. 跨平台模式库

 

---

 

推荐阅读

1. 上篇：【前端架构】单页面应用设计

 

参考资料

1. 《前端架构：从入门到微前端》

 

微信公众号“前端那些事儿”