对于前端的话,有传统的三大件: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中的编码规范:
- 使用两个空格进行缩进
- 除需要转义的情况外,字符串统一使用单引号
- 不要定义未使用的变量
- 关键字后面加空格
- 函数声明时括号与函数名间加空格
- 始终使用
===
替代==
- 逗号后面加空格
- 不允许有连续多行空行
- 每个 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