js命名规范_js函数命名规范

js命名规范

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

一、变量

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

# 好的命名方式
let maxCount = 10;
let tableTitle = '啦啦啦';
# 不好的命名方式
let setConut = 10;
let getTitle = '啦啦啦';
1
2
3
4
5
6

二、常量

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

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

三、函数 & 方法

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

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

四、类 & 构造函数

class Persion {
  constructor(name) {
   ...
  }
}

let person = new Person('啦啦啦');
1
2
3
4
5
6
7

五、类的成员

类的成员包括：

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

class Person {
  // 私有属性 
  _name: string;
  constructor() { }

  // 公共方法
  getName() {
    return this._name;
  }
  // 公共方法
  setName(name) {
    this._name = name;
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

六、注释规范

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

// 设置标题
setTitle()
1
2

6.2 多行注释

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

6.3 函数 & 方法注释

/**
 * 函数说明
 * @关键字
 **/
1
2
3
4

常用关键字注释

七、vue常用开发规范

参考vue风格指南

7.1 import

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

import ElInput form '***'
import Emitter from '***'
1
2

7.2 methods

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

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

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