注：本文档基于单页面应用框架，例如react，vue等，并且在项目中使用了eslint来规范代码
1. 文件命名
index文件采用小写，例如：index.js，其他的文件采用首字母大写
例如：
HelloWorld.js
2. css规范
注：项目实际中采用less或者sass
- 使用四个空格的缩进，并且名称和花括号间给一个空格
/* bad css */
.next{
width:100px;
}
/* good css */
.next {
width: 100px;
}
- 尽可能使用短的十六进制数值，例如使用#fff代替#fffffff
- 属性声明顺序 position -> box model盒模型 -> 排版 -> 外观
- 不适用@import
- class命名
全是用小写，单词之间使用短横线
例如：
.next-btn
- 选择器最多3层
- 图片一定要压缩处理
- 尽量少用id来定义样式
- 引用css的时候一定要声明
rel=”stylesheet”
例如：
<link rel=”stylesheet”href=”page.css”
3. js规范
- 使用四个空格的缩进
- 判断相等于不相等采用
===和!== - 方法之前加单行或者多行注释
- 变量命名采用es6命名方式，不要使用
var命名 - 方法采用箭头函数方式
- 类命名首字母需要大写
- 字符串统一使用单引号或者反向单引号，标签或者组件属性值采用双引号
- 定义数组采用
[]，避免使用new Array，同理Object采用{} - 定义对象包含属性，每个属性换行并且末尾加上逗号，冒号与值之间留一个空格，与属性之间不留空格
state = {
idCardInfo: {},
imageUrlFront: '',
imageUrlBack: '',
loadingFront: false,
loadingBack: false,
loadingVideo: false,
}
- 单行注释
双斜线后，必须跟注释的内容保留一个空格，
例如：
// 注释注释
- 多行注释
例如：
/**
* 多行注释
*/
-
ifelse前后都要留空格
if (condition) {
} else {
}
-
for循环
for与括号间留一个空格，分号后面留一个空格
for (let i=0; i<10; i++) {
}
-
每个变量或者常量定义都要单独定义
-
花括号{}里面的代码都要和它的前后保留一个空格
例如：
{ data, func }
- 组件有多个属性时，每个属性换行写
例如：
loan/bindCard/index.js 420行 /* bad */
- 特殊符号前后都留一个空格，类似 +，-，&&等
-
if中只有return的时候
/* bad /
if(str.length>19){
return;
}
/ good */
if (str.length > 19) return; - 定义function的时候，括号与花括号间留一个空格
- 在react中，无状态组件采用function定义组件
HTML规范
- 嵌套的节点给四格空格的缩进
- 属性上采用双引号，不要使用单引号
- 减少标签数量，尽量避免多余的父节点
- html 属性保证易读性属性
class
id
name
data
src, type, href, value, max-length, min-length等
placeholder, title, alt
required, readonly, disabled
- img标签添加alt属性
- 文档类型声明统一用 <!DOCTYPE html>，编码统一使用utf-8，<meta charset="utf-8">
- 标签必须合法且闭合、嵌套正确，标签名需要小写
- 标签需要符合语义化
网友评论