JavaScript开发规范

JavaScript规范

代码格式

1. 使用 2 个空格进行缩进，

   if (x < y) {
     x += 10;
   } else {
     x += 1;
   }
   

2. 不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。

3. 统一使用单引号(‘’)，不使用双引号(“”)。

4. 推荐不使用分号（js引擎会确定一个分号在什么位置应该存在并且自动添加）

对象声明

1. 使用字面值创建对象

   // 推荐
   let user = {};
   
   // 不推荐
   let user = new Object();
   

2. 使用字面量来代替对象构造器

   // 推荐
   const user = {
     age: 0,
     name: 1,
     city: 3
   };
   
   // 不推荐
   const user = new Object();
   user.age = 0;
   user.name = 0;
   user.city = 0;
   

新语法应用

优先使用ES6之后新增的语法糖和函数，会简化你的程序，并让代码更加灵活和可复用。

尽量使用 ES6, ES7 的新语法，比如箭头函数、await/async ， 解构， let ， for…of 等等。

括号

下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。

// 推荐
if (condition) {
  doSomething();
}

// 不推荐
if (condition) doSomething();

undefined 判断

永远不要直接使用 undefined 进行变量判断；使用 typeof 和字符串’undefined’对变量进行判断。

// 正确
if (typeof person === 'undefined') {
    ...
}
    
// 错误
if (person === undefined) {
    ...
}

条件判断和循环最多三层

条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的三目运算符。如果超过 3 层请抽成函数，并写清楚注释。

this 的转换命名

对上下文 this 的引用只能使用’self’来命名

慎用 console.log

因 console.log 大量使用会有性能问题，所以在非 webpack 项目中谨慎使用 log 功能

逗号空格

逗号前后的空格可以提高代码的可读性，在逗号后面使用空格，逗号前面不加空格。

// 不推荐
let foo = 1,bar = 2
let foo = 1 , bar = 2
let foo = 1 ,bar = 2

// 推荐
let foo = 1, bar = 2

计算属性的空格

在对象的计算属性内，禁止使用空格

// 不推荐
obj['foo' ]
obj[ 'foo']
obj[ 'foo' ]

// 推荐
obj['foo']

操作符的空格

操作符前后都需要添加空格

// 不推荐
let sum = 1+2

// 推荐
let sum = 1 + 2

函数声明的空格

当格式化一个函数，函数名或 function 关键字与左括号之间允许有空白。命名函数要求函数名和 function 关键字之间有空格，但是匿名函数要求不加空格。

// 不推荐
function func(x) {
  // ...
}

// 推荐
function func (x) {
  // ...
}

代码块空格

一致性是任何风格指南的重要组成部分。虽然在哪里放置块的开括号纯属个人偏好，但在整个项目中应该保持一致。不一致的风格将会分散读者阅读代码的注意力。

// 不推荐
if (a){
  b()
}

function a (){}

// 推荐
if (a) {
  b()
}

function a () {}

函数调用

为了避免语法错误，在函数调用时，禁止使用空格

// 不推荐
fn ()
fn
()

// 推荐
fn()

构造函数首字母大写

在 JavaScript 中 new 操作符用来创建某个特定类型的对象的一个实例，该类型的对象是由一个构造函数表示的。由于构造函数只是常规函数，唯一区别是使用 new 来调用。所以我们构造函数的首字母要大小，以此来区分构造函数和普通函数。

// 不推荐
const fooItem = new foo()

// 推荐
const fooItem = new Foo()

构造函数的参数

在 JavaScript 中，通过 new 调用构造函数时，如果不带参数，可以省略后面的圆括号。但这样会造成与整体的代码风格不一致，所以约定使用圆括号

// 不推荐
const person = new Person

// 推荐
const person = new Person()

链式调用

链式调用如果放在同一行，往往会造成代码的可读性差，但有些时候，短的链式调用并不会影响美观。所以本规范约定一行最多只能有四个链式调用，超过就要求换行。

链式赋值

链式赋值容易造成代码的可读性差，所以团队约定禁止使用链式赋值

// 不推荐
let a = b = c = 1

// 推荐
let a = 1
let b = 1
let c = 1

变量声明

JavaScript 允许在一个声明中，声明多个变量。团队约定在声明变量时，一个声明只能有一个变量

// 不推荐
let a, b, c

// 推荐
let a
let b
let c

我的博客只写前端博文，点击我去看更多喜欢的前端博文，欢迎大家一起讨论学习！【https://blog.csdn.net/qq_29101285?spm=1011.2266.3001.5343】