javascript 代碼規范

代碼規范我們應該遵循古老的原則：“能做并不意味著應該做”。

全局命名空間污染

總是將代碼包裹在一個立即的函數表達式里面，形成一個獨立的模塊。

不推薦

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));立即執行函數

在立即執行函數里面，如果有用到全局變量應該通過變量傳遞的方式，讓立即執行函數的函數體在調用時，能以局部變量的形式調用，在一定程度上提升程序性能。

并且應該在立即執行函數的形參里加上undefined，在最后一個位置，這是因為ES3里undefined是可以讀寫的，如果在全局位置更改undefined的值，你的代碼可能得不到逾期的結果。

另外推薦在立即執行函數開始跟結尾都添加上分號，避免在合并時因為別人的代碼不規范而影響到我們自己的代碼

不推薦

(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));嚴格模式

ECMAScript 5 嚴格模式可在整個腳本或獨個方法內被激活。它對應不同的 javascript 語境會做更加嚴格的錯誤檢查。嚴格模式也確保了 javascript 代碼更加的健壯，運行的也更加快速。

嚴格模式會阻止使用在未來很可能被引入的預留關鍵字。

你應該在你的腳本中啟用嚴格模式，最好是在獨立的 立即執行函數 中應用它。避免在你的腳本第一行使用它而導致你的所有腳本都啟動了嚴格模式，這有可能會引發一些第三方類庫的問題。

不推薦

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

推薦

(function(){ 'use strict';}());變量聲明

對所有的變量聲明，我們都應該指定var，如果沒有指定var，在嚴格模式下會報錯，并且同一個作用域內的變量應該盡量采用一個var去聲明，多個變量用“,”隔開。

不推薦

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

不完全推薦

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

推薦

function myFun(){ var x=5,y=10;}使用帶類型判斷的比較判斷

總是使用 === 精確的比較操作符，避免在判斷的過程中，由 JavaScript 的強制類型轉換所造成的困擾。

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

不推薦

(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));變量賦值時的邏輯操作

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

不推薦

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

推薦

x = x || y || 1;分號

總是使用分號，因為隱式的代碼嵌套會引發難以察覺的問題。當然我們更要從根本上來杜絕這些問題[1] 。以下幾個示例展示了缺少分號的危害：

// 1.MyClass.prototype.myMethod = function() { return 42;} //這里沒有分號(function() {})(); //2.var x = { 'i': 1, 'j': 2} // 這里沒有分號//我知道這樣的代碼你可能永遠不會寫，但是還是舉一個例子[ffVersion, ieVersion][isIE](); // 3.var THINGS_TO_EAT = [apples, oysters, sprayOnCheese] // 這里沒有分號-1 == resultOfOperation() || die();

錯誤結果

JavaScript 錯誤 —— 首先返回 42 的那個 function 被第二個function 當中參數傳入調用，接著數字 42 也被“調用”而導致出錯。

八成你會得到 ‘no such property in undefined’ 的錯誤提示，因為在真實環境中的調用是這個樣子：xffVersion, ieVersion().

die 總是被調用。因為數組減 1 的結果是 NaN，它不等于任何東西（無論 resultOfOperation 是否返回 NaN）。所以最終的結果是 die() 執行完所獲得值將賦給 THINGS_TO_EAT.

語句塊內的函數聲明

切勿在語句塊內聲明函數，在 ECMAScript 5 的嚴格模式下，這是不合法的。函數聲明應該在作用域的頂層。但在語句塊內可將函數申明轉化為函數表達式賦值給變量。

不推薦

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

推薦

if (x) { var foo = function() {};}不要使用eval函數

eval() 不但混淆語境還很危險，總會有比這更好、更清晰、更安全的另一種方案來寫你的代碼，因此盡量不要使用 eval 函數。

數組和對象字面量1.用數組和對象字面量來代替數組和對象構造器。數組構造器很容易讓人在它的參數上犯錯。

不推薦

//數組長度3var a1 = new Array(x1, x2, x3);//數組長度2var a2 = new Array(x1, x2);//如果x1是一個自然數，那么它的長度將為x1//如果x1不是一個自然數，那么它的長度將為1var a3 = new Array(x1);var a4 = new Array();

正因如此，如果將代碼傳參從兩個變為一個，那數組很有可能發生意料不到的長度變化。為避免此類怪異狀況，請總是采用可讀的數組字面量。

推薦

var a = [x1, x2, x3];var a2 = [x1, x2];var a3 = [x1];var a4 = [];2.對象構造器不會有類似的問題，但是為了可讀性和統一性，我們應該使用對象字面量。

不推薦

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 的快捷方法）

用三元操作符分配或返回語句。在比較簡單的情況下使用，避免在復雜的情況下使用。沒人愿意用 10 行三元操作符把自己的腦子繞暈。

不推薦

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

推薦

return x === 10 ? 'valid' : 'invalid';for循環

使用for循環過程中，數組的長度，使用一個變量來接收，這樣有利于代碼執行效率得到提高，而不是每走一次循環，都得重新計算數組長度

不推薦

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

推薦

for(var i=0,len=arr.length;i<len,i++){}重復的dom操作

重復的dom操作，使用一個變量來進行接收很有必要，而不是頻繁的去操作dom樹，這對性能與代碼的整潔及易維護性帶來不好的影響

不推薦

$('.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()可使用的情況下應該優先使用.end()

推薦

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

在描寫注釋時，推薦格式化且統一的注釋風格，在寫注釋時盡量描述寫代碼時的思路，而不是代碼做了什么。

不推薦

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

方法的注釋應該統一用塊級注釋

推薦

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