Web前端代码规范

-01-

文件/资源命名

通用规则

在 web 项目中，所有的文件名应该都遵循同一命名约定，使用语义化的文件命名，文件名要能“望文生义”，尽量避免使用拼音；

文件名只使用字母 a-z，数字 0-9，连字符 -，下划线 _ 和句点 .；

文件命名以字母开头而不是数字，而以特殊字符开头命名的文件，一般都有特殊的含义与用处；

文件名中字母全部采用小写，多个单词用下划线分隔（识别效率较驼峰体高）；

如需缩写单词，则应使用约定俗成的缩写形式，如 btn、nav、num、img 等，不能自造单词，以免引起歧义。

目录命名

参照文件命名通用规则。

要合理将文件分类到不同目录，避免一个目录下存放大量的文件。

HTML文件命名

参照文件命名通用规则。

CSS, SCSS 文件命名

参照文件命名通用规则。

以下划线 _ 开头的 SCSS 文件不会被编译成一个 CSS 文件。

压缩版本的 CSS 文件，文件名后面需加上 .min 后缀。

JavaScript 文件命名

参照文件命名通用规则。

图标类图片，需在文件名前面加上 ico_ 前缀。

背景类图片，需在文件名前面加上 bg_ 前缀。

雪碧图图片，需在文件名后面加上 _sprite 后缀。

Retina 图片，需在文件名后面加上 _1x 或 _2x 后缀来标记原图和 2 倍图。

JavaScript 语句命名

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

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

3.使用UpperCamelCase风格命名构造函数、类、对象的属性。

4.使用下划线 _ 开头命名私有属性。

5.使用同义词替换需要使用的保留字。别使用保留字作为键值。否则在 IE8 不会运行。

-02-

代码格式

1.条件表达式例如 if 语句通过抽象方法 ToBoolean 强制计算它们的表达式并且总是遵守下面的规则：

• 对象 被计算为 true

• Undefined 被计算为 false

• Null 被计算为 false

• 布尔值 被计算为 布尔的值

• 数字 如果是 +0、-0、或 NaN 被计算为 false, 否则为 true

• 字符串 如果是空字符串 '' 被计算为 false，否则为 true

2.if else条件判断优先使用三目运算符，当判断条件过多时，推荐使用contains过滤器（过滤器针对Angular应用使用）。

3.在花括号前放一个空格。

4.在控制语句（if、while 等）的小括号前放一个空格。在函数调用及声明中，不在函数的参数列表前加空格。

5.使用空格把运算符隔开。

6.在块末和新语句前插入空行。

7.行首逗号：不需要。

8.对数字使用 parseInt 转换，并带上类型转换的基数。

9.禁止用new来实例化基本数据类型基本（数据类型包括：字符串、数字、布尔、数组、对象、Null、Undefined）。

-03-

注释规范

1.使用 /** …/ 作为多行注释。包含描述、指定所有参数和返回值的类型和值。（在方法前输入/*回车即自动生成注释模板）

2.使用 // 作为单行注释。在评论对象上面另起一行使用单行注释。

3.用// FIXME:来标示修复bug

用// TODO:来标示要做的