代码规范(前端)

************************************************

在学习中,好的代码,是容易维护的。所以有必要学习一下代码在书写中存在的一些规范。

这篇代码规范偏前端一些。在文中不是必须要这样写 这样写就是为了代码的更加规范性,更容易维护。

一、js

1.声明变量

使用let来代替var声明所有的局部变量。如果变量不需要被重新赋值,默认应该使用const。

2.尽量使用箭头函数

$("#btn").click(function(){
$(".d").each(()=>{
console.log(this); 这里this仍然指向btn元素
})
})
$("#btn").click(function(){
$(".d").each(function(){
console.log(this); 这里的this指向的遍历的元素
})
})

 3.每次只声明一个变量

// bad
let a = 1, b = 2, c = 3;
// good
let a = 1;
let b = 2;
let c = 3;

4.使用单引号

let a = 'fdfdf';

二、css

1.写成一行,多个层级关系也写一行 (方便看出层级关系)

.screenWarp{height:50rpx;line-height:50rpx;padding:20rpx 0;}
.screenBox{display: inline-block;overflow: hidden;}
.screenWarp .txt{float: left;font-size: 30rpx;}
.screenWarp .screenImg{width: 35rpx;height: 35rpx;}

2.不要省略最后分号“;”

.screenBox{display: inline-block;overflow: hidden;}

  最好按照上面的方式写,不要按照下面这种

.screenBox{display: inline-block;overflow: hidden}

3.命名

1.父级 
2.父级+子级      
3.子级+子子级+标签 
4.id(最后用)      

三、html

1.命名

1.最外层-文件命名   防止混乱+重复
2.外盒子-小驼峰命名
3.子级  -下划线

(名字不要太长1~3个单词)

************************持续更新中************************

猜你喜欢

转载自blog.csdn.net/lina2017lina/article/details/81093001