前端代码规范——个人学习

548 阅读4分钟

对于前端的话,有传统的三大件:HTML, CSS,JavaScript。所以前端的代码规范势必包含这三者的内容。

对于文件资源:

前端文件资源的命名随没有什么强制的规定,但好的命名习惯能见名知意,方便项目的管理和后期的查阅维护。其中有一些社区推荐的规范(开发建议):

  • 以减号(-)用来分隔以单词为单位的文件名
  • 文件命名以字母开头而不是数字
  • 以特殊字符开头命名的文件,一般都有特殊的含义与用处(比如.gitignore,.vscode等)
  • 文件名字母名称必须全为小写
  • 对文件增加前后缀或特定的扩展名,使用点分隔符来区分这些在文件名中带有清晰意义的元数据
//不推荐
MyScript.js  //有大写字母                             my-script.js
myCamelCaseName.css  //有大写字母                     my-camel-case-name.css
i_love_underscores.html  //单词间建议用 - 连接         i-love-underscores.html
1001-scripts.js //以数字开头                          thousand-and-one-scripts.js
my-file-min.css  //扩展名用点(.)分隔                  my-file.min.css
  • 在html,css和JavaScript中引入其他资源时,不要指定引入资源所带的具体协议。
//bad
<script src="http://cdn.com/foundation.min.js"></script>

.example {
  background: url(http://static.example.com/images/bg.jpg);
}

//good
<script src="//cdn.com/foundation.min.js"></script>

.example {
  background: url(//static.example.com/images/bg.jpg);
}
  • 文本缩进采用两个空格作为一个缩进(html,css与JavaScript都一样)
  • 注释建议不写代码都干了些什么,而写代码为什么要这么写,JSDoc或 YUIDoc用来写 JavaScript 注释
  • 多配合js代码检查工具开发项目

HTML部分代码规范:

  • 一定声明HTML的文件的文档类型,<!DOCTYPE html>以避免在渲染css或执行js时出现意料之外的情况
  • 不要将无内容元素的标签闭合,如使用<br>而非<br/>
  • 多使用 W3C HTML validator 工具来验证 HTML 代码的标准规范
  • 开发时,为了可读性不省略 HTML 标签
  • js脚本资源会阻塞页面结构的解析和渲染,放在head标签中的话,会造成页面的延迟解析和渲染,不利于用户体验,所以可以将js脚本作为body的最后一组子元素引入,也可以考虑使用script标签的defer属性和async属性
  • 使用合适的标签做合适的事,增加页面的语义化,多用html5新增的语义化标签
  • 图片的元素的话,尽量加上alt属性,视频和音频文件我们可以为其加上说明文字或字幕
  • 采用结构,样式和行为分离的方式写代码
  • 尽量将css与js作为一个文件引入html
  • 不要引入一些特定的 HTML 结构来解决css样式问题
  • 省略样式表与脚本上的 type 属性
  • 使用双引号("") 而不是单引号( ' )

JavaScript部分的代码规范:

对于JavaScript的编码规范的话,业界有两个知名的规范:JavaScript Standard Style 和 Airbnb JavaScript Style Guide,而我个人参考最多的就是JavaScript Standard Style ,在用vue脚手架生成的项目中,我一般都选择 JavaScript Standard Style 规范来对JavaScript代码进行规范。因为它相对于Airbnb JavaScript Style Guide,编写代码的规范相对要少一些。减少自己在开发中过多的纠结于代码的编写规范,而注重代码的任务逻辑。

  • 多使用IIFE防止全局命名空间被污染
  • 在可以考虑在函数作用域中开启严格模式,而不建议在全局直接开启严格模式
  • 声明变量的优先顺序:const > let > var
  • 变量的声明在使用之前完成
  • 多采用 === 而少用 ==
  • 尽量使用上分号
  • 切勿在语句块内声明函数,在 ECMAScript 5 的严格模式下,这是不合法的。函数声明应该在定义域的顶层。但在语句块内可将函数申明转化为函数表达式赋值给变量。

在这里,说一些JavaScript Standard Style中的编码规范:

JavaScript Standard Style官方文档

  • 使用两个空格进行缩进
  • 除需要转义的情况外,字符串统一使用单引号
  • 不要定义未使用的变量
  • 关键字后面加空格
  • 函数声明时括号与函数名间加空格
  • 始终使用 === 替代 ==
  • 逗号后面加空格
  • 不允许有连续多行空行
  • 每个 var 关键字单独声明一个变量
  • 对于变量和函数名统一使用驼峰命名法
  • 不允许有多余的行末逗号
  • 文件末尾留一空行
  • 键值对当中冒号与值之间要留空白
  • 构造函数要以大写字母开头
  • 不要使用分号
  • 不要使用 (, [, or 等作为一行的开始。在没有分号的情况下代码压缩后会导致报错
  • ...

standard 代码规范第三方包在项目中的使用:

//安装到项目中
npm install standard --save-dev

//命令行指令
npx standard   //检查项目内所有的 JavaScript 文件
npx standard "src/util/**/*.js" "test/**/*.js"    //检查指定的js文件

在package.json文件script字段配置脚本命令:

"scripts": {
	"test": "standard && node my-tests.js"
}

//使用
npm test