前端开发规范(三)—— JavaScript

409 阅读1分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

JavaScript 规范

语言规范

引用

const 和 let 都是块级作用域,var 是函数级作用域

对所有引用都使用const,如果引用是可变动的,则使用 let ,不要使用 var

  // 不推荐
  var a = 1
  var b = 2
  var count = 1
  if (count < 10) {
    count += 1
  }
  
  // 推荐
  const a = 1
  const b = 2
  let count = 1
  if (count < 10) {
    count += 1
  }

对象

使用字面量创建对象

  // bad
  const a = new Object{}
  
  // good
  const a = {}

请使用对象属性值的简写方式

  const job = 'FrontEnd'
  
  // bad
  const item = {
    job: job
  }
  
  // good
  const item = {
    job
  }

对象属性值的简写方式要和声明式的方式分组

  const job = 'FrontEnd'
  const department = 'JDC'
  
  // bad
  const item = {
    sex: 'male',
    job,
    age: 25,
    department
  }
  
  // good
  const item = {
    job,
    department,
    sex: 'male',
    age: 25
  }

数组

请使用字面量值创建数组

  // bad
  const items = new Array()
  
  // good
  const items = []

向数组中添加元素时,请使用 push 方法

  const items = []
  
  // bad
  items[items.length] = 'test'
  
  // good
  items.push('test')

使用拓展运算符 ... 复制数组

  const items = []
  const itemsCopy = []
  const len = items.length
  let i
  
  // bad
  for (i = 0; i < len; i++) {
    itemsCopy[i] = items[i]
  }
  
  // good
  itemsCopy = [...items]

解构赋值

当需要使用对象的多个属性时,请使用解构赋值

  // bad
  function getFullName (user) {
    const firstName = user.firstName
    const lastName = user.lastName
  
    return `${firstName} ${lastName}`
  }
  
  // good
  function getFullName (user = {}) {
    const { firstName, lastName } = user || {}
  
    return `${firstName} ${lastName}`
  }

当需要使用数组的多个值时,请同样使用解构赋值

  const arr = [1, 2, 3, 4]
  
  // bad
  const first = arr[0]
  const second = arr[1]
  
  // good
  const [first, second] = arr

字符串

字符串统一使用单引号的形式 ''

  // bad
  const department = "JDC"
  
  // good
  const department = 'JDC'

字符串太长的时候,请不要使用字符串连接符换行 \,而是使用 +

  const str = '京东金融' + '京东少东家'

程序化生成字符串时,请使用模板字符串

  const test = 'test'
  
  // bad
  const str = ['a', 'b', test].join()
  
  // bad
  const str = 'a' + 'b' + test
  
  // good
  const str = `ab${test}`

函数

不要使用 arguments,可以选择使用 ... arguments 只是一个类数组,而 ... 是一个真正的数组


  // bad
  function test () {
    const args = Array.prototype.slice.call(arguments)
    return args.join('')
  }
  
  // good
  function test (...args) {
    return args.join('')
  }

尽量不要更改函数参数的值

可根据使用场景决定,如果有些参数引用值需要被改,那么是可以改动的

对象属性

使用 . 来访问对象属性

const joke = {
  name: 'haha'
}

// bad
const name = joke['name']

// good
const name = joke.name

分号

遵循 Standard 的规范,不使用分号() 根据项目主负责人的开发习惯,如果负责人习惯使用分号,则可继续按添加分号的习惯开发;

若不使用分号,则需注意:

了解分辨哪些场景下是一定要加分号的

// bad
const test = 'good';
(function () {
  const str = 'hahaha';
})()

// good
const test = 'good'
;(() => {
  const str = 'hahaha'
})();

代码规范

大括号风格

if (foo) {
  bar()
} else {
  baz()
}

变量命名

当命名变量时,主流分为驼峰式命名(variableName)和下划线命名(variable_name)两大阵营。

建议使用小驼峰命名方式

逗号风格

逗号前后的空格可以提高代码的可读性,团队约定在逗号后面使用空格,逗号前面不加空格

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

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

逗号放置在当前行的末尾

  // 不推荐
  var foo = 1
  ,
  bar = 2
  
  var foo = 1
  , bar = 2
  
  var foo = ['name' , 'age']

  // 推荐
  var foo = 1,
      bar = 2
  var foo = ['name', 'age']

链式赋值

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

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

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

代码块风格

代码块前要添加空格

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

function a (){}

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

function a () {}