养成良好的编码习惯（持续更新）

一、js 相关

1. 函数之间需要有空行

// bad
function cloneA () {
	...
}
function cloneV () {
	...
}
function cloneZ () {
	...
}
// good 
function cloneA () {
	...
}

function cloneV () {
	...
}

function cloneZ () {
	...
}

2. 一些更好的命名习惯：

// bad
let stepArr = 'sth';
// good 
let stepList = 'sth';

返回为布尔的函数采用 is / should / show 开头 例如 isDisappear

3. 一般认为一个文件超过 800 行，便是需要提取公共部分的文件，在对模块进行设计的时候，对公共部分进行抽取。

4. 不要在复杂情况下用过多的三元运算符，采用函数能使代码结构更清晰 （本条在 vue 中比较难实现）

5. 模块的引用 外部模块 外部函数 内部函数 内部模块

// bad
import List from 'element-ui'
import { orderSave, saveUnSubmitData, getOrderPageInit, updateAgreementStatus } from '@/apis/order'
import Header from '@/components/header'
import { getQueryObject, regroup, uuid } from '@/utils'
import { mapActions, mapState } from 'vuex'
import { clone } from 'lodash'
// good
import List from 'element-ui'

import { clone } from 'lodash'
import { mapActions, mapState } from 'vuex'

import Header from '@/components/header'

import { orderSave, saveUnSubmitData, getOrderPageInit, updateAgreementStatus } from '@/apis/order'
import { getQueryObject, regroup, uuid } from '@/utils'

这样看上去是不是简明很多，不过实行起来比较麻烦。 5. 避免游离函数的出现

// bad
let a = 'sth';
a = 'another thing'
// good 
const inited = () => {
    let a = 'sth';
    a = 'another thing'
    ...
}
inited();

对于这种游离的函数，最好拿个函数包裹起来。

6. 编写意义明确的组件名

// bad
<material-panel-feedback />
// good
<material-panel-feedback-dialog />

例如这个组件，其实是个内部是个dialog封装起来的对话框，应该在组件名处标明其对话框的属性

7. 编译意义明确的判断条件

// bad
if (privateCarList.length) { ... }
// good
if (privateCarList.length !== 0) { ... }

二、css 相关

1. 嵌套属性需要在新属性前面加空行（如果打开 css lint 会提示这条）

// bad
.container {
	&-content {
		...
	}
}
// good
.container {

	&-content {
		...
	}
}