Coding Standard

Coding Standards

轉載自掘金
做者：Sivan
簡介：前端開發的老新人，原生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 的強制類型轉換所形成的困擾。

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

不推薦

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

正因如此，若是將代碼傳參從兩個變爲一個，那數組頗有可能發生意料不到的長度變化。爲避免此類怪異情況，請老是採用可讀的數組字面量。

推薦

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