React开发（146）:开发规范

Posted 2021-09-29 前端小歌谣

```

1，编辑器尽量用 VSCode，然后装 Prettier 插件 简单的代码规范 

2，缩进2个空格，如果是tab 也设置成2个空格

3，命名时尽量用英文，文件名，组件名等，单词多的可以大写简写。

4，函数名字尽量以 handle开头，如 handleSubmit = () =>{} 

5，写代码时尽量以小函数为主，大的函数抽取一下。逻辑复杂的可以再当前文件夹下再建一个文件 service文件，处理逻辑。

6，代码尽量写注释，每个函数尽量写行   如：

    // 表单提交

    handleSubmit = () =>{}

7，如果写了很复杂的逻辑  或者层次较深的业务，尽量在当前文件下下写个Readme文件，类似下单之类的业务。

8，封装公共组件  写好参数 及该组件的用途，不在组件中写固定的逻辑，都以 props 传递过来的数据，组件封装尽量写 typescript，做好props类型约束。

9，封装公共方法时也是类似，无论是写了公共组件或者公共方法 尽量在群里说一声  特别是类似 TaroUI listItem 那种布局的 左右或者上下的 一般大家都会用  写好之后在群里说一下。

10，如果修改了公共的东西 一定要说，修改谁写的组件或者方法尽量先沟通下。

11，页面代码行数不超过尽量不超过 100 行。

12，非公用组件，费公用代码逻辑辅助方法，封装抽取时，写到当前模块或者文件夹下。

13，pages 目录书写规范：以system 模块为例

14，services 里面的方法，method 必须大写 例如：`"GET" "POST" "PUT" "DELETE"`

System

├── components        当前模块抽取公用组件

├── models            当前模块的数据

├── Employee          员工管理

      ├── components  当前页面抽取封装组件

      ├── data.js     页面辅助方法或配置(可选) 

      ├── index.js    页面逻辑

      ├── index.less  样式  

14，services 文件夹按照模块划分，每个接口写好 url注释。

15，models 文件也一样都按照模块划分，方法都和初始化 state 尽量都写注释。

16，引入依赖包时，需共同商议决定，不要直接引入。

17，utils里面定义公共方法或者公共资源时，请确定是否是通用的。如果不是请在当前页面文件夹下做。公共文件会被打成 verdors.js，会在首页初始化时加载。

```