前端代码规范

前端代码规范

一、文件/资源命名

通用规则

在 web 项目中，所有的文件名应该都遵循同一命名约定，使用语义化的文件命名，文件名要能“望文生义”，尽量避免使用拼音；
文件名只使用字母 a-z，数字 0-9，连字符 -，下划线 _ 和句点 .；
文件命名以字母开头而不是数字，而以特殊字符开头命名的文件，一般都有特殊的含义与用处；
文件名中字母全部采用小写，多个单词用下划线分隔（识别效率较驼峰体高）；
如需缩写单词，则应使用约定俗成的缩写形式，如 btn、nav、num、img 等，不能自造单词，以免引起歧义。

/* Not good */
xinzengyonghu.jsp
8926376.png
CITYNAMES.json
1001-scripts.js
MyHome.php
npld.css
/* Good */
my_file_name.html
man-made_list.html  // man-made 是一个连字符单词

目录命名

参照文件命名通用规则。
要合理将文件分类到不同目录，避免一个目录下存放大量的文件。

HTML文件命名

参照文件命名通用规则。

CSS, SCSS 文件命名

参照文件命名通用规则。
以下划线 _ 开头的 SCSS 文件不会被编译成一个 CSS 文件。
压缩版本的 CSS 文件，文件名后面需加上 .min 后缀。

basic_layout.css
_mixin.scss
common.min.css

JavaScript 文件命名

参照文件命名通用规则。
1. 图标类图片，需在文件名前面加上 ico_ 前缀。
2. 背景类图片，需在文件名前面加上 bg_ 前缀。
3. 雪碧图图片，需在文件名后面加上 _sprite 后缀。
4. Retina 图片，需在文件名后面加上 _1x 或 _2x 后缀来标记原图和 2 倍图。

JavaScript语句命名

1. 避免单字母命名。命名应具备描述性。

// bad
function q() {
   
  // ...stuff...
}

// good
function query() {
   
  // ..stuff..
}

2.使用lowerCamelCase风格命名对象、函数和实例。

// bad
const OBJEcttsssss = {};
const this_is_my_object = {};