前端开发规范文档

一、 前端开发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
}
Copyright © 用友 -【生态技术部】 2021 all right reserved,powered by Gitbook修订时间: 2021-09-29 17:44:21

results matching ""

    No results matching ""