© Bohua Xu

RomanticUI项目总结

Mar 11, 2023 · 15min

一、项目介绍

一个基于 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 – 代码美化配置

三、测试结果

建议从功能测试和性能测试两部分分析，其中功能测试补充测试用例，性能测试补充性能分析报告、可优化点等内容。

在开发过程中，可以使用组件库提供的测试工具来进行单元测试、集成测试和端到端测试，以保证组件库的质量和稳定性

img

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

五、项目总结与反思

  1. 目前仍存在的问题

  • 组件数量偏少，无法满足企业大量需求
  • 在组件功能上，在个别组件上，功能不够全面。

  1. 已识别出的优化项

  • 增加组件数量，以满足更多需求
  • 完善组件功能，提高组件复用率

  1. 架构演进的可能性

  • Web Components是一种新的Web技术，开发者通过自定义的 HTML 标签和 CSS 元素，来还原 UI 设计，并完善相关功能使组件能够在多个地方进行复用，组件库架构向这个方向演进以支持更广泛的Web开发需求。
  • 需求组件增多，跨端语言也实现了移动端和WEB端的多端运行，组件库架构会向适配多端运行的方向演进，支持多端匹配。

  1. 项目过程中的反思与总结

  • 项目总结: 完成了6个组件但功能不够完备，组件数量少。
  • 能兼容Edge、Chrome等主流浏览器。
  • 开发过程中不仅会遇到开发技术难度的挑战，时间也非常紧迫，还有队友之间的团队协作比较弱。

exit ..
CC BY-NC-SA 4.0 2021-PRESENT © Bohua Xu