前言
优秀的项目源码，即使是多人开发，看代码也如一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护。
一、文件及文件夹命名
- 不能使用中文、数字（需要数字是用英文first、second字符代替）
- 文件名使用全小写
- vue、css、js、jpg等图片格式多单词文件名使用中划线-代替
-eg: big-mom.jpg
二、钩子顺序
name
components
mixins
props
data
computed
filters
watch
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroyed
destroyed
errorCaptured
methods
三、注释规范
为组件中每一个方法编写方法说明，以下情况，务必添加注释
- 1、公共组件使用说明
- 2、各组件中重要函数或者类说明
- 3、复杂的业务逻辑处理说明
- 4、特殊情况的代码处理说明，对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述
四、组件封装
代码可封装时，要及时封装组件，尽量避免一个index文件出现超过1000行；
五、CSS编码规范
1、选择器命名
全英文小写（尽量不要用中文拼音命名）
使用中划线分割多单词的选择器名
禁止使用下划线（修改element自带样式除外）2、空格
‘{’前留一个空格；
‘：’后留一个空格；
句末不留多余的空格；3、每个属性声明末尾都要添加分号（单元内统一）
.click-btn {
width: 100px;
}
- 4、换行
‘{’后和‘}’后换行
多个规则的选择器用‘，’分割并换行
.aa,
.bb {
color: red;
}
- 5、属性声明顺序
1）定位：position\z-index\top\right\bottom\left\clip;
2）盒子模型：width、height、min-width、max-height、min-height、max-height、margin、padding；
3） 文字：font、font-size、font-weight、text-align
4） 背景：background-image
5） 其他：animation、transition等
- 6、属性缩写
1）属性合并，包括有margin、padding、border、background等
// bad
.aa {
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
margin-top: 10px;
margin-left: 20px;
}
// good
.aa {
padding: 5px 5px 5px 0;
margin: 10px 0 0 20px;
}
2）0符号缩写
0px直接写成 0；
- 7、性能优化
优先使用class，禁止使用行内样式，也就是在dom节点中写入style=，规避这种写法的用意在于行内样式不易于维护、不可复用、扩大HTML容量。除非特殊情况（-webkit-box-origin stylus 无法解析只能写在行内样式中等）
禁止使用标签选择器。规避这种写法的用意在于CSS解析是从右到左的，如果使用标签选择器，则css渲染会花费很多性能。另外会影响所有该标签选择器的元素样式，导致，导致特殊情况需要样式重置，不利于维护。
.span {
}
- 8、模块化命名
样式选择器命名以模块为单位，以下是一个box模块
<div class="box">
<p class="title">
title
</p>
<div class="content">
<i class="icon"></i>
<p class="text">content</p>
</div>
</div>
css模块化命名
.box {
}
.box .tltle {
}
.box .content {
}
这样命名的好处是，知道该整块的整体样式，易于维护模块迁移或者删除，并且每个样式块都有前缀，不会被覆盖。
- 9、模块样式跟其他模块之间要空一行，便于维护
<!-- 这里是box2模块 -->
.box {
}
.box .tltle {
}
.box .content {
}
<!-- 这里是box2模块 -->
.box2 {
}
.box2 .tltle {
}
.box2 .content {
}
- 10、公共样式有的，不单独重写样式
- 11、尽量少用 !important
- 12、单独vue文件样式引用加scoped
- 13、非公共样式命名时，类名尽量不要太常见（举例：常见的如：“title”，可以采用“instance-title”），避免浏览器缓存对样式造成的影响
六、JS编码规范
- 1、使用驼峰式变量命名、属性
- 2、常量使用全大写，使用下划线“_”作为单词分割
- 3、总是使用分号，句末习惯性加上分号
- 4、使用2个空格缩进
- 5、冒号、逗号、小括号、大括号后总是使用空格符
// bad
let arr={
a:1,b:2,c:3}
function foo(){
}
// good
let arr = {
a: 1,
b: 2,
c: 3,
};
function foo() {
}
- 6、构造函数命名使用驼峰式切第一个字母大写
function BookDesk() {
}
- 7、总是使用花括号
// bad
if (true) return;
// good
if (true) {
return;
}
- 8、使用换行将逻辑相对独立的两块代码隔开
- 9、比较变量使用
===代替==; - 10、条件种类超过3种时，使用switch代替if
- 11、使用forEach代替for循环
- 12、函数作用域中的私有函数需要加上_
