一、命名规则（英文-直译）
1、文件命名
文件夹/文件的命名统一用小写。
保证项目有良好的可移植性，可跨平台。相关参考：http://www.ruanyifeng.com/blog/2017/02/filename-should-be-lowercase.html。
2、文件引用路径
因为文件命名统一小写，引用也需要注意大小写问题。
3、js变量
3.1 变量
-
命名方式：小驼峰
-
命名规范：前缀名词
-
命名建议：语义化
案例：
// 友好
let maxCount = 10;
let tableTitle = 'LoginTable';
// 不友好
let setCount = 10;
let getTitle = 'LoginTable';
3.2 常量
案例：
const MAX_COUNT = 10;
const
URL = 'http://www.foreverz.com';
3.3 函数
-
命名方式：小驼峰式命名法。
-
命名规范：前缀应当为动词。
-
命名建议：语义化
可以参考如下的动作：
|
动词
|
含义
|
返回值
|
|
can
|
判断是否可执行某个动作(权限)
|
函数返回一个布尔值。true：可执行；false：不可执行
|
|
has
|
判断是否含有某个值
|
函数返回一个布尔值。true：含有此值；false：不含有此值
|
|
is
|
判断是否为某个值
|
函数返回一个布尔值。true：为某个值；false：不为某个值
|
|
get
|
获取某个值
|
函数返回一个非布尔值
|
|
set
|
设置某个值
|
无返回值、返回是否设置成功或者返回链式对象
|
|
load
|
加载某些数据
|
无返回值或者返回是否加载完成的结果
|
案例：
// 是否可阅读
function canRead(): boolean {
return true;
}
// 获取名称
function getName(): string {
return this.name;
}
3.4 类、构造函数
-
命名方式：大驼峰式命名法，首字母大写
-
命名规范：前缀为名称。
-
命名建议：语义化
案例：
class Person
{
public name: string;
constructor(name) {
this.name = name;
}
}
const person = new Person('mevyn');
公共属性和方法：跟变量和函数的命名一样。
私有属性和方法：前缀为
_
（下划线），后面跟公共属性和方法一样的命名方式。
案例：
class Person {
private _name: string;
constructor() { }
// 公共方法
getName() {
return this._name
;
}
// 公共方法
setName(name) {
this._name = name;
}
}
const person = new Person();
person.setName('mervyn');
person.getName(); // ->mervyn
3.5 css（class、id）命名规则BEM
我们还是使用大团队比较常用的BEM模式。
（1）
class
命名使用BEM其实是块（
block
）、元素（
element
）、修饰符（
modifier
）的缩写，利用不同的区块，功能以及样式来给元素命名。这三个部分使用__与--连接（这里用两个而不是一个是为了留下用于块儿的命名）。
命名约定的模式如下：
.block{}
.block__element{}
.block--modifier{}
（2）
id
一般参与样式，命名的话使用驼峰，如果是给js调用钩子就需要设置为
js_xxxx
的方式。
二、注释
1、单行注释
// 这个函数的执行条件，执行结果大概说明
dosomthing()
2、多行注释
/*
* xxxx 描述较多的时候可以使用多行注释
* xxxx
*/
dosomthing();
3、函数（方法）注释
|
注释名
|
语法
|
含义
|
示例
|
|
@param
|
@param 参数名 {参数类型} 描述信息
|
描述参数的信息
|
@param name {String} 传入名称
|
|
@return @return {返回类型} 描述信息
|
描述返回值的信息
|
@return {Boolean}
|
true:可执行;false:不可执行
|
|
@author
|
@author 作者信息 [附属信息：如邮箱、日期]
|
描述此函数作者的信息
|
@author 张三 2015/07/21
|
|
@version
|
@version XX.XX.XX
|
描述此函数的版本号
|
@version 1.0.3
|
|
@example
|
@example 示例代码
|
演示函数的使用
|
@example setTitle(‘测试’)
|
三、组件
每个 Vue 组件的代码建议不要超出 200 行，如果超出建议拆分组件。
组件一般情况下是可以拆成基础/ui部分和业务部分，基础组件一般是承载呈现，基础功能，不和业务耦合部分。
业务组件一般包含业务功能业务特殊数据等等。
1、UI组件/基础组件
开发的时候注意可拓展性，支持数据传参进行渲染，支持插槽slot。
设置有mixin，mixin中放了基础信息和方法。
2、容器组件
和当前业务耦合性比较高，由多个基础组件组成，可承载当前页的业务接口请求和数据(vuex)。
3、组件存放位置
（1）ui组件存放在
src
/
components
/
中，包含
xxx
.
vue
和
xxmixin
