JavaScript-總結常用程式碼書寫規範

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 的強制型別轉換所造成的困擾。

如果你使用 === 操作符，那比較的雙方必須是同一型別為前提的條件下才會有效。更多精彩內容關注微信公眾號：全棧開發者中心（admin10000_com）

不推薦

(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));

變數賦值時的邏輯操作

邏輯操作符 || 和 && 也可被用來返回布林值。如果操作物件為非布林物件，那每個表示式將會被自左向右地做真假判斷。基於此操作，最終總有一個表示式被返回回來。這在變數賦值時，是可以用來簡化你的程式碼的。

不推薦

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();

錯誤結果

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

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

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

語句塊內的函式宣告

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

不推薦

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

推薦

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

不要使用eval函式

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

陣列和物件字面量

1.用陣列和物件字面量來代替陣列和物件構造器。陣列構造器很容易讓人在它的引數上犯錯。

不推薦

//陣列長度3
var a1 = new Array(x1, x2, x3);
//陣列長度2
var a2 = new Array(x1, x2);

//如果x1是一個自然數，那麼它的長度將為x1
//如果x1不是一個自然數，那麼它的長度將為1
var a3 = new Array(x1);

var a4 = new Array();

正因如此，如果將程式碼傳參從兩個變為一個，那陣列很有可能發生意料不到的長度變化。為避免此類怪異狀況，請總是採用可讀的陣列字面量。更多精彩內容關注微信公眾號：全棧開發者中心（admin10000_com）

推薦

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;
}