前端代码规范

一、 基本规则描述

1 、变量命名、函数：

a 、变量命名语义化；

b 、不能使用拼音；

c 、函数的命名建议动词开头；

2 、常量命名全部使用大写字母；

3 、提示语归类（暂定）：所有的提示语写入到一个 JS 文件里，便于管理；

4 、正则表达式：正则表达式写在一个 JS 文件里，方便管理；

5 、接口路径分类管理，写在不同的 JS 文件里；

6 、文件的编码格式： UTF-8 ；

7 、修改别人的代码：日期、说明、修改人、开始、结束、 bug 号；

8 、禁止在 html 里写行内样式，可以在 html 里动态绑定行内样式

10 、使用 ES6 的新语法（包含但不限于以下几种）：

a 、解构赋值：

b 、箭头函数：

c 、模板字符串：

11 、其它规范细则请参考第五条《代码规范细则》

二、 CSS 样式

1 、 css 样式文件头部注释：

模块：【公共模块】

页面名称：【 common.css 】

说明：【公共的样式】

作者

日期

2 、 样式的名称全部使用小写，用下户线“ _ ”，结束添加分好“；”；

3 、公共的样式名称：【 common_ 样式名称】

4 、组件内的样式名称：【页面名称 / 模块名称 _ 样式名称】

5 、公共的样式文件，样式要分组 【 font 】【 padding 】【 margin 】

三、 VUE 模板

1 、文件命名：驼峰法命名，【父模块 + 功能名 +.vue 】；

2 、 vue 模板文件头部注释：

模块：【一级模块 - { 二级模块 } - { 三级模块 } 】

页面名称：【页面的名称 .vue 】

说明：【页面的对应的功能描述】

作者：【创建人】

日期：【创建日期】

3 、页面标签；

<template></template>

<script></script>

<style scoped></style>

4 、 javascript 方法注释：

描述：【方法的功能】

作者

时间

参数：【数据类型】【参数描述】

return ：【数据类型】【参数描述】

5 、 HTML 标签使用要求：

a 、标签要语义化；

b 、标签要成对，开始标签结束标签

c 、页面模块要分组，注释要写清楚

d 、代码缩进要按照标准，要有层级关系，层次分明；

四、组件

1 、文件命名：【功能名称 +.vue 】；

2 、组件头部注释：

模块

页面名称

说明

作者

日期

demo ：【描述组件如何使用、自定义参数说明】

五、代码规范细则

使用两个空格进行缩进 。

除需要转义的情况外，字符串统一使用单引号。

不要定义未使用的变量。

关键字后面加空格

函数声明时括号与函数名间加空格。

始终使用   ===   替代   == 。

例外：   obj == null   可以用来检查   null || undefined 。

字符串拼接操作符 (Infix operators) 之间要留空格。

逗号后面加空格。

else 关键字要与花括号保持在同一行。

多行 if 语句的的括号不能省。

不要丢掉异常处理中 err 参数。

使用浏览器全局变量时加上   window.   前缀。

不允许有连续多行空行。

对于三元运算符   ?   和   :   与他们所负责的代码处于同一行

每个 var 关键字单独声明一个变量。

条件语句中赋值语句使用括号包起来。这样使得代码更加清晰可读，而不会认为是将条件判断语句的全等号（ === ）错写成了等号（ = ）

单行代码块两边加空格。

对于变量和函数名统一使用驼峰命名法。

不允许有多余的行末逗号。

始终将逗号置于行末。

点号操作符须与属性需在同一行。

文件末尾留一空行。

函数调用时标识符与括号间不留间隔。

键值对当中冒号与值之间要留空白。

构造函数要以大写字母开头。

无参的构造函数调用时要带上括号。

对象中定义了存值器，一定要对应的定义取值器。

子类的构造器中一定要调用   super

使用数组字面量而不是构造器。

避免使用   arguments.callee   和   arguments.caller 。

避免对类名重新赋值。

避免修改使用   const   声明的变量。

避免使用常量作为条件表达式的条件（循环语句除外）。

正则中不要使用控制符。

不要使用   debugger 。

不要对变量使用   delete   操作。

不要定义冗余的函数参数。

类中不要定义冗余的属性。

对象字面量中不要定义重复的属性。

switch   语句中不要定义重复的   case   分支。

同一模块有多个导入时一次性写完。

正则中不要使用空字符。

不要解构空值。

不要使用   eval() 。

catch   中不要对错误重新赋值。

不要扩展原生对象

避免多余的函数上下文绑定。

避免不必要的布尔转换。

不要使用多余的括号包裹函数。

switch   一定要使用   break   来将条件分支正常中断。

不要省去小数点前面的 0 。

避免对声明过的函数重新赋值。

不要对全局只读对象重新赋值。

注意隐式的   eval() 。

嵌套的代码块中禁止再定义函数。

不要向   RegExp   构造器传入非法的正则表达式。

不要使用非法的空白符。

禁止使用   __iterator__ 。

外部变量不要与对象属性重名。

不要使用标签语句。

不要书写不必要的嵌套代码块。

不要混合使用空格与制表符作为缩进。

除了缩进，不要使用多个空格。

不要使用多行字符串。

new   创建对象实例后需要赋值给变量。

禁止使用   Function   构造器。

禁止使用   Object   构造器。

禁止使用   new require 。

禁止使用   Symbol   构造器。

禁止使用原始包装器。

不要将全局对象的属性作为函数调用。

不要使用八进制字面量。

字符串字面量中也不要使用八进制转义字符。

使用   __dirname   和   __filename   时尽量避免使用字符串拼接。

使用   getPrototypeOf   来替代   __proto__ 。

不要重复声明变量。

正则中避免使用多个空格。

return 语句中的赋值必需有括号包裹。

避免将变量赋值给自己

避免将变量与自己进行比较操作。

避免使用逗号操作符。

不要随意更改关键字的值。

禁止使用稀疏数组（ Sparse arrays ）。

不要使用制表符。

正确使用 ES6 中的字符串模板。

使用   this   前请确保   super()   已调用。

用   throw   抛错时，抛出   Error   对象而不是字符串。

行末不留空格。

不要使用   undefined   来初始化变量。

循环语句中注意更新循环变量。

如果有更好的实现，尽量不要使用三元表达式。

return ， throw ， continue   和   break   后不要再跟代码。

finally   代码块中不要再改变程序执行流程。

关系运算符的左值不要做取反操作。

避免不必要的   .call()   和   .apply() 。

避免使用不必要的计算值作对象属性。

禁止多余的构造器。

禁止不必要的转义。

import, export 和解构操作中，禁止赋值到同名变量。

属性前面不要加空格。

禁止使用   with 。

对象属性换行时注意统一代码风格。

代码块中避免多余留白。

展开运算符与它的表达式间不要留空白。

遇到分号时空格要后留前不留。

代码块首尾留空格。

圆括号间不留空格。

一元运算符后面跟一个空格。

注释首尾留空格。

模板字符串中变量前后不加空格。

检查   NaN   的正确姿势是使用   isNaN() 。

用合法的字符串跟   typeof   进行比较操作。

自调用匿名函数 (IIFEs) 使用括号包裹。

yield *   中的   *   前后都要有空格。

不要使用分号。

不要使用   (,   [, or   `   等作为一行的开始。在没有分号的情况下代码压缩后会导致报错，而坚持这一规范则可避免出错。

参考链接：

https://standardjs.com/rules-zhcn.html#javascript-standard-style