此文章旨在整理在项目实际开发中，前端开发团队遵循的规范，包含文件/文件夹的命名、模块化、组件化、代码的书写风格（包含模块的拆分、函数/变量/类名的命名等）、抽离的公共代码及注释的合理运用。规范有很多种，各有利弊，没有最好的规范，只有最合适的规范。只要开发过程中整个团队都遵循其中一种规范/风格来，使整个项目的风格统一即可以下实例均为 Ant Design Pro 项目中使用场景。
一、文件/文件夹命名
1. 驼峰命名
组件文件夹采用首字母大写的驼峰命名，组件统一命名为 index.jsx/index.tsx ，保证每个组件文件夹下只有一个 index 文件。
- 优点：在引用组件时，引用的路径写到组件的父级文件夹即可。
缺点：在编辑器中，打开的文件均为
index，可能造成混淆。2. 全小写英文字母
用于固定用途的模块文件夹命名，如
components、style、pages、utils、assets、api等；用于固定通用功能的文件的命名，如common.less、utils.js、service.js、constant.js等。-
二、模块化、组件化
1. 逻辑模块化
模块化的核心要义是逻辑拆分与解耦，要实现高内聚，低耦合的高可维护性代码，就要对复杂逻辑进行拆分，以便后期维护。
2. 功能组件化
React的精髓就在于组件，大量的自定义组件组成整个项目，自定义组件有较高的灵活性和可复用性。同样也具有便于维护等优点。一个自定义组件要具有能实现某种功能的完备代码，尽量减少对外界的依赖，真正做到随引随用，组件内各个模块职责单一，相互配合。├── components 组件内小型组件目录├── Xxx 组件内自定义组件目录├── index.jsx└── ...├── index.jsx├── index.less├── constant.js 存放公共常量、方法└── service.js 存放封装的请求
三、代码书写风格
代码的书写风格有很多种类，每一种都各具特色，我们需要的是在一个项目中统一使用其中的一种开发书写风格作为开发规范，使代码保持风格统一。这样的代码不但易于阅读且便于维护。
四、注释的合理运用
1. 基础
```javascript // 普通单行注释（斜线后有一个空格），通常用于变量和函数中语句或某些简单逻辑的解释。
/**
- 多行注释，通常用于函数的解释以及复杂逻辑的释义。 */
/**
- 函数名称
- 函数说明
- @param 参数1 数据类型 参数说明
- @param 参数2 数据类型 参数说明
- …
- @returns 返回值 */
/ ============ 华丽的分割线，通常用于分割不同功能的代码块 ============ /
<a name="DS9SI"></a>## 2. 进阶这里使用 `VSCode` ，安装 `Better Comments` 插件，可以使注释变色。<br />```javascript// * 绿色的高亮注释 变量// todo 橙色的高亮注释 函数// ? 蓝色的高亮注释 组件// ! 红色的高亮注释 配置// // 灰色带删除线的注释 说明
若有收获，就点个赞吧
0 人点赞
