前端开发规范文档

一、 前端开发JavaScript基础规范

统一前端的编码规范，有助于代码的维护，以及后续开发代码减少BUG；

创建引用优化

• 创建引用的时候，都使用 const，不要使用 var；const 和 let 都是块级作用域，var 是函数级作用域

// bad
var a = 1
var b = 2

// good
const a = 1
const b = 2

• 如果引用是可变动的，使用 let 代替 var

// bad
var count = 1
if (count < 10) {
  count += 1
}

// good
let count = 1
if (count < 10) {
  count += 1
}

对象优化

• 使用字面量值创建对象，不要用保留字作为对象的键值，在 IE8 有兼容性问题，如果引用是可变动的，使用 let 代替 var

// bad
const a = new Object{}
// bad
const a = {
  default: {},  // default 是保留字
  common: {}
}

// good
const a = {}
// good
const a = {
  defaults: {},
  common: {}
}

• 当使用动态属性名创建对象时，使用对象计算属性名来进行创建

//动态获取键值
function getKey(k) {
  return `a key named ${k}`
}

// bad
const obj = {
  id: 5,
  name: 'San Francisco'
};
obj[getKey('enabled')] = true

// good
const obj = {
  id: 5,
  name: 'San Francisco',
  [getKey('enabled')]: true
};

• *使用对象方法的简写方式、对象属性值的简写方式、简写的对象属性分组后统一放到对象声明的开头

const job = 'FrontEnd';
const department = 'JDC';
// bad
const item = {
  value: 1,
  job:job,
  department:department,
  addValue: function (val) {
    return item.value + val
  }
}

// good
const item = {
  //对象属性值的简写方式,并且简写的对象属性分组后统一放到对象声明的开头
  job,
  department,
  value: 1,
  //对象方法的简写方式
  addValue (val) {
    return item.value + val
  }
}

• 对象合并或者对象浅拷贝的时候，优先使用对象展开运算符 ... 来做对象浅拷贝而不是使用 Object.assign()

// bad
const original = { a: 1, b: 2 }
const copy = Object.assign({}, original, { c: 3 }) // copy => { a: 1, b: 2, c: 3 }

// good
const original = { a: 1, b: 2 }
const copy = { ...original, c: 3 } // copy => { a: 1, b: 2, c: 3 }

数组优化

• 使用字面量值创建数组

// bad
const items = new Array()

// good
const items = []

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

const items = []

// bad
items[items.length] = 'test'

// good
items.push('test')

• 使用展开运算符 ... 复制数组

const items = []
const itemsCopy = []

// bad
for (let i = 0; i < items.elngth; i++) {
  itemsCopy[i] = items[i]
}

// good
itemsCopy = [...items]

• *数据内含对象，使用对象内数据时，需要判断数组数据存在

const items = [
  {
    name:'tom'
  }
]

// good
if(items && items.lenghth){
  items[0].name
}