vue开发规范

公司开发给了一份规范，自己总结一下比较常用的吧

CSS/LESS

BEM命名规范

将html内容分为三部分：块（block）、元素（element）、修饰符（modifier）
单词之间用-（单中划线）连接
块和元素之间用__（双下划线）连接
元素和修饰符之间用_（单下划线）连接
优势：组建时间完全解耦，不会造成命名空间的污染。

例如需要画如下用户信息：
整个框部分就是一个块，大多数情况下块内部分都可视为元素，等级可能会根据高低显示不同颜色，就可以用修饰符表示

<div class="userinfo">
	<img userinfo__avatar src="xx"/>
	<div class="userinfo__right">
		<span class="userinfo__name">姓名：xx</span>
		<span class="userinfo__level userinfo__level_light">等级：xx</span>
	</div>
</div>

书写规范

1. 尽量不进行嵌套，防止修改外部类名内部样式不生效
2. 如需嵌套，限制不要超过三层
3. 不要使用标签名

JavaScript

? 和??

取对象属性时使用可选链，避免对undefined取值导致报错
bad：

let name = data.userinfo.name;

good:

let name = data?.userinfo?.name;

此时若没有data或userinfo也不会报错

如还想加一个默认值：

let name = data?.userinfo?.name ?? "翠花";

??和||区别：??是只有在前面为null或undefined时执行后面语句，||是前面为false就执行后面语句

形参默认值

传入方法的参数想设置默认值
bad:

function setName(name) {
	this.userinfo.name = name || "翠花";
}

good:

function setName(name = "翠花") {
	this.userinfo.name = name;
}

形参个数

传入方法的参数尽量不超过两个，过多的话可以整合成json传入，避免传入顺序错误产生问题

function setUserinfo({name,level,sex,age}){
	//...
}

删除弃用代码

无用的代码尽量删干净，也不要注释掉，有代码管理工具可以看以前的代码

链式调用

就是在类的方法里返回当前对象

class User {
	constructor(name,level){
		this.name = name;
		this.level = level;
	}
	levelUp(){
		this.level ++;
		return this;
	}
	showLevelUpAni(){
		//...
		return this;
	}
}
let user = new User("翠花",18).levelUp().showLevelUpAni();

尽量不使用！

不使用否定条件式，因为不符合正常思考方式
= _=

多条件判断，使用includes

bad：

if (name == "翠花" || name == "张三") {}

good：

var names = ["翠花","张三"];
if (names.includes(name)){}

匹配所有条件

判断是否所有用户等级都大于3
使用Array.every
部分浏览器不支持every，目前没成功过= =

isAllLevelMoreThanThree(userList){
	return userList.every(item=>{
		item.level > 3;
	})
}

使用Array.find

isAllLevelMoreThanThree(userList){
	return userList.find(item=>{
		item.level <= 3;
	}) === undefined;
}

匹配部分条件

判断是否有客户名称为“翠花”
使用Array.some
似乎也是部分不支持，咩试

hasNameIsCuihua(userList){
	return userList.some(item=>{
		item.name == "翠花";
	})
}

当然也可以使用Array.find

hasNameIsCuihua(userList){
	return userList.find(item=>{
		item.name == "翠花";
	}) != undefined
}