前端代码规范

一、一般规范

1、命名规范

• 以英文命名，避免出现拼音命名。
• 文件命名全小写，如需要分割以-连接。如：my-filter.js
• css 选择器命名分割以-连接。如：.main-box-header

2、代码缩进

• 以TAB为一次缩进。

2、代码注释

• 关键步骤必须要写注释
• 注释内容：实现了什么功能，为什么这样写，优点是什么

二、HTML规范

• 结构(HTML)、表现(CSS)、行为(JS)代码分离.
• HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签

正确用法：

<header></header>
<footer></footer>

三、JAVASCRIPT规范

• 变量名命名：驼峰命名法
• 总是使用 === 精确的比较操作符，避免在判断的过程中，由 JavaScript 的强制类型转换所造成的困扰。
• 尽量使用let和const来声明变量，使用var可能会造成变量污染

四、CSS规范

• 每个选择器及属性独占一行

不推荐：

button{
  width:100px;height:50px;color:#fff;background:#00a0e9;
}

推荐：

button{
  width:100px;
  height:50px;
  color:#fff;
  background:#00a0e9;
}

• 省略0后面的单位

不推荐：

div{
  padding-bottom: 0px;
  margin: 0em;
}

推荐：

div{
  padding-bottom: 0;
  margin: 0;
}

五、项目规范

• 组件规范：组件以英文来命名
• 代码规范：实现什么功能，方法名等可以根据汉语意思的英文单词来命名
• 目录规范：将功能一类的放在同一个文件夹下，便于程序员后期的维护
• 注释说明：便于不太懂得人员了解这个功能是怎样实现的，实现的什么样的功能