【前端学习记录】Vue前端规范整理

前言

优秀的项目源码，即使是多人开发，看代码也如一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护。

一、文件及文件夹命名

• 不能使用中文、数字（需要数字是用英文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、函数作用域中的私有函数需要加上_