JavaScript Coding Style

JavaScript Coding Style

空格跟空行的原則當中最重要的是要強調「字」跟「參數」，所以有字跟有參數的地方就要空一格，大多數的標點符號跟標點符號之間都不需要有空格。 indent 一律為兩格空格。

var and String

寫 JavaScript 的時候如果有使用引號，請一律使用單引號 '，在寫 HTML、CSS 的時候用到引號的時候一律使用雙引號 "。如果有很多個變數要宣告的話，請一個請一個宣告並且等號要以最長的變數名稱為標準來對齊，比較有關連的變數宣告擺成一個區塊，每個區塊各自對齊，範例如下：

var name  = 'fred';
var birth = '2000/12/12';
var mail  = '[email protected]';

var another_name  = 'mason';
var another_birth = '2000/11/11';
var another_mail  = '[email protected]';

請避免使用以下幾種宣告變數的寫法，因為都很容易出錯：

var name, birth, mail, another_name, another_birth, another_mail;

name  = 'fred';
birth = '2000/12/12';
mail  = '[email protected]';

another_name  = 'mason';
another_birth = '2000/11/11';
another_mail  = '[email protected]';

上面這種寫法只要剛開始 var 的時候漏掉某個變數，被漏掉的變數在下面宣告之後就會變成 global ，變數一多的話就很容易出錯。

var name  = 'fred',
    birth = '2000/12/12',
    mail  = '[email protected]',

    another_name  = 'mason',
    another_birth = '2000/11/11',
    another_mail  = '[email protected]';

上面這種寫法也很危險，只要漏掉一個逗號或是不小心把某個逗號打成分號，程式就會掛掉，變數一多也很容易出錯，所以請用最上面最陽春的寫法一行一行宣告變數。

Array

宣告 array 的時候，value 跟 value 之間要有一個空格，但單引號跟逗號之間不用空格，範例如下：

var member = [ 'ben', 'mason', 'fred' ];

Object

object 在給值的時候 key 跟 value 是一對的，一對 key 跟 value 就給一行會看的比較清楚，所以為了讓 code 更容易閱讀，請一對就給一行，冒號一樣要以最長的 key 做對齊，而且冒號跟 key 、value 之間都要空一格，連續宣告兩個 object 的時候中間要空行，範例如下：

var dreamerslab = {
  name    : 'Dreamerslab',
  phone   : '0911222333',
  memeber : 3
};

var woomoo = {
  name   : 'Woomoo',
  phone  : '0922333444'
  member : 3
};

如果是 object 裡面又有好幾個 object ，裡面的 object 之間要空行，範例如下：

var companies = {
  dreamerslab : {
    name    : 'Dreamerslab',
    phone   : '0911222333',
    memeber : 3
  },

  woomoo : {
    name   : 'Woomoo',
    phone  : '0922333444'
    member : 3
  }
};

JavaScript 有很多保留字是要避免使用的，但如果很不幸的一定要用保留字命名 key ，在傳 key name 取值的時候要用中括弧傳參數進去或是在宣告的時候 key name 用 ' 包起來才不會發生錯誤，不過只有在比較老舊的瀏覽器會發生錯誤，新的瀏覽器會成功執行，範例如下：

var test = {
  new : function (){
    console.log( 'test new' );
  },

  'this' : function (){
    console.log( 'test this' );
  }
};

test.new();        // this will explode in older browser
test[ 'new' ]();   // correct
test.this();       // correct

在取值的時候，為了讓程式看起來更乾淨、更好閱讀，盡量使用 . 的方式來取值，非必要不要用 [ 'member' ] 這種 object mapping 的方式取值，通常 object mapping 是用來取代 if 跟 switch 的。如果要傳參數來取值，參數跟中括弧的前後都要空一格，範例如下：

var dreamerslab_name = dreamerslab.name;

var sample            = 'phone';
var dreamerslab_phone = dreamerslab[ sample ];
var woomoo_phone      = woomoo[ 'phone' ];

如果需要用到比較裡面的屬性，程式很有可能會過長而很難閱讀、維護，但如果有斷行的話就可以解決這樣的狀況，例如在使用 jQuery 的時候，常常會 chain 很多層，但如果把很多層都寫在一行的話會很難閱讀、維護，所以覺得過長的時候就要斷行，每一行都以 . 來結束，範例如下：

$( '.sample' ).
find( '.inside' ).
text( 'Hello World' );

Function and when calling a function

宣告 function 的時候，function 跟後面的 ( 中間要空一格，因為大部分的文字編輯器都要這樣 () 裡面的參數才會有正確的 syntax highlight。後面的 ) 跟 { 之間不用空，因為兩個都是不需要強調的標點符號。function 裡的第一行跟 function 的開頭 { 中間不要空行，最後一行跟 function 的結尾 }; 中間也不用空行。執行 function 的時候傳進去的參數前後要空格，逗號跟後面的參數要空一格、跟前面不用空格，範例如下：

var sample_function = function ( a, user ){
  console.log( a + ' '  + user + ', this is a test.' );
  console.log( 'Thanks for reading this doc.' );
};

var a    = 'Hello ';
var user = 'Fred';

sample_function( a, user );

如果是另一種宣告 function 的方法的話，sample_function 跟後面的 ( 的中間要空一格， ) 跟 { 中間不用空格：

function sample_function ( a, user ){
  console.log( a + ' '  + user + ', this is a test.' );
  console.log( 'Thanks for reading this doc.' );
}

如果要在 function 裡面執行另一個 function ，裡面 function 的名字跟前面的 ( 要空一格，裡面 function 結尾的 ) 跟外面 function 的 ) 不要空格，範例如下：

sample_function( another( a, user ));

if

為了讓程式更好閱讀、維護，能不用判斷式就不要用。如果一定要用的話，if 跟後面的 ( 不要空格，() 跟裡面帶的參數前後要空格，如果有 else 的話， else 跟前後的大括弧不要有空格，}else{ 跟後面的 } 要各佔一行，為了統一寫法，如果要用以下的 if 跟 else 的話，if else 跟中間的程式都要空行。

if( true ){
  console.log( 'success' );
}else{
  console.log( 'fail' );
}

如果只有 true 的時候要做事情的話，一般的情況是用以下的寫法：

var a = function (){
  console.log( 'this a is a function' );
};

if( a ){
  a();
}

但可以用下面比較簡單的寫法來讓程式看起來更乾淨更好讀，整段程式的意思是，如果 a 存在的話，就執行後面的 a() ：

if( a ) a();

如果要做完 if 就中斷程式的話，可以把上面的程式改成：

if( a ) return a();

上面的程式可以寫成下面更簡單的樣子，一樣是 a 存在的話，就執行後面的 a() ：

a && a();

下面的這段程式的意思是，如果 b 不存在的話，就會執行後面的 b() ：

b || b();

如果有用到很多的 if 的話，如果可以用 object mapping 的用法就不要用 if 跟 switch，如果有用到很多 if 的話，一般的作法是：

var whatever = function ( y ){
  var a = function (){};
  var b = function (){};
  var c = function (){};

  if( y === 'a' ){
    a();
    return;
  }

  if( y === 'b' ){
    b();
    return;
  }

  if( y === 'c' ){
    c();
    return;
  }
};

但這樣的話會做太多判斷，也會造成程式過長、較難維護，所以可以改成 object mapping 的作法：

var whatever = function ( y ){
  var x = {
    a : function (){},
    b : function (){},
    c : function (){}
  };

  x[ y ] && x[ y ]();
};

for

在使用 for 的時候，; 跟後面的變數中間要空一格，以下是一般的作法：

for( var i = 1; i = 10; i++ ){
  console.log( i );
}

但如果沒有要使用到 i ，只是要讓程式跑 10 次的話，可以簡化成以下的寫法，雖然第三段的規則沒有給，但第二段的 ; 跟後面的 ) 要空一格：

var i = 10;

for( ; i--; ){
  console.log( i );
}