精简版严格代码规范

最佳原则

坚持制定好的代码规范。

无论团队人数多少，代码应该同出一门。

以下为精简且必须坚持的代码规范。精简版从综合目前小鲸的代码习惯在腾讯团队的规范文档中进行了提取和修改。更多详细内容请参看
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 规范指出他们是可选的）；



    
        Page title
    
    
        

        Hello, world!

lang属性

根据HTML5规范：

应在html标签上加上lang属性。这会给语音工具和翻译工具帮助，告诉它们应当怎么去发音和翻译。

但sitepoint只是给出了语言的大类，例如中文只给出了zh，但是没有区分香港，台湾，大陆。而微软给出了一份更加详细的语言列表，其中细分了zh-cn, zh-hk, zh-tw。

...

字符编码

通过声明一个明确的字符编码，让浏览器轻松、快速的确定适合网页内容的渲染方式，通常指定为'UTF-8'。

...

IE兼容模式

用标签可以指定页面应该用什么版本的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；