js命名规范

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

一、变量

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

 

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

二、常量

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

 

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

三、函数 & 方法

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

JavaScript 代码规范 所有的 JavaScript 项目适用同一种规范。 JavaScript 代码规范 代码规范通常包括以下几个方面: 变量和函数的命名规则 空格，缩进，注释的使用规则。 其他常用规范…… 规范的代码可以更易于阅读与维护。 代码规范一般在开发前规定，可以跟你的团队成员来协商设置。 变量名 变量名推荐使用驼峰法来命名(camelCase): firstName = "John"; lastName = "Doe"; price = 19.90; tax = 0.20; fullPrice = price + (price * tax); 空格与运算符 通常运算符 ( = + - * / ) 前后需要添加空格: 实例: var x = y + z; var values = ["Volvo", "Saab", "Fiat"]; 代码缩进 通常使用 4 个空格符号来缩进代码块： 函数: function toCelsius(fahrenheit) {     return (5 / 9) * (fahrenheit - 32); } 不推荐使用 TAB 键来缩进，因为不同编辑器 TAB 键的解析不一样。 语句规则 简单语句的通用规则: 一条语句通常以分号作为结束符。 实例: var values = ["Volvo", "Saab", "Fiat"]; var person = {     firstName: "John",     lastName: "Doe",     age: 50,     eyeColor: "blue" }; 复杂语句的通用规则: 将左花括号放在第一行的结尾。 左花括号前添加一空格。 将右花括号独立放在一行。 不要以分号结束一个复杂的声明。 函数: function toCelsius(fahrenheit) {     return (5 / 9) * (fahrenheit - 32); }   循环: for (i = 0; i < 5; i++) {     x += i; }   条件语句: if (time < 20) {     greeting = "Good day"; } else {     greeting = "Good evening"; } 对象规则 对象定义的规则: 将左花括号与类名放在同一行。 冒号与属性值间有个空格。 字符串使用双引号，数字不需要。 最后一个属性-值对后面不要添加逗号。 将右花括号独立放在一行，并以分号作为结束符号。 实例: var person = {     firstName: "John",     lastName: "Doe",     age: 50,     eyeColor: "blue" }; 短的对象代码可以直接写成一行: 实例: var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}; 每行代码字符小于 80 为了便于阅读每行字符建议小于数 80 个。 如果一个 JavaScript 语句超过了 80 个字符，建议在 运算符或者逗号后换行。 实例: document.getElementById("demo").innerHTML =     "Hello Runoob."; 尝试一下 » 命名规则 一般很多代码语言的命名规则都是类似的，例如: 变量和函数为小驼峰法标识, 即除第一个单词之外，其他单词首字母大写（ lowerCamelCase） 全局变量为大写 (UPPERCASE ) 常量 (如 PI) 为大写 (UPPERCASE ) 变量命名你是否使用这几种规则： hyp-hens, camelCase, 或 under_scores ? HTML 和 CSS 的横杠(-)字符: HTML5 属性可以以 data- (如：data-quantity, data-price) 作为前缀。 CSS 使用 - 来连接属性名 (font-size)。 - 通常在 JavaScript 中被认为是减法，所以不允许使用。 下划线: 很多程序员比较喜欢使用下划线(如：date_of_birth), 特别是在 SQL 数据库中。 PHP 语言通常都使用下划线。 帕斯卡拼写法(PascalCase): 帕斯卡拼写法(PascalCase) 在 C 语言中语言较多。 驼峰法： JavaScript 中通常推荐使用驼峰法，jQuery 及其他 JavaScript 库都使用驼峰法。 变量名不要以 $ 作为开始标记，会与很多 JavaScript 库冲突。 HTML 载入外部 JavaScript 文件 使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的): <script src="myscript.js"> 使用 JavaScript 访问 HTML 元素 一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。 以下两个 JavaScript 语句会输出不同结果: 实例 var obj = getElementById("Demo") var obj = getElementById("demo") 尝试一下 » HTML 与 JavaScript 尽量使用相同的命名规则。 访问 HTML(5) 代码规范。 文件扩展名 HTML 文件后缀可以是 .html (或 .htm)。 CSS 文件后缀是 .css 。 JavaScript 文件后缀是 .js 。 使用小写文件名 大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 访问。 其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。 你必须保持统一的风格，我们建议统一使用小写的文件名。

 

// 是否可阅读
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 函数 & 方法注释

 

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

常用关键字注释

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

七、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.