java frame封装_从零开始封装一个属于自己的UI框架（一） --前期准备工作思考篇...

前言

总所周知，组件化的开发模式对于开发效率有非常大的提升

针对我们经常遇到的业务场景或者UI进行封装，可以让我们在遇到相同或者类似的业务场景时可以快速复用，并且对一些常用UI组件进行封装可以让我们降低对于基本UI的关注度，并且自己去封装一些组件也是极好的学习方式，也便于我们对于业务的理解，所以这就是我选择自己封装组件库的原因。

技术选型

语言：TypeScript

生态：React

打包工具：webpack

CSS预处理器：Less

单元测试：Jest

组件库的构成

在构建一个完整的组件库时需要考虑很多东西，例如：

1.组件设计思路

2.组件的代码规范

3.组件测试

4.组件维护

组件设计思路

一、通用样式设计

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

(1)设计规范

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

注&#x