前端开发编码规范-JavaScript

缩进

使用soft tab(4个空格)。

var x = 1,

   y = 1;if (x < y) {

   x += 10;

} else {

   x += 1;

}

分号

以下几种情况后需加分号:

[if !supportLists] [endif]变量声明

[if !supportLists] [endif]表达式

[if !supportLists] [endif]return

[if !supportLists] [endif]throw

[if !supportLists] [endif]break

[if !supportLists] [endif]continue

[if !supportLists] [endif]do-while

/* var declaration */var x = 1;/* expression statement */x++;/* do-while */do {

   x++;} while (x < 10);

空格

以下几种情况不需要空格:

[if !supportLists] [endif]对象的属性名后

[if !supportLists] [endif]前缀一元运算符后

[if !supportLists] [endif]后缀一元运算符前

[if !supportLists] [endif]函数调用括号前

[if !supportLists] [endif]无论是函数声明还是函数表达式,'('前不要空格

[if !supportLists] [endif]数组的'['后和']'前

[if !supportLists] [endif]对象的'{'后和'}'前

[if !supportLists] [endif]运算符'('后和')'前

以下几种情况需要空格:

[if !supportLists] [endif]二元运算符前后

[if !supportLists] [endif]三元运算符'?:'前后

[if !supportLists] [endif]代码块'{'前

[if !supportLists] [endif]下列关键字前:else, while, catch, finally

[if !supportLists] [endif]下列关键字后:if, else, for, while, do, switch, case, try, catch, finally, with, return, typeof

[if !supportLists] [endif]单行注释'//'后(若单行注释和代码同行,则'//'前也需要),多行注释'*'后

[if !supportLists] [endif]对象的属性值前

[if !supportLists] [endif]for循环,分号后留有一个空格,前置条件如果有多个,逗号后留一个空格

[if !supportLists] [endif]无论是函数声明还是函数表达式,'{'前一定要有空格

[if !supportLists] [endif]函数的参数之间

// not goodvar a = {

   b :1};// goodvar a = {

   b: 1};// not good++ x;

y ++;

z = x?1:2;// good++x;

y++;

z = x ? 1 : 2;// not goodvar a = [ 1, 2 ];// goodvar a = [1, 2];// not goodvar a = ( 1+2 )*3;// goodvar a = (1 + 2) * 3;// no space before '(', one space before '{', one space between function parametersvar doSomething = function(a, b, c) {

   // do something};// no space before '('doSomething(item);// not goodfor(i=0;i<6;i++){

   x++;

}// goodfor (i = 0; i < 6; i++) {

   x++;

}

空行

以下几种情况需要空行:

[if !supportLists] [endif]变量声明后(当变量声明在代码块的最后一行时,则无需空行)

[if !supportLists] [endif]注释前(当注释在代码块的第一行时,则无需空行)

[if !supportLists] [endif]代码块后(在函数调用、数组、对象中则无需空行)

[if !supportLists] [endif]文件最后保留一个空行

// need blank line after variable declarationvar x = 1;// not need blank line when variable declaration is last expression in the current blockif (x >= 1) {

   var y = x + 1;

}var a = 2;// need blank line before line commenta++;function b() {

   // not need blank line when comment is first line of block    return a;

}// need blank line after blocksfor (var i = 0; i < 2; i++) {

   if (true) {

       return false;

   }

   continue;

}var obj = {

   foo: function() {

       return 1;

   },

   bar: function() {

       return 2;

   }

};// not need blank line when in argument list, array, objectfunc(

   2,

   function() {

       a++;

   },

   3);var foo = [

   2,

   function() {

       a++;

   },

   3];var foo = {

   a: 2,

   b: function() {

       a++;

   },

   c: 3};

换行

换行的地方,行末必须有','或者运算符; 以下几种情况不需要换行:

[if !supportLists] [endif]下列关键字后:else, catch, finally

[if !supportLists] [endif]代码块'{'前

以下几种情况需要换行:

[if !supportLists] [endif]代码块'{'后和'}'前

[if !supportLists] [endif]变量赋值后

// not goodvar a = {

   b: 1    , c: 2};

x = y

   ? 1 : 2;// goodvar a = {

   b: 1,

   c: 2};

x = y ? 1 : 2;

x = y ?

   1 : 2;// no need line break with 'else', 'catch', 'finally'if (condition) {

   ...

} else {

   ...

}try {

   ...

} catch (e) {

   ...

} finally {

   ...

}// not goodfunction test()

{

   ...

}// goodfunction test() {

   ...

}// not goodvar a, foo = 7, b,

   c, bar = 8;// goodvar a,

   foo = 7,

   b, c, bar = 8;

单行注释

双斜线后,必须跟一个空格;缩进与下一行代码保持一致;可位于一个代码行的末尾,与代码间隔一个空格。

if (condition) {

   // if you made it here, then all security checks passed    allowed();

}var zhangsan = 'zhangsan'; // one space after code

多行注释

最少三行, '*'后跟一个空格,具体参照右边的写法; 建议在以下情况下使用:

[if !supportLists] [endif]难于理解的代码段

[if !supportLists] [endif]可能存在错误的代码段

[if !supportLists] [endif]浏览器特殊的HACK代码

[if !supportLists] [endif]业务逻辑强相关的代码

/*

* one space after '*'

*/var x = 1;

文档注释

各类标签@param, @method等请参考usejsdoc和JSDoc Guide;

建议在以下情况下使用:

[if !supportLists] [endif]所有常量

[if !supportLists] [endif]所有函数

[if !supportLists] [endif]所有类

/**

* @func

* @desc 一个带参数的函数

* @param {string} a - 参数a

* @param {number} b=1 - 参数b默认值为1

* @param {string} c=1 - 参数c有两种支持的取值
1—表示x
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 goodvar x = "test";// goodvar y = 'foo',

   z = '

';

变量命名

[if !supportLists] [endif]标准变量采用驼峰式命名(除了对象的属性外,主要是考虑到cgi返回的数据)

[if !supportLists] [endif]'ID'在变量名中全大写

[if !supportLists] [endif]'URL'在变量名中全大写

[if !supportLists] [endif]'Android'在变量名中大写第一个字母

[if !supportLists] [endif]'iOS'在变量名中小写第一个,大写后两个字母

[if !supportLists] [endif]常量全大写,用下划线连接

[if !supportLists] [endif]构造函数,大写第一个字母

[if !supportLists] [endif]jquery对象必须以'$'开头命名

var thisIsMyName;var goodID;var reportURL;var AndroidVersion;var iOSVersion;var MAX_COUNT = 10;function Person(name) {

   this.name = name;

}// not goodvar body = $('body');// goodvar $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;

   }

}

函数

无论是函数声明还是函数表达式,'('前不要空格,但'{'前一定要有空格;

函数调用括号前不需要空格;

立即执行函数外必须包一层括号;

不要给inline function命名;

参数之间用', '分隔,注意逗号后有一个空格。

// no space before '(', but one space before'{'var doSomething = function(item) {

   // do something};function doSomething(item) {

   // do something}// not gooddoSomething (item);// gooddoSomething(item);// requires parentheses around immediately invoked function expressions(function() {

   return 1;

})();// not good[1, 2].forEach(function x() {

   ...

});// good[1, 2].forEach(function() {

   ...

});// not goodvar a = [1, 2, function a() {

   ...

}];// goodvar a = [1, 2, function() {

   ...

}];// use ', ' between function parametersvar doSomething = function(a, b, c) {

   // do something};

数组、对象

对象属性名不需要加引号;

对象以缩进的形式书写,不要写在一行;

数组、对象最后不要有逗号。

// not goodvar a = {

   'b': 1};var a = {b: 1};var a = {

   b: 1,

   c: 2,

};// goodvar a = {

   b: 1,

   c: 2};

括号

下列关键字后必须有大括号(即使代码块的内容只有一行):if, else, for, while, do, switch, try, catch, finally, with。

// not goodif (condition)

   doSomething();// goodif (condition) {

   doSomething();

}

null

适用场景:

[if !supportLists] [endif]初始化一个将来可能被赋值为对象的变量

[if !supportLists] [endif]与已经初始化的变量做比较

[if !supportLists] [endif]作为一个参数为对象的函数的调用传参

[if !supportLists] [endif]作为一个返回对象的函数的返回值

不适用场景:

[if !supportLists] [endif]不要用null来判断函数调用时有无传参

[if !supportLists] [endif]不要与未初始化的变量做比较


undefined

永远不要直接使用undefined进行变量判断;

使用typeof和字符串'undefined'对变量进行判断。

你可能感兴趣的:(前端开发编码规范-JavaScript)