042_前端规范 2021-06-03

042_前端规范

• 最终目的—去除冗余，让代码易于维护

常见代码片段

// 遍历数组
[1,2,3].forEach(function(value, index)) { 
	console.log(value) 
} 
// 映射新数组 
arr = [1,2,3].map(v => v*2)  // [2,4,6] 
// 所有元素是否通过测试 
[1,2,3,4].every(v => v>2)  // false 
// 是否有元素通过测试 
[1,2,3,4].some(v => v>2)   // true 
// 累加   
[1,2,3,4].reduce((pre,cur) => pre+cur)  //10
 
//过滤数组 
[1,2,3,4,5].filter(v => v>3)  // [4,5] 
//查找符合条件的元素 
arr = [{name:’zhangsan’,age:17},{name:’lisi’,age:19}]; 
arr.find(v => v.age>18) 
// 查找索引 
arr.findIndex(v => v.age>18) 
// 是否包含 
[1,2,3,4].includes(3)  // true 
// 字符串串的拼接 
[’hello’,’world’].join(‘—’)
 
//获取对象的key值 
Object.keys({name:’joy’,age: 1}) 
//获取对象里数据的数量 
Object.keys({name:’joy’,age: 1}).length 
// 遍历数组 
Object.entries({name:’joy’,age: 1}) 
//结果：[[‘name’,'joy'],['age',1]]; 
Object.entries({name:’joy’,age:
1}).forEach(([k,v])=>{  console.log(v) 
}) 
 
// 去除空白
’   Helo  world    ’.trim() 
//重复创建字符串
'hello'.repeat(2) 
//连接数组 
arr1 = [1,2,3] 
arr2 = [4,5,6,7] 
arr1.concat(arr2) 
[…arr1, …arr2] 
// 数组去重 
arr = [1,2,3,4,6,2,1,3,7,9] 
[…new Set(arr)] 

javascript规范

*校验规则eslint详细规则 * 使用：eslint-prettier 校验
1.驼峰命名，不要使用拼⾳音 如：activiesList
2.使用两个空格进⾏行行缩进；
3.⽤const定义常量，常量, 使用全部字⺟母⼤大写；如果对变量 重新赋值，用let替代var； eslint: no-var

如：
const NUM1 = 1; 
let cont = 1  if(true) { 
   cont+ = 1 
}

4.boole(} )an 类型的变量使用 is 或 has 开头。
如：
let isShow = true
let hasShow = false
5.直接用字⾯面量定义对象 eslint: no-new-object
const item = {}
6.三元操作符始终写在前⼀一⾏行行, 以免分号的隐式插⼊入产⽣生预想不到的问题。
如：let x = a ? b : c; let x = foo.bar(). doSomething(). doSomethingElse();

7.单⾏行行注释  // 
8.多⾏行行注释   
/* 
*	代码执⾏行行到这里后会调用setTitle()函数 
*	setTitle()：设置title的值 
9.函数(*/ )注释 强制要求dsdoc格式注释。参数和返回值 
/** 
*	以星号开头，紧跟⼀一个空格，第⼀一⾏行行为函数说明  
*	@param {类型} 参数 单独类型的参数 
*	@param {[类型|类型|类型]} 参数 多种类型的参数 
*	@param {类型} [可选参数] 参数 可选参数用[]包起来 
*	@return {类型} 说明 
*	@author 作者 创建时间 修改时间（短⽇日期）改别⼈人代码要留留名 
*	@example 举例例（如果需要） 
*/
 如：/** 
*	Add two number 
*	@param {number1} num1 The first number 
*	@param {number2} num1 The second number 
*. @return {number} the sum of the two numbers 
*/ function add(num1, num2){ 
       return num1 + num2;

   } 
10.不要用 eval() 
11.⾏行行尾需要加分号； 
12.动态给对象赋值 
如：function getKey(k) { return `a key named ${k}`; 
} 
// bad 
const obj = {
    id: 5, name: ‘Su San’, 
}; 
Obj[getKey(‘enabled’)] = true; 

// good 
const obj = { 
   id: 5, 
   name: ‘Su San’, 
   [getKey(‘enabled’)]: true, 
};
13.对象⽅方法使用简写 
// bad 
const obj = { 
   value: 1, 
   addValue: function(value){ 
   	return value + obj.value 
   }; 
}

// good 
const obj = { 
   value: 1, 
   addValue(value){ 
   	return value + obj.value; 
   } 
}; 
14.对象属性简写 
const name = ‘Su shan shan’ 
// bad 
const obj = { 
   	name：name, 
   };
   
// good 
const obj = { 
   	name, 
   }; 
15.对象简写写在前⾯面 
const name = ‘Su shan shan’ 
const ageVal = 18
// bad 
const obj = {  
 id: ‘123’, 
 name, 
 sex: ‘⼥’, 
 ageVal 
};

// good 
const obj = { 
  name, 
ageVal,
sex: ‘女’,
 id: ‘123’, 
 }; 
16.合法的key不需要引号  “易读，易于压缩” 
// bad 	
const bad = { 
   ‘foo’：1,
   ‘bar’: 2,
   ‘b-ful’:3
}

// good 
const good = { 
   foo：1, 
   bar: 2, 
   ‘b-ful’:3 
};
17.⽤`Object.assign` 浅拷贝，用展开符号…去获取⼀一个新对象 
// every bad 
const orign1 = {a:1, b:2} 
const copy = Object.assign(orign1, {c:3}) 
delete copy.a 

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

// good 
const orign1 = {a:1, b:2} 
const copy = {…orign1, c:3) 
const {a, …noA} = copy  //noA => {b:2,c:3} 

18.用字面量创建数组  
// const item = [] 
19.用Array.form 把类数组转换为数组 
const foo = document.querySelectorAll(‘.foo’) 
const nodes = Array.form(foo) 
20.数组的回调函数，要有return 
[1,2,3].map(x => {
   [1,2,3].map(x => x*2) 
   const y = x+1; 
   return  x*y 
}) 
21.用… to 复制数组 
const len = items.length; 
const itemsCopy = []; 
let i; 
// bad 
for(i=0;i<len.length; I+=1) { 
   itemsCopy[I] = items[I]; 
} 
// good 
const itemsCopy = […items] 
22.简单的字符串串有单引号 
23.使用字符串串模版连接字符串串，可读性⽐比较好 
function sayHi(name) { 
return `How are you  ${name}` 
} 

解构

使用对象解构来获取对象的值 
// 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}` 
} 
// good 
function getFullName ({firstName,lastName}) { 
   return `${firstName} ${lastName}` 
}

数组解构 
const  arr  = [1, 2,3,4,5] 
// bad 
const first = arr[0] 
const second = arr[1]
// good 
const [first,second] = arr 

返回多个值时，用对象解构，不要用数组，因为“返回值不需要考虑顺序” 
// bad 
function processInput(input) { 
return [left, right, top, bottom] 
}
// good 
function processInput(input) { 
return {left, right, top, bottom} 
} 

有默认值的参数放后⾯面
// bad 
function handleThing(opts={}, name) { 
//… 
} 
// good 
function handleThing(name, opts={}) { 
//… 
}

下载文件 重命名

window.open(urll + '?attname=会议签到表.xls','_blank')