js命名规范

男娘i 2023-02-26 02:27 20阅读 0赞

## js命名规范 ##

js命名应遵循 **简洁、语义化** 的原则

### 一、变量 ###

命名方法: 小驼峰式命名法  
命名规范：前缀为形容词 （函数前缀为动词, 以此来区分函数和变量）

# 好的命名方式
    let maxCount = 10;
    let tableTitle = '啦啦啦';
    # 不好的命名方式
    let setConut = 10;
    let getTitle = '啦啦啦';

### 二、常量 ###

命名方法：名词全部大写  
命名规范：使用大写字母和下划线来组合命名，下划线用来分割单词。

const MAX_COUNT = 10;
    const URL = '//www.huifenqi.com';

### 三、函数 & 方法 ###

命名方法： 小驼峰式命名法  
命名规范： 前缀应该为动词  
命名建议：常用动词约定

<table> 
 <thead> 
  <tr> 
   <th>动词</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>can</td> 
   <td>判断是否可执行某个动作</td> 
  </tr> 
  <tr> 
   <td>has</td> 
   <td>判断是否含义某个值</td> 
  </tr> 
  <tr> 
   <td>is</td> 
   <td>判断是否为某个值</td> 
  </tr> 
  <tr> 
   <td>get</td> 
   <td>获取某个值</td> 
  </tr> 
  <tr> 
   <td>set</td> 
   <td>设置某个值</td> 
  </tr> 
  <tr> 
   <td>load</td> 
   <td>加载某些数据</td> 
  </tr> 
 </tbody> 
</table>

// 是否可阅读
    function canRead() { }
    // 获取名称
    function getName() { }

### 四、类 & 构造函数 ###

class Persion {
      constructor(name) {
       ...
      }
    }
    
    let person = new Person('啦啦啦');

### 五、类的成员 ###

类的成员包括：

1.  公共属性和方法： 跟变量和函数命名一样。
2.  私有属性和方法：前缀为下划线`_`, 后面跟公共属性和方法一样的命名方式。

class Person { 
      // 私有属性 
      _name: string;
      constructor() {  }
    
      // 公共方法
      getName() { 
        return this._name;
      }
      // 公共方法
      setName(name) { 
        this._name = name;
      }
    }

### 六、注释规范 ###

格式化插件推荐prettier  
6.1 单行注释

// 设置标题
    setTitle()

6.2 多行注释

/* * 代码执行到这里后会调用setTitle()函数 * setTitle()：设置title的值 */
    setTitle();

6.3 函数 & 方法注释

/**
     * 函数说明
     * @关键字
     **/

常用关键字注释

<table> 
 <thead> 
  <tr> 
   <th>注释名</th> 
   <th>语法</th> 
   <th>含义</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>@param</td> 
   <td>@param {参数类型} 描述信息</td> 
   <td>描述参数</td> 
   <td>@param {String} name 传入名称</td> 
  </tr> 
  <tr> 
   <td>@return</td> 
   <td>@return {参数类型} 描述信息</td> 
   <td>描述返回值</td> 
   <td>@retun {Boolean} true: 可执行; false: 不可执行</td> 
  </tr> 
  <tr> 
   <td>@author</td> 
   <td>@author 描述信息</td> 
   <td>描述作者</td> 
   <td>@author 某某某 2018/04/24</td> 
  </tr> 
  <tr> 
   <td>@example</td> 
   <td>@example 示例代码</td> 
   <td>演示函数的使用</td> 
   <td>@example setTitle(‘啦啦啦’);</td> 
  </tr> 
 </tbody> 
</table>

## 七、vue常用开发规范 ##

参考[vue风格指南][vue]

### 7.1 import ###

import 应置于顶层, 引入组件名遵循大写驼峰式命名法。

import ElInput form '***'
    import Emitter from '***'

7.2 methods

命名方法：同函数命名法  
命名建议：事件处理应以`handle`开头,如`handleBlur`  
其他建议：使用`promise`或`async`/`await`处理异步逻辑，避免使用回调函数。

### 7.3 少使用watch, 直接监听事件。 ###

### 7.4 合理利用style的`scope`属性,隔离页面样式。通用组件应避免使用`scope` ###

[vue]: https://cn.vuejs.org/v2/style-guide/