组件化规范

85 阅读2分钟

1、命名规范

readme中标注 [适用平台]-[所用框架],组件命名格式为 [功能前缀]-组件用途名
组件用途名尽量表达清晰,不要过多简写

  • 适用平台取值:pc、h5、app、miniPro(小程序)
  • 所用框架取值:react、vue、angular
  • 功能前缀取值:ui、utils
    示例:utils-debounce、img-lazyload

2、文档规范

README.md,给所有人看的,主要是宏观的技术架构,比如 基于Next.js + React + Node
README_DEV.md,给开发组件的人看的
CHANGELOG.md 更新日志,把每次更新发布内容摘要记录下来,记录形式:版本号 (日期) 更新摘要

3、组件代码要求

(1)源码统一使用ES2015编写,使用import, export做模块化释出的可用版本要用babel编译好
(2)不要污染全局namespace,css请带上组件前缀
(3)注释到位,变量声明写清楚用途,关键逻辑一定要写注释,接口一定写清楚用途、入参出参
(4)一定要测试组件的性能
(5)第一次写不懂如何组织代码,请参考现有组件代码
(6)高内聚,低耦合。
具体来说,高内聚低耦合的原则要求:

  • 高内聚:一个模块内部各个元素之间的联系应该尽可能紧密,以实现单一职责和高度独立的功能。也就是说,一个模块应该只做一件事情,并且将所有与该功能相关的代码放在一起,而不是分散在多个文件或类中。
  • 低耦合:不同模块之间的依赖关系应该尽可能少,即模块之间应该是松散耦合的。模块之间的关系应该通过接口或抽象类等方式进行定义,以减少模块之间的直接依赖关系。

4、上传NPM

  • 每次发布,version都要改变,规则使用npm官方推行的版本格式:主版号.次版号.修订号,版号递增规则如下:
  • 主版号:大改动,不向下兼容,更新主版号
  • 次版号:新增或改动了功能,向下兼容,更新次版号
  • 修订号:修复了bug,向下兼容,更新修订号

5、构建说明

  • 构建命令都写在package.json的script里,遵循这个规范,方便其他开发者找到构建信息。构建命令建议使用以下几个:
  • start:开发调试
  • dist:构建组件发布内容,通常拿来测试发布内容是否符合预期
  • prepublish:npm官方命令,在npm publish之前被执行
  • lint: 用于协助开发者写迅速发现不符合规范的代码,建议全局安装eslint stylelint