前端之代码规范篇

| 前端 | 规范 | 1.3k | 2 分钟

代码千万行,安全第一行;前端不规范,同事两行泪。

规范的代码能够减少人们的认知成本,提高代码的可读性和可维护性。代码规范没有绝对的标准,不同语言之间的规范可能存在差异,不同人群也会喜欢不同的规范,但是团队之中应该遵循同一种规范。

尚未完成

HTML

头部申明

HTML文件必须加上 DOCTYPE 声明

<!DOCTYPE html>

字符编码

使用大写的UTF-8

<meta charset="UTF-8">

主体结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>HTML5标准模版</title>
</head>
<body>
  ...内容
</body>
</html>

资源引入

  • 省略css和js的类型声明
  • 使用协议自适应
  • 先引入css,再引入Javascript
  • 资源全部进行压缩,尤其是图片

DOM结构语义化

  • dom的结构必须语义化,避免层次不清晰,同时保持最小复杂度
  • 正确的使用不同种类的html标签

标签

  • 标签正确闭合
  • 空标签使用闭合 <br/> 而不使用 <br>
  • 属性名全部小写
  • 属性值使用双引号
  • 使用kebab-case命名规则分割单词
  • 布尔变量类型为true时简写属性

Title

  • 页面需要设置正确的title属性
  • 图片需要添加title和alt属性
  • 超链接需要添加title属性
  • 按钮等可点击元素都加上title说明

选取器

  • 避免使用id
  • 类名定义采用BEM规范
  • id、类名采用kebab-case命名规则
  • 避免样式污染全局
  • 维护全局变量
  • 合理使用样式继承

Javascript

  • 统一使用两个空格进行代码缩进
  • 语句结束时不使用分号
  • 值不变时(引用不变)使用const声明变量
  • 值可变时使用let声明变量
  • 变量名使用驼峰命名camelCase
  • 常量名全部使用大写,以下划线_分割单词
  • 类名、构造函数使用大驼峰命名PascalCase
  • ifelse函数体内只有一行时不要省略{}括号
  • 当需要使用对象的多个属性时,使用解构赋值
  • 箭头函数只有一个参数时省略参数括号
  • 箭头函数函数体只有一个语句时省略{}括号
  • 属性名和变量名一致时使用简写
  • 字符串统一使用单引号包裹''
  • 字符串拼接时使用模板字符串
  • 使用函数声明,避免使用函数表达式
  • 函数内部不能修改参数的值
  • switch不能省略default语句
  • 关键字后存在语句时保持一个空格
  • ifelse及早返回,使得逻辑分支扁平一些
  • 当赋值为空时使用null代替undefined
  • 保持适当的注释

CSS

  • 值为0的属性值不添加单位
  • 值为小数点的属性值省略0
  • 禁止使用内联样式
  • 谨慎使用!important

文件

  • 文件夹统一使用小写字母和横杠-拼接

Vue

  • 组件文件名采用大驼峰命名
  • 每个组件都要有唯一的Name
  • Vue的生命函数按照固定的顺序书写
  • 单个组件的代码不得超过300行
  • vuex禁止在mutations之外修改state的值
  • 不得修改传入的props的值