HTML5 前端代码规范整理

2018-06-18  本文已影响2人  Valley4Z

注：本文档基于单页面应用框架，例如react，vue等，并且在项目中使用了eslint来规范代码

1. 文件命名

index文件采用小写，例如：index.js，其他的文件采用首字母大写

例如：

HelloWorld.js

2. css规范

注：项目实际中采用less或者sass

  1. 使用四个空格的缩进，并且名称和花括号间给一个空格
/* bad css */
.next{
  width:100px;
}
/* good css */
.next {
    width: 100px;
}
  1. 尽可能使用短的十六进制数值，例如使用#fff代替#fffffff
  2. 属性声明顺序 position -> box model盒模型 -> 排版 -> 外观
  3. 不适用@import
  4. class命名

全是用小写，单词之间使用短横线

例如：

 .next-btn
  1. 选择器最多3层
  2. 图片一定要压缩处理
  3. 尽量少用id来定义样式
  4. 引用css的时候一定要声明 rel=”stylesheet”
    例如：
<link rel=”stylesheet”href=”page.css”

3. js规范

  1. 使用四个空格的缩进
  2. 判断相等于不相等采用 === 和!==
  3. 方法之前加单行或者多行注释
  4. 变量命名采用es6命名方式，不要使用var命名
  5. 方法采用箭头函数方式
  6. 类命名首字母需要大写
  7. 字符串统一使用单引号或者反向单引号，标签或者组件属性值采用双引号
  8. 定义数组采用[]，避免使用 new Array，同理Object采用{}
  9. 定义对象包含属性，每个属性换行并且末尾加上逗号，冒号与值之间留一个空格，与属性之间不留空格
state = {
    idCardInfo: {},
    imageUrlFront: '', 
    imageUrlBack: '',
    loadingFront: false,
    loadingBack: false,
    loadingVideo: false,
}
  1. 单行注释
    双斜线后，必须跟注释的内容保留一个空格，
    例如：
// 注释注释
  1. 多行注释
    例如：
        /**
        * 多行注释
        */
  1. if else 前后都要留空格
if (condition) {

  } else {

}
  1. for 循环

for与括号间留一个空格，分号后面留一个空格

for (let i=0; i<10; i++) {

}

  1. 每个变量或者常量定义都要单独定义

  2. 花括号{}里面的代码都要和它的前后保留一个空格
    例如：

 { data, func }
  1. 组件有多个属性时，每个属性换行写
    例如：
loan/bindCard/index.js  420行 /* bad */
  1. 特殊符号前后都留一个空格，类似 +，-，&&等
  2. if 中只有 return 的时候
    /* bad /
    if(str.length>19){
    return;
    }
    /     good */
    if (str.length > 19) return;
  3. 定义function的时候，括号与花括号间留一个空格
  4. 在react中，无状态组件采用function定义组件

HTML规范

  1. 嵌套的节点给四格空格的缩进
  2. 属性上采用双引号，不要使用单引号
  3. 减少标签数量，尽量避免多余的父节点
  4. html 属性保证易读性属性

class
id
name
data
src, type, href, value, max-length, min-length等
placeholder, title, alt
required, readonly, disabled

  1. img标签添加alt属性
  2. 文档类型声明统一用 <!DOCTYPE html>，编码统一使用utf-8，<meta charset="utf-8">
  3. 标签必须合法且闭合、嵌套正确，标签名需要小写
  4. 标签需要符合语义化
上一篇 下一篇

猜你喜欢

热点阅读