前端基础开发文档

1. 驼峰式命名法

-Pascal Case ⼤驼峰式命名法：⾸字⺟⼤写。eg：StudentInfo、UserInfo、ProductInfo -Camel Case 

⼩驼峰式命名法：⾸字⺟⼩写。eg：studentInfo、userInfo、productInfo

2. ⽂件命名规范

⽂件名不能含有空格 ⽂件名建议只使⽤⼩写字⺟，不使⽤⼤写字⺟。（但⽐如说像github的说明类⽂件， README，则应该全部使⽤⼤写）

1. 驼峰式命名法

2. ⽂件命名规范

3. ⽂件名包含多个单词时，单词之间建议使⽤半⻆的连词线 ( - ) 分隔。

3. vue的开发规范

3.1 vue的⽣命钩⼦函数

3.2 vue⽂件基本结构

3.4 v-for

在执⾏ v-for 遍历的时候，总是应该带上 key 值使更新 DOM 时渲染效率更⾼

3.5 v-if / v-else-if / v-else

3.5 method ⽅法命名命名规范

驼峰式命名，统⼀使⽤动词或者动词+名词形式

请求数据⽅法，以 data 结尾

3.6 views/components 下的⽂件命名

只有⼀个⽂件的情况下不会出现⽂件夹，⽽是直接放在 views/components ⽬录下⾯，如 index.vue

尽量是名词,且使⽤驼峰命名法

开头的单词就是所属模块名字（workbenchIndex、workbenchList、workbenchEdit）

名字⾄少两个单词（good: workbenchIndex）（bad:workbench） 

3.7 元素特性的顺序

原⽣属性放前⾯，指令放后⾯

3.8 ⽬录⽂件夹及⼦⽂件规范

可以根据⾃⼰的习惯来使⽤components和views⽂件夹

3.9 注释规范

代码注释在⼀个项⽬的后期维护中显的尤为重要，所以我们要为每⼀个被复⽤的组件编写组件使⽤说明，

为组件中每⼀个⽅法编写⽅法说明

3.9.1 务必添加注释列表

公共组件使⽤说明

各组件中重要函数或者类说明

复杂的业务逻辑处理说明

特殊情况的代码处理说明,对于代码中特殊⽤途的变量、存在临界值、函数中使⽤的 hack、使⽤了某种算

法或思路等需要进⾏注释描述

多重 if 判断语句

注释块必须以/**（⾄少两个星号）开头**/

单⾏注释使⽤//

3.9.2 单⾏注释

3.9.3 多⾏注释

4. 语法

4.1 变量申明

4.1.1 尽量使⽤ const

应当使⽤ const 来定义所有引⽤变量；避免使⽤ var 。 这能够确保你的引⽤值不会被重新赋值，减少项⽬中的 bug，并提⾼代码的可读性。

4.1.2 不要使⽤ var

如果必须要使⽤⼀个可以被重新赋值的引⽤，必须⽤ let 来代替 var 。

原因是，let 创建块级作⽤域的变量，⽽ var 创建的函数级作⽤域变量会造成变量提升。

4.1.3 最⼩作⽤域

变量应当在最接近它们被使⽤的地⽅被定义，⽽不是定义在块级作⽤域的开头。这样能确 保它们影响最⼩的作⽤域范围。

需要注意的是，let 和 const 都是块级作⽤域的

4.2 对象

4.2.1 使⽤字⾯量创建新对象

创建对象时，应当使⽤字⾯量创建对象。

由于⼆者在性能上没有区别，⽽使⽤字⾯量能减少代码⽂件的⼤⼩，且让团队⻛格统⼀。因 此字⾯量创建对象是⼀个更好的⽅法。

4.2.2 动态属性名

对象的动态属性名应当使⽤计算属性名的⽅式定义

这能够让对象的所有属性在同⼀个地⽅被定义，减少维护⼯作量

4.2.3 使⽤对象⽅法简写

这是 ES6 提供的语法糖，这个语法可以更简洁地定义复杂对象字⾯量。

4.2.4 仅在必要时给属性名加上引号

不应当给常规的对象属性名加引号。

在性能上，⼤多数 JS 引擎对⽆引号的属性名读取有更⾼的性能。⽽且代码编辑器会对此有 语法⾼亮。 

4.3 类

4.3.1 class 关键词

应该使⽤ Class 来创建⼀个类，⽽不是使⽤原型⽅式。

4.3.2 extend 关键词

应该 使⽤ extends 来继承⼀个类，⽽不是使⽤原型链或者 apply ⽅法

使⽤语法糖，提⾼代码可读性

4.4 函数

4.4.1 函数声明

不应当使⽤函数声明⽅式来创建函数。直接声明函数会使函数声明提前，导致它在函数定义之 前就可以被引⽤。这会影响可读性和可维护性。

如果⼀个函数⽅法太⼤，或者太复杂，使得它影响了⽂件其余部分代码的理解，应当将其独⽴ 出来作为⼀个模块

4.4.2 不在⾮函数块中定义函数

不允许在⾮函数块作⽤域中（例如 if, while 等）定义⼀个函数。应当先把函数分配给⼀个变量。

4.4.3 箭头函数

当必须使⽤⼀个函数表达式时，例如作为回调函数传递给⽅法，应当使⽤箭头函数。 箭头的两侧必须有⼀个空格。

箭头函数能避免 this 上下⽂的困扰，并且很简洁。 如果有必须使⽤独⽴ this 上下⽂的情况，应当⾃⾏定义函数后再进⾏传递 

4.5 模块

4.5.1 import/export

应当使⽤ import/export 来导⼊模块。 禁⽌导出⼀个导⼊语句。

4.5.2 通配符

禁⽌使⽤通配符导⼊模块。 因为这要求对应模块必须有⼀个默认导出项。

4.5.3 多次导⼊

禁⽌从⼀个⽂件中多次导⼊属性。

4.5.3 默认导出

当只有⼀个导出项时，应当使⽤默认导出。

4.6 ⽐较

4.6.1 ===/==

必须使⽤ === 和 !== 来进⾏⽐较。如⾮必要，不应当使⽤ == 和 != 。

4.6.2 三元表达式

如⾮必要，禁⽌嵌套三元表达式。如⾮必要不应当折⾏。

实际在编写代码的时候为使结构清晰是不建议使⽤这种三元表达式嵌套的，并且代码的执⾏ 效率也会降低，因此还是使⽤常规的分⽀结构