前言
下面这几点将工作中所踩的一些坑简单整理了一下,团队几个人开发,一些默契就比较重要,可以提高开发效率和代码的可读性
命名,编码和注释
命名
A.文件夹命名:文件夹、文件的命名与命名空间应能代表代码功能,可读性强,如hub
B.函数和变量命名:
具有意义的驼峰命名,如hubList;
变量函数名禁止使用关键字和保留字,禁止重新定义(不能重名)或定义不用
C.常量:大写字母,如HUBLIST
编码
采用统一的缩进方式排版代码。缩进为2个ASCII空格,句末必须用分号结尾(待定,vue就无分号)
注释
A单行注释
B多行注释
C.Js代码注释console.log和debugger再提交
D.重要函数或者类等都要添加头描述
字符串拼接
应使用数组保存字符串片段,使用时调用join方法。避免使用+或+=的方式拼接较长的字符串,每个字符串都会使用一个小的内存片段,过多的内存片段会影响性能
例一:
例二:会影响性能
ES6的使用
变量声明:
Let:不存在变量提升问题;不能重复声明
常量声明:
Const:原理是内存地址不可变
箭头函数:
A.有函数名
B.无函数名
C.箭头函数使用注意的问题:
This指向定义者,内部无arguments对象,不能new(因为箭头函数的this就是指向定义本身),函数里面不要有太多的return
D.函数的形参不超过7个,超过用数组,调用时实参和形参对应
E.不能有重复的返回
F.在循环内部声明函数慎用,因为是循环执行完成函数调用才会执行
G.Return后面不要写代码,并且不封装成if…then…else…
导入和导出
使用import和export,只能位于代码顶部和顶部,如果代码中部需要按需导入文件使用require
解决地狱回调问题
A.方法一
B.方法二
C.promise解决多个ajax或定时器调用数据依赖问题
1.promise里面不存在ajax和定时器
var data1=12;
Promise.resolve().then(
function(){data1=24})
.then(function(){
console.log(data1);
})
2.存在定时器
var data2=54;
let _this=this;
Promise.resolve().then(function(){
return new Promise(function(res,rej){
setTimeout(() => {
data2=36
console.log(data2)
console.log(_this)
res()
return data2;
}, 10);
})
}).then(function(){
console.log(data2)
})
在定时器里面设置res(),res执行啦,才会执行then(),如果对应的ajax也可以做类似的封装
promise里面的this并不指向vue,所以需要在外面缓存
3.axios封装的promise
可以在axios里面设置flag,用watch监听,值返回再执行下面的代码,并设置Flag为false
If,for…in,for…of和的使用
A.能用三元运算符就用,减少if的嵌套,第一个花括号位于一行的结束
B.减少多余条件判断,如果是函数返回if里面和外面返回相同的数据类型
C.If…else if…else多个条件时以else结尾,因为符合防御性编程规则
D.NaN不应该用于比较,应该是判断是否是数字
E.Switch…case使用在至少有三个判断值,case不可省,每次case必须用break跳出
F.for…of遍历数组和字符串
可以使用break,return(一个循环一个),continue不使用,降低代码可读性
G.for…in遍历对象
For…in遍历对象包括所有继承的属性,所以如果只是想使用对象本身的属性需要做一个判断
总结
欢迎大家补充和修正!大家圣诞节快乐.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。