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:来标示要做的

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20180122G0ZNXM00?refer=cp_1026

扫码关注云+社区