一、项目介绍
一个基于 React 的组件库
Github 地址:https://github.com/RomanticUI/RomanticUI
二、项目实现
3.1 技术选型与相关开发文档
核心技术栈:
- Js:Ts、ES6
Ts居有更好的类型检查、更好的可读性和可维护性、更好的代码组织和模块化等优点,这些特点使得Ts在开发大型复杂应用程序时更适合,并可以提高开发效率和代码质量
- 样式:Less
完全支持样式覆盖,可读性较强,上手程度较低,适合不同技术栈的同学迅速实现简单的使用
- 测试工具:Jest、@testing-library/react
Jest既简单又强大,可以设置测试的事前步骤和事后步骤,模拟函数等功能;Jest的快照功能用于组件的测试十分强大。
- 规范
代码风格:eslint+prettier、stylelint、commitlint
- 通过规范工具对代码进行规范和格式化,提供更好的代码质量保障,代码的可读性增强
代码提交:husky、commitlint、lint-staged
规范代码的提交规范,并在暂存区中根据不同的文件进行不同校验并修改
组件模板:plop.js
为组件文件创建一个固定的目录,使得项目目录的一致性;在模板文件中可添加固定代码,减少重复作业,增加效率
依赖管理:lint-deps
3.2 架构设计
- 企业或者个人设计项目产品,为快速便捷实现UI界面,通过使用组件库,可以快速构建出符合需求的UI界面,并且可以在不影响代码质量和稳定性的情况下选择符合自己UI界面的组件可自己定制样式和功能,从而提高开发效率和代码可维护性。
- 第一步,在组件库中找到目标组件,如Divider、Tabs和Avatar组件等,以便快速搭建所需的UI界面。
- 第二步,使用组件库提供的UI组件来构建页面,如使Tab构建界面的tabbar,使用Avatar组件显示图片样式,使用progress组件显示进度等
- 在需要定制样式时,可以使用组件库提供的可定制化属性或CSS类名,或者覆盖组件库的默认样式来实现样式定制。
3.3 项目代码介绍
RomanticUI
├── commitlint.config.js – 代码提交规范
├── docs
│ └── index.md – 项目文档网站首页
├── flower.png – 项目文档logo
├── generators – 模板生成文件
│ ├── component – 组件生成文件
│ │ ├── component.hbs
│ │ ├── component.less.hbs
│ │ ├── component.md.hbs
│ │ ├── component.test.hbs
│ │ └── index.js
│ ├── index.js
│ └── utils
├── package-lock.json
├── package.json
├── plopfile.js – 模板生成入口
├── README.md
├── src
│ ├── Avatar
│ │ ├── index.md – 组件文档
│ │ ├── index.tsx – 组件入口文件
│ │ ├── style
│ │ │ └── index.less – 样式文件
│ │ └── test
│ │ └── index.test.ts – 测试文件
│ ├── config-provider – 全局context对象
│ │ ├── index.ts
│ │ └── SizeContext.tsx – 尺寸Context
│ ├── Divider
│ │ ├── index.md
│ │ ├── index.tsx
│ │ ├── style
│ │ │ └── index.less
│ │ └── test
│ │ └── index.test.js
│ ├── index.ts
│ ├── Menu
│ │ ├── index.md – 组件文档
│ │ ├── index.tsx – 组件入口文件
│ │ ├── style
│ │ │ └── index.less – 样式文件
│ │ └── test
│ │ └── index.test.ts – 测试文件
…
│ ├── Tabs
│ │ ├── index.md
│ │ ├── index.tsx
│ │ ├── style
│ │ │ ├── card.less
│ │ │ ├── content.less
│ │ │ ├── index.less
│ │ │ ├── label.less
│ │ │ ├── position.less
│ │ │ └── size.less
│ │ ├── TabItem.tsx
│ │ └── test
│ │ ├── index.test.ts
│ └── utils – 常用工具类
│ └── index.ts
├── tsconfig.json – ts配置
├── typings.d.ts
└── yarn.lock
└── .eslintrc.json – eslint校验配置
└── .stylelintrc.json – 样式校验配置
└── .prettierrc.js – 代码美化配置
三、测试结果
建议从功能测试和性能测试两部分分析,其中功能测试补充测试用例,性能测试补充性能分析报告、可优化点等内容。
在开发过程中,可以使用组件库提供的测试工具来进行单元测试、集成测试和端到端测试,以保证组件库的质量和稳定性
4.1 功能性测试
4.1.1 Avatar
Avatar组件可以实现图片样式更改,可动态设置avatar的图片地址,用户自定义样式,头像的大小,头像的形状,数据类型分别为string、string、number、circle、
经测试,Avatar功能较全,暂未发现bug。
4.1.2 Tabs
Tabs实现了基本功能的选中和禁用,Tabs实现了基本功能的选中和禁用,tabs居中,拓展功能的滑动可设置上下/左右滑动,附加内容传值,定义tabs的位置和大小等,提供了activeKey、centered、defaultActiveKey、items、size、tabBarExtraContent等14种API,尽大可能的为用户提供组件的多用性,提高组件的复用性。
经测试,Tabs功能完善,暂未发现bug。
4.1.3 Divider
Divider 组件实现分割线,可实现虚线、实线、插入文字等功能,提供了dashed、content,传值类型分别为boolean,string型。
经测试,Divider功能较完善,暂未发现bug。
4.1.4 ProgressBar
ProgressBar 组件实现了进度条的大小、颜色、文字展示、圆形进度条和动态改变进度条。提供了percent、showinfo、color、isSmall、is Circle等五种API。
经测试,ProgressBar功能较全,暂未发现bug。
4.1.5 Spin
Spin 组件实现了不同类型的加载组件,用户可自定义更改组件显示类型和style,提供了className五种loading样式、style、ref等API。
经测试,Spin功能较全,暂未发现bug。
4.1.6 Menu
Menu 组件可根据用户的传入的内容接收后展示为菜单栏,可通过children参数传入多层嵌套对象。提供设置主题、禁用、导航项类型、菜单模式等API。
经测试,Menu组件暂未发现Bug。
四、Demo 演示视频
视频演示 地址:https://www.bilibili.com/video/BV11s4y1G7jE/?pop_share=1&vd_source=838e1af33bcd36eddf8795a8c7ad8b5a
五、项目总结与反思
目前仍存在的问题
- 组件数量偏少,无法满足企业大量需求
- 在组件功能上,在个别组件上,功能不够全面。
已识别出的优化项
- 增加组件数量,以满足更多需求
- 完善组件功能,提高组件复用率
架构演进的可能性
- Web Components是一种新的Web技术,开发者通过自定义的 HTML 标签和 CSS 元素,来还原 UI 设计,并完善相关功能使组件能够在多个地方进行复用,组件库架构向这个方向演进以支持更广泛的Web开发需求。
- 需求组件增多,跨端语言也实现了移动端和WEB端的多端运行,组件库架构会向适配多端运行的方向演进,支持多端匹配。
项目过程中的反思与总结
- 项目总结: 完成了6个组件但功能不够完备,组件数量少。
- 能兼容Edge、Chrome等主流浏览器。
- 开发过程中不仅会遇到开发技术难度的挑战,时间也非常紧迫,还有队友之间的团队协作比较弱。