最佳原则
坚持制定好的代码规范。
无论团队人数多少，代码应该同出一门。
以下为精简且必须坚持的代码规范。精简版从综合目前小鲸的代码习惯在腾讯团队的规范文档中进行了提取和修改。更多详细内容请参看
Code Guide by @AlloyTeam。
命名规范
文件命名
全部采用驼峰方式。
例：myProjectName.js myProjectName.css
git分支命名
新需求开发以 feature/{关键词}_{拟发布日期}开头
bug修复以 hotfix/{关键词}_{拟发布日期}开头
关键词全部为小写，以下划线分割
日期格式为20200306
例：feature/update_coupons_20200306 hotfix/image_change_type_20200306
HTML
语法
- 缩进使用soft tab（4个空格）；
- 在属性上，使用双引号，不要使用单引号；
- 不要在自动闭合标签结尾处使用斜线（HTML5 规范 指出他们是可选的）；
<!DOCTYPE html>
<html>
<head>
<title>Page title</title>
</head>
<body>
<img src="images/company_logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>
lang属性
根据HTML5规范：
应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。
但sitepoint只是给出了语言的大类，例如中文只给出了zh，但是没有区分香港，台湾，大陆。而微软给出了一份更加详细的语言列表，其中细分了zh-cn, zh-hk, zh-tw。
<!DOCTYPE html>
<html lang="en-us">
...
</html>
字符编码
通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
...
</html>
IE兼容模式
用 <meta> 标签可以指定页面应该用什么版本的IE来渲染；
如果你想要了解更多，请点击这里；
不同doctype在不同浏览器下会触发不同的渲染模式（这篇文章总结的很到位）。
css&scss
主要注意命名，其他格式问题，按照编辑器格式化，就可以。
缩进
使用soft tab（4个空格）。
命名
- 类名使用小写字母，以中划线分隔
- id采用驼峰式命名
- scss中的变量、函数、混合、placeholder采用驼峰式命名
/* class */
.element-content {
...
}
/* id */
#myDialog {
...
}
/* 变量 */
$colorBlack: #000;
/* 函数 */
@function pxToRem($px) {
...
}
/* 混合 */
@mixin centerBlock {
...
}
/* placeholder */
%myDialog {
...
}
颜色
颜色16进制用小写字母；
颜色16进制尽量用简写。
/* not good */
.element {
color: #ABCDEF;
background-color: #001122;
}
/* good */
.element {
color: #abcdef;
background-color: #012;
}
杂项
- 不允许有空的规则；
/* not good */
.element {
}
- 元素选择器用小写字母；
/* not good */
LI {
...
}
- 去掉小数点前面的0；
/* not good */
.element {
color: rgba(0, 0, 0, 0.5);
}
/* good */
.element {
color: rgba(0, 0, 0, .5);
}
- 属性值'0'后面不要加单位；
/* not good */
.element {
width: 0px;
}
/* good */
.element {
width: 0;
}
- 不要在同个规则里出现重复的属性，如果重复的属性是连续的则没关系；
/* not good */
.element {
color: rgb(0, 0, 0);
width: 50px;
color: rgba(0, 0, 0, .5);
}
/* good */
.element {
color: rgb(0, 0, 0);
color: rgba(0, 0, 0, .5);
}
-
不要在一个文件里出现两个相同的规则；
-
用 border: 0; 代替 border: none;；
-
选择器不要超过4层（在scss中如果超过4层应该考虑用嵌套的方式来写）；
-
发布的代码中不要有 @import；
-
尽量少用'*'选择器。
JavaScript
变量命名
- 标准变量采用驼峰式命名（除了对象的属性外，主要是考虑到cgi返回的数据）
- 'ID'在变量名中全大写
- 'URL'在变量名中全大写
- 'Android'在变量名中大写第一个字母
- 'iOS'在变量名中小写第一个，大写后两个字母
- 常量全大写，用下划线连接
- 构造函数，大写第一个字母
- jquery对象必须以'$'开头命名
var thisIsMyName;
var goodID;
var reportURL;
var AndroidVersion;
var iOSVersion;
var MAX_COUNT = 10;
function Person(name) {
this.name = name;
}
// not good
var body = $('body');
// good
var $body = $('body');
变量声明
一个函数作用域中所有的变量声明尽量提到函数首部，用一个var声明，不允许出现两个连续的var声明。
function doSomethingWithItems(items) {
// use one var
var value = 10,
result = value + 10,
i,
len;
for (i = 0, len = items.length; i < len; i++) {
result += 10;
}
}
缩进
使用soft tab（4个空格）。
分号
以下几种情况后需加分号：
- 变量声明
- 表达式
- return
- throw
- break
- continue
- do-while
/* var declaration */
var x = 1;
/* expression statement */
x++;
/* do-while */
do {
x++;
} while (x < 10);
空格
书写时多注意，尽量保持代码的美观整洁，不做过分要求。
空行
以下几种情况需要空行：
- 变量声明后（当变量声明在代码块的最后一行时，则无需空行）
- 注释前（当注释在代码块的第一行时，则无需空行）
- 代码块后（在函数调用、数组、对象中则无需空行）
- 文件最后保留一个空行
// need blank line after variable declaration
var x = 1;
// not need blank line when variable declaration is last expression in the current block
if (x >= 1) {
var y = x + 1;
}
var a = 2;
// need blank line before line comment
a++;
function b() {
// not need blank line when comment is first line of block
return a;
}
// need blank line after blocks
for (var i = 0; i < 2; i++) {
if (true) {
return false;
}
continue;
}
var obj = {
foo: function() {
return 1;
},
bar: function() {
return 2;
}
};
换行
换行的地方，行末必须有','或者运算符；
// not good
var a = {
b: 1
, c: 2
};
x = y
? 1 : 2;
// good
var a = {
b: 1,
c: 2
};
x = y ? 1 : 2;
x = y ?
1 : 2;
以下几种情况不需要换行：
- 下列关键字后：
else, catch, finally - 代码块'{'前
// no need line break with 'else', 'catch', 'finally'
if (condition) {
...
} else {
...
}
try {
...
} catch (e) {
...
} finally {
...
}
以下几种情况需要换行：
- 代码块'{'后和'}'前
- 变量赋值后
数组、对象
对象属性名不需要加引号；
对象以缩进的形式书写，不要写在一行；
数组、对象最后不要有逗号。
// not good
var a = {
'b': 1
};
var a = {b: 1};
var a = {
b: 1,
c: 2,
};
// good
var a = {
b: 1,
c: 2
};
单行注释（==重点==）
双斜线后，必须跟一个空格；
缩进与下一行代码保持一致；
可位于一个代码行的末尾，与代码间隔一个空格。
if (condition) {
// if you made it here, then all security checks passed
allowed();
}
var zhangsan = 'zhangsan'; // one space after code
多行注释（==重点==）
最少三行, '*'后跟一个空格，具体参照右边的写法；
建议在以下情况下使用：
- 难于理解的代码段
- 可能存在错误的代码段
- 浏览器特殊的HACK代码
- 业务逻辑强相关的代码
文档注释（==重点==）
各类标签@param, @method等请参考usejsdoc和JSDoc Guide；
建议在以下情况下使用：
- 所有常量
- 所有函数
- 所有类
/**
* @desc 一个带参数的函数
* @builder lixuepeng
* @update lixuepeng [20200306]
* @param {string} a - 参数a
* @param {number} b=1 - 参数b默认值为1
* @param {string} c=1 - 参数c有两种支持的取值</br>1—表示x</br>2—表示xx
* @param {object} d - 参数d为一个对象
* @param {string} d.e - 参数d的e属性
* @param {string} d.f - 参数d的f属性
* @param {object[]} g - 参数g为一个对象数组
* @param {string} g.h - 参数g数组中一项的h属性
* @param {string} g.i - 参数g数组中一项的i属性
* @param {string} [j] - 参数j是一个可选参数
*/
function foo(a, b, c, d, g, j) {
...
}
引号
最外层统一使用单引号。
// not good
var x = "test";
// good
var y = 'foo',
z = '<div id="test"></div>';
括号
下列关键字后必须有大括号（即使代码块的内容只有一行）：if, else, for, while, do, switch, try, catch, finally, with。
// not good
if (condition)
doSomething();
// good
if (condition) {
doSomething();
}
jshint
- 用'===', '!=='代替'==', '!='；
- for-in里一定要有hasOwnProperty的判断；
// good
for (key in obj) {
if (obj.hasOwnProperty(key)) {
// be sure that obj[key] belongs to the object and was not inherited
console.log(obj[key]);
}
}
- 不要在内置对象的原型上添加方法，如Array, Date；
// not good
Array.prototype.count = function(value) {
return 4;
};
- 不要在内层作用域的代码里声明了变量，之后却访问到了外层作用域的同名变量；
// not good
var x = 1;
function test() {
if (true) {
var x = 0;
}
x += 1;
}
- 不要在一句代码中单单使用构造函数，记得将其赋值给某个变量；
// not good
new Person();
// good
var person = new Person();
- 不要在一些不需要的地方加括号，例：
delete(a.b)； - 不要声明了变量却不使用；
- 不要在应该做比较的地方做赋值；
// not good
if (a = 10) {
a++;
}
- debugger不要出现在提交的代码里;
- 数组中不要存在空元素；
- 不要在循环内部声明函数；
// not good
var nums = [];
for (var i = 0; i < 10; i++) {
(function(i) {
nums[i] = function(j) {
return i + j;
};
}(i));
}
- 不要像这样使用构造函数，例：
new function () { ... }, new Object；
网友评论