一、全局命名空間污染

總是將代碼包裹在一個(gè)立即的函數(shù)表達(dá)式里面，形成一個(gè)獨(dú)立的模塊。

不推薦

var x = 10,
 y = 100;
console.log(window.x + ' ' + window.y);

推薦

;(function(window){
 'use strict';
 var x = 10,
  y = 100;
 console.log(window.x + ' ' + window.y);
}(window));

二、立即執(zhí)行函數(shù)

在立即執(zhí)行函數(shù)里面，如果有用到全局變量應(yīng)該通過(guò)變量傳遞的方式，讓立即執(zhí)行函數(shù)的函數(shù)體在調(diào)用時(shí)，能以局部變量的形式調(diào)用，在一定程度上提升程序性能。

并且應(yīng)該在立即執(zhí)行函數(shù)的形參里加上undefined，在最后一個(gè)位置，這是因?yàn)镋S3里undefined是可以讀寫(xiě)的，如果在全局位置更改undefined的值，你的代碼可能得不到逾期的結(jié)果。

另外推薦在立即執(zhí)行函數(shù)開(kāi)始跟結(jié)尾都添加上分號(hào)，避免在合并時(shí)因?yàn)閯e人的代碼不規(guī)范而影響到我們自己的代碼

不推薦

(function(){
 'use strict';
 var x = 10,
  y = 100,
  c,
  elem=$('body');
 console.log(window.x + ' ' + window.y);
 $(document).on('click',function(){

 });
 if(typeof c==='undefined'){
  //你的代碼
 }
}());

推薦

;(function($,window,document,undefined){
 'use strict';
 var x = 10,
  y = 100,
  c,
  elem=$('body');
 console.log(window.x + ' ' + window.y);
 $(document).on('click',function(){

 });
 if(typeof c==='undefined'){
  //你的代碼
 }
}(jQuery,window,document));

三、嚴(yán)格模式

ECMAScript 5 嚴(yán)格模式可在整個(gè)腳本或獨(dú)個(gè)方法內(nèi)被激活。它對(duì)應(yīng)不同的 javascript 語(yǔ)境會(huì)做更加嚴(yán)格的錯(cuò)誤檢查。嚴(yán)格模式也確保了 javascript 代碼更加的健壯，運(yùn)行的也更加快速。

嚴(yán)格模式會(huì)阻止使用在未來(lái)很可能被引入的預(yù)留關(guān)鍵字。

你應(yīng)該在你的腳本中啟用嚴(yán)格模式，最好是在獨(dú)立的 立即執(zhí)行函數(shù) 中應(yīng)用它。避免在你的腳本第一行使用它而導(dǎo)致你的所有腳本都啟動(dòng)了嚴(yán)格模式，這有可能會(huì)引發(fā)一些第三方類(lèi)庫(kù)的問(wèn)題。

不推薦

'use strict';
(function(){

}());

推薦

(function(){
 'use strict';
}());

四、變量聲明

對(duì)所有的變量聲明，我們都應(yīng)該指定var，如果沒(méi)有指定var，在嚴(yán)格模式下會(huì)報(bào)錯(cuò)，并且同一個(gè)作用域內(nèi)的變量應(yīng)該盡量采用一個(gè)var去聲明，多個(gè)變量用“,”隔開(kāi)。

不推薦

function myFun(){
 x=5;
 y=10;
}

不完全推薦

function myFun(){
 var x=5;
 var y=10;
}

推薦

function myFun(){
 var x=5,
  y=10;
}

五、使用帶類(lèi)型判斷的比較判斷

是使用 === 精確的比較操作符，避免在判斷的過(guò)程中，由 JavaScript 的強(qiáng)制類(lèi)型轉(zhuǎn)換所造成的困擾。

如果你使用 === 操作符，那比較的雙方必須是同一類(lèi)型為前提的條件下才會(huì)有效。

不推薦

(function(w){
 'use strict';

 w.console.log('0' == 0); // true
 w.console.log('' == false); // true
 w.console.log('1' == true); // true
 w.console.log(null == undefined); // true

 var x = {
 valueOf: function() {
  return 'X';
 }
 };

 w.console.log(x == 'X');//true

}(window.console.log));

推薦

(function(w){
 'use strict';

 w.console.log('0' === 0); // false
 w.console.log('' === false); // false
 w.console.log('1' === true); // false
 w.console.log(null === undefined); // false

 var x = {
 valueOf: function() {
  return 'X';
 }
 };

 w.console.log(x === 'X');//false

}(window));

六、變量賦值時(shí)的邏輯操作

邏輯操作符 || 和 && 也可被用來(lái)返回布爾值。如果操作對(duì)象為非布爾對(duì)象，那每個(gè)表達(dá)式將會(huì)被自左向右地做真假判斷?；诖瞬僮鳎罱K總有一個(gè)表達(dá)式被返回回來(lái)。這在變量賦值時(shí)，是可以用來(lái)簡(jiǎn)化你的代碼的。

不推薦

if(!x) {
 if(!y) {
 x = 1;
 } else {
 x = y;
 }
}

推薦

x = x || y || 1;

七、分號(hào)

總是使用分號(hào)，因?yàn)殡[式的代碼嵌套會(huì)引發(fā)難以察覺(jué)的問(wèn)題。當(dāng)然我們更要從根本上來(lái)杜絕這些問(wèn)題[1] 。

以下幾個(gè)示例展示了缺少分號(hào)的危害：

// 1.
MyClass.prototype.myMethod = function() {
 return 42;
} //這里沒(méi)有分號(hào)

(function() {

})();

 //2.
var x = {
 'i': 1,
 'j': 2
} // 這里沒(méi)有分號(hào)
//我知道這樣的代碼你可能永遠(yuǎn)不會(huì)寫(xiě)，但是還是舉一個(gè)例子
[ffVersion, ieVersion][isIE]();

 // 3.
var THINGS_TO_EAT = [apples, oysters, sprayOnCheese] // 這里沒(méi)有分號(hào)

-1 == resultOfOperation() || die();

錯(cuò)誤結(jié)果

     1. JavaScript 錯(cuò)誤 —— 首先返回 42 的那個(gè) function 被第二個(gè)function 當(dāng)中參數(shù)傳入調(diào)用，接著數(shù)字 42 也被“調(diào)用”而導(dǎo)致出錯(cuò)。

     2.八成你會(huì)得到 ‘no such property in undefined' 的錯(cuò)誤提示，因?yàn)樵谡鎸?shí)環(huán)境中的調(diào)用是這個(gè)樣子：xffVersion, ieVersion().

     3.die 總是被調(diào)用。因?yàn)閿?shù)組減 1 的結(jié)果是 NaN，它不等于任何東西（無(wú)論 resultOfOperation 是否返回 NaN）。所以最終的結(jié)果是 die() 執(zhí)行完所獲得值將賦給 THINGS_TO_EAT.

八、語(yǔ)句塊內(nèi)的函數(shù)聲明

切勿在語(yǔ)句塊內(nèi)聲明函數(shù)，在 ECMAScript 5 的嚴(yán)格模式下，這是不合法的。函數(shù)聲明應(yīng)該在作用域的頂層。但在語(yǔ)句塊內(nèi)可將函數(shù)申明轉(zhuǎn)化為函數(shù)表達(dá)式賦值給變量。

不推薦

if (x) {
 function foo() {}
}

推薦

if (x) {
 var foo = function() {};
}

九、不要使用eval函數(shù)

eval() 不但混淆語(yǔ)境還很危險(xiǎn)，總會(huì)有比這更好、更清晰、更安全的另一種方案來(lái)寫(xiě)你的代碼，因此盡量不要使用 eval 函數(shù)。

十、數(shù)組和對(duì)象字面量

1.用數(shù)組和對(duì)象字面量來(lái)代替數(shù)組和對(duì)象構(gòu)造器。數(shù)組構(gòu)造器很容易讓人在它的參數(shù)上犯錯(cuò)。

不推薦

//數(shù)組長(zhǎng)度3
var a1 = new Array(x1, x2, x3);
//數(shù)組長(zhǎng)度2
var a2 = new Array(x1, x2);

//如果x1是一個(gè)自然數(shù)，那么它的長(zhǎng)度將為x1
//如果x1不是一個(gè)自然數(shù)，那么它的長(zhǎng)度將為1
var a3 = new Array(x1);

var a4 = new Array();

正因如此，如果將代碼傳參從兩個(gè)變?yōu)橐粋€(gè)，那數(shù)組很有可能發(fā)生意料不到的長(zhǎng)度變化。為避免此類(lèi)怪異狀況，請(qǐng)總是采用可讀的數(shù)組字面量。

推薦

var a = [x1, x2, x3];
var a2 = [x1, x2];
var a3 = [x1];
var a4 = [];

2.對(duì)象構(gòu)造器不會(huì)有類(lèi)似的問(wèn)題，但是為了可讀性和統(tǒng)一性，我們應(yīng)該使用對(duì)象字面量。

不推薦

var o = new Object();

var o2 = new Object();
o2.a = 0;
o2.b = 1;
o2.c = 2;
o2['strange key'] = 3;

推薦

var o = {};
var o2 = {
 a: 0,
 b: 1,
 c: 2,
 'strange key': 3
};

十一、三元條件判斷（if 的快捷方法）

用三元操作符分配或返回語(yǔ)句。在比較簡(jiǎn)單的情況下使用，避免在復(fù)雜的情況下使用。沒(méi)人愿意用 10 行三元操作符把自己的腦子繞暈。

不推薦

if(x === 10) {
 return 'valid';
} else {
 return 'invalid';
}

推薦

return x === 10 ? 'valid' : 'invalid';

十二、for循環(huán)

使用for循環(huán)過(guò)程中，數(shù)組的長(zhǎng)度，使用一個(gè)變量來(lái)接收，這樣有利于代碼執(zhí)行效率得到提高，而不是每走一次循環(huán)，都得重新計(jì)算數(shù)組長(zhǎng)度

不推薦

for(var i=0;i<arr.length,i++){

}

推薦

for(var i=0,len=arr.length;i<len,i++){

}

十三、重復(fù)的dom操作

重復(fù)的dom操作，使用一個(gè)變量來(lái)進(jìn)行接收很有必要，而不是頻繁的去操作dom樹(shù)，這對(duì)性能與代碼的整潔及易維護(hù)性帶來(lái)不好的影響

不推薦

$('.myDiv').find('.span1').text('1');
$('.myDiv').find('.span2').text('2');
$('.myDiv').find('.span3').text('3');
$('.myDiv').find('.span4').text('4');

推薦

var mydiv=$('.myDiv');
mydiv.find('.span1').text('1');
mydiv.find('.span2').text('2');
mydiv.find('.span3').text('3');
mydiv.find('.span4').text('4');

在jquery .end()可使用的情況下應(yīng)該優(yōu)先使用.end()


推薦

$('.myDiv').find('.span1').text('1')
   .end().find('.span2').text('2');
   .end().find('.span3').text('3');
   .end().find('.span4').text('4');

十四、注釋規(guī)范

在描寫(xiě)注釋時(shí)，推薦格式化且統(tǒng)一的注釋風(fēng)格，在寫(xiě)注釋時(shí)盡量描述寫(xiě)代碼時(shí)的思路，而不是代碼做了什么。

不推薦

//獲取訂單
function getOrderByID(id){
 var order;
 //...
 return order;
}

方法的注釋?xiě)?yīng)該統(tǒng)一用塊級(jí)注釋

推薦

/**
 * 根據(jù)訂單id獲取訂單詳細(xì)數(shù)據(jù)
 * @param {[number]} id [訂單ID]
 * @return {[order]} [訂單詳細(xì)信息]
 */
function getOrderByID(id){
 var order;
 //...
 return order;
}

總結(jié)

JavaScript常用代碼書(shū)寫(xiě)規(guī)范總結(jié)到這就基本結(jié)束了，這篇文章總結(jié)的還是很全面的，對(duì)大家使用或?qū)W些Javascript具有一定的參考借鑒價(jià)值，希望對(duì)大家能有所幫助，如果有疑問(wèn)大家可以留言交流。