前端组件化开发

1.前端开发现在的耗时点在什么地方

• 样式上的调整，消耗部分时间
• 组件功能的开发，组件之间的交互
• 不同开发人员开发方式和习惯的差异导致后期需要统一而产生的时间问题

2. 组件库开发的意义

• 将页面和功能封装为自定义组件，从未避免开发者写一大堆冗长、深层嵌套的代码来实现同样的页面和功能

3.展示组件

• 按钮（Button）
• 标签（Tag）
• 文字提示（Tooltip）
• 进度条（Progress）
• 全局提示（Message）
• 通知提示框（Notification）
• 加载中（Spin）

4.功能组件

• 列表
  • 列表样式
  • 封装筛选条件
  • 封装列表操作
• 不同类型的分页
• 可以快速搭建的表单组件
• 弹窗
• 导航
  • Icon + title
  • 顶部tab式导航
  • 底部标签式导航
  • 抽屉式导航（类似于zx中的个人中心）
  • 宫格式导航（类似于其他网站中首页下发的合作伙伴）

5.项目整体布局

• 项目整体的背景色风格（黑、白）
• 登录注册页面的UI设计统一
• 多套导航栏的导航方式（顶部导航、侧边导航）
• 页面的header、container、footer布局

6.常用工具封装

• 饼图、折线图、柱状图常用颜色
  

[
  '#5571c7',
  '#91cc75',
  '#f9c958',
  '#ec6964',
  '#72c2e0',
  '#3aa375',
  '#fa8650',
  '#9862b3',
  '#ea7dce',
]

• 链名和图标：zx3.0中有封装好的 链名和图标 相匹配的代码
• 时间戳和时间字符串之间的转换
• 时区之间的转换
• 有关字符串的方法的封装
• 有关网络请求的方法的封装

7.组件库的划分

       组件库的分类模式有很多种， 我们常用的 antd 是以业务场景划分的。由于我们前端项目大多使用 React 开发， 设计体系和业务场景和 antd 比较吻合， 所以我们组件系统采用类似 antd 的分类方式：

• 基础型
• 布局型
• 导航型
• 数据录入
• 数据展示
• 反馈
• 其他业务类型

       对组件系统进行分类我觉得主要有一下两点好处：

• 技术侧：更好的解耦业务关系，提高封装性以及组件定位
• 设计侧：保证 UI 的一致性，可溯源，提高用户使用效率

       随着业务复杂度的增高和业务系统的增多，我们需要进一步考虑系统之间的共性和复用性，我们需要基于业务组件库进行组合和抽象，形成所谓的 可复用区块：

       区块的设计一方面可以抹平不同系统中相同设计模块因为开发人员不同而产生的差异， 另一方面也能提高相似模块的开发效率， 但是会牺牲一定的设计多样性， 所以在区块封装时需要做一定的取舍。最终我们业务系统的开发流程会变成如下的形式：