# 代码规范

**Repository Path**: scottldy/code_specification

## Basic Information

- **Project Name**: 代码规范
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-03-08
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 代码规范：

## 概述

1. 为什么要制定代码规范？多人协作时，风格各异的代码，导致代码的可读性，可复用性不好，代码质量低，bug率高，开发效率低。为了解决以上问题，需要制定出一套可行的代码规范。
2. 制定代码规范希望达到的目的。希望能形成统一的代码风格，良好的可读性，注释完全的代码。达到提升开发效率，降低bug率的效果。
3. 本文基于以上原则，参考当前的主流前端代码规范，定义一套适合我司的前端代码规范，原则上不符合代码规范的代码不能通过code review。

---

### 命名规范

使用有意义的命名，禁用如let a = 1,a.js,be.jsx 等无意义名称，勿使用汉语拼音。

- **文件命名：**
   - **页面文件命名**，跟 url 链接保持一致。文件名：大驼峰命名，url 链接采用下划线形式：例--文件名，职位管理列表界面--`PositionList`;url 路由--`position_list`。

    示例：
    ```
    //good
    PositionList.jsx

    //bad
    positionlist.jsx or positionList.jsx
    ```
  - **组件命名**:采用大驼峰方式，
    - **组件命名**：采用大驼峰命名法，基本命名思路为组件模块加组件样式
    如订单列表：OrderTable，订单修改弹窗：OrderForm

    示例
    ```
    //good
    OrderTable
    
    //bad
    orderTable or ordertable
    ```
    - 常用组件：
    根据组件的功能去命名，例：签约信息组件：SignInfo.jsx

    ```
     //good
    SignInfo
    
    //bad
    signInfo or signinfo
    ```
    - 表格：
    采用xxTable形式，例：通话记录列表: CallRecordTable 
    ```
    //good
    CallRecordTable

    //bad
    callrecordTable or callRecordBiaoGe
    ```
    - 弹窗：
    xxModal。
    
    ```
    //good
    ChangePriceModal
    
    //bad
    changepriceTc or ChangpriceMd
    ```
    - 表单：
     采用xxForm形式,例如：创建学员表单--CreateStudentForm

    ```
    //good
    CreateStudentForm

    //bad 
    createStudentform
    ```
  - **状态管理及其他插件相关文件命名**（例：redux,hooks）
    下划线命名法
    例如：通话记录列表 callout_list.js,单词名与相关组件/文件名保持一致性。尽量展示其功能性。在hooks上如表格 table_operation.js
    
       ```
        //good
       callout_list.js

        //bad
        callout-list.js or CalloutList.js
       ```
 - **组件内命名**
    **注**：采用小驼峰方式命名；

    - 方法：事件处理例如点击事件，handleXXClick，常用组件中函数统一命名;例如：搜索字典名称，handleSearchDictionaryRender;handleXXRender; 弹框组件：handleXXRender,etc;
       >>>>>
        示列：
        ```
       //good
        handlePlayAudioClick

        //bad
        handleplayAudioClick or hdpaauclick or djsj
        ```
    - 变量：state内的变量，带有布尔值：hasXX or isXX,非布尔值具有判断属性的：XXFlag;像数组列表：XXlist，切勿变量命名冲突。
    - 常量： XXCommon，与变量命名类似。
    ```
    //good
    hasStudentInfo

    //bad
    Hasstudentinfo or hasStudent-Info or hasXX
    ```

 

- **接口命名**
  **注**:接口以显示该接口的功能的为主，采用小驼峰形式命名;勿采用组件名字的单词比如像form,table这种表示组件的名；像Api这种词勿在接口中使用,勿使用汉语拼音和没有语义化的单词。
  例：获取职位列表接口 -- getPositionList

  | 增                                                                              | 删             | 改             | 查              |
  | ------------------------------------------------------------------------------- | -------------- | -------------- | --------------- |
  | 增加或创建接口可以采用createxx或addxx这一类的词，这时最好与后台的接口保持一致性 | 删除：deleteXX | 修改：updateXX | 查询接口：getXX |

    示例
    ```
    //good
    createSingalInfo
    deleteSingalInfo
    updateSingalInfo
    getSingalList

    //bad
    createSI or chuangJianGerenXinXi or create-singnal-info
    ```

---

### 注释规范
 - 单行注释
 - 多行注释
 - 文档注释

1. 注释规范也是代码规范特别重要的一环，让你的代码更加具有可读性，维护性更高。
2. 在此也从不同代码场景，归纳注释规范。
3. 文件，组件，函数名，接口，代码注释的保留。
4. 无用的代码注释删除。

 **注意**：采用关键词说明，避免不必要的赘述。 
 - api接口注释
  先对一类接口进行说明，在对单个接口进行说明，
  一类接口说明采用，采用文档注释，但接口采用单行注释。采用关键词说明，无须过多赘述。

  - 文件内注释，非组件：函数内采用单行注释，简洁说明一下即可。
  - 组件注释：组件内在第一行通过文档注释说明组件的功能，以及用法，和所传的必要的参数。其他的注释采用文件内的注释规范即可。
  - 代码注释保留：代码注释，可能需要的功能逻辑注释，觉得没必要删除，请添加标记：**Todo** etc 提示语标记一下。其他未提示的注释代码，一律删除，无需保留。

**参考文档**

[Airbnb](https://juejin.im/entry/5b2211afe51d4558ba1a4e52#naming-conventions)

[代码规范](http://alloyteam.github.io/CodeGuide/)