从零开始封装一个属于本身的UI框架（一） --前期准备工做思考篇

前言

总所周知，组件化的开发模式对于开发效率有很是大的提高

针对咱们常常遇到的业务场景或者UI进行封装，可让咱们在遇到相同或者相似的业务场景时能够快速复用，而且对一些经常使用UI组件进行封装可让咱们下降对于基本UI的关注度，而且本身去封装一些组件也是极好的学习方式，也便于咱们对于业务的理解，因此这就是我选择本身封装组件库的缘由。

技术选型

语言：TypeScript

生态：React

打包工具：webpack

CSS预处理器：Less

单元测试：Jest

组件库的构成

在构建一个完整的组件库时须要考虑不少东西，例如：

1.组件设计思路

2.组件的代码规范

3.组件测试

4.组件维护

组件设计思路

1、通用样式设计

做为一个前端UI库，若是从样式的角度去考虑，首先应该保证的是各个组件的视觉风格和交互规范一致，若是某一个组件在不一样业务场景有不一样的交互和UI风格，那么想对该组件进行抽象和封装是很困难的事情。

(1)设计规范

组件的视觉风格和交互规范一致性不少程度上是由设计规范决定的，而设计规范大概上我认为是包括了统一视觉样式和统一的交互动效，具体以下图所示：

注：须要注意的是视觉的设计一般要足够颗粒化，视觉和逻辑须要作到尽可能解耦，把视觉元素做为可拆卸的零件嵌入组件中去，缘由我想应该不须要多解释各位老油条们也应该懂的

2、具体组件设计思路及流程

(1)需求及应用场景分析

咱们在设计组件的时候须要充分考虑到组件会使用的场景和使用方式 例如以最简单的button来考虑： botton是经过点击来执行某一个具体的动做或者行为 那么它的使用场景就是：当用户须要触发某个业务行为逻辑的时候会去使用按钮

从样式角度分析该组件需求

1.按钮有什么不一样的类型

2.按钮拥有什么样的表明状态

3.按钮拥有多少种尺寸

4.按钮通常拥有什么动画效果

5.按钮文字样式及其规范

..........

从操做上分析需求

总结： 在设计一个组件时，咱们一般要从样式和具体逻辑两个角度出发去考虑需求。

对于从样式出发，咱们通常须要考虑：

• (1)该组件有多少种类型。
• (2)该组件是否有不一样的状态。
• (3)该组件有多少种尺寸。
• (4)该组件须要有什么样的动画效果
• (5)该组件种的文字表现样式和规范。
• ..........

而从具体逻辑出发考虑，不一样的组件有不一样的需求，这里就不作具体分析了

(2)API设计分析

API的设计依旧从样式和其余方面来考虑 这里依旧拿button来举例

从样式上考虑API的设计

从其余方面考虑API的设计

1.根据操做事件行为暴漏

例如：onclick、keydown之类的事件

2.根据具体需求去设计API

3.选择暴露一些原生接口，例如button原生的type

4.................................

(3)组件设计流程

3、组件测试

4、组件维护

参考文章

组件库通用样式设计总结

组件库样式整体讨论