個人認為Airbnb的javascript程式碼規範是寫的比較好的, 不過其中有一章關於逗號Commas的使用是這樣寫的:
前置逗號(Leading commas):不要使用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// bad var once , upon , aTime; // good var once, upon, aTime; // bad var hero = { firstName: 'Bob' , lastName: 'Parr' , heroName: 'Mr. Incredible' , superPower: 'strength' }; // good var hero = { firstName: 'Bob', lastName: 'Parr', heroName: 'Mr. Incredible', superPower: 'strength' }; |
其實在很多開源軟體中前置逗號是經常使用的,它是Haskell語言預設的程式碼風格。
Node.JS的前負責人isaacs(現npmjs.org負責人) 寫過一篇文章,討論將逗號寫在前面的優缺點。討論中儘管很多人無法適應comma-first。但其中有一條優點無法迴避,逗號前移可以很容易發現語法錯誤。
下段程式碼的d變數名後面少了一個逗號,這是我們經常犯的一個錯誤,在一般程式碼風格中,這個錯誤是非常不容易被發現的:
1 2 3 4 5 6 7 8 9 10 |
// error in standard style var a = "ape", b = "bat", c = "cat", d = "dog" e = "elf", f = "fly", g = "gnu", h = "hat", i = "ibu"; |
但在前置程式碼規範中,一眼就可以看得出來:
1 2 3 4 5 6 7 8 9 10 11 |
// error in comma-first style var a = "ape" , b = "bat" , c = "cat" , d = "dog" e = "elf" , f = "fly" , g = "gnu" , h = "hat" , i = "ibu" ; |
前置逗號與”.”的連續型寫法或者叫做鏈式寫法(可能還有”+”)是保持一致的,如:
1 2 3 4 5 6 7 8 |
jQuery .ajax('//home/url') .done(function() { }) .error(function() { }) .always(function() { }) |
前置逗號在最後新增刪除變數時只需要影響一行。而無需刪除或新增原來最後一個變數的結束符號。並且前置寫法,2個空格的tab即可將變數對齊,2個space可使程式碼更緊湊。傳統寫法,需要4個空格的tab才能使變數對齊。
1 2 3 4 5 6 7 8 9 10 11 12 |
var a = "ape" , b = "bat" , c = "cat" , d = "dog" , e = "add new line" //隻影響的一行(新增或刪除) ; var a = "ape", b = "bat", c = "cat", d = "dog", e = "add new line"; //刪除此行時需要將前一行d的最後一個逗號同時刪除,此時會影響兩行;新加時同時刪除原有的分號,並換成逗號。此時即易發生輸入錯誤。 |
另外在Twitter的bootstrap框架中,每個變數都使用var來宣告,不用連續宣告的方式。而且預設不用分號結束的:
這種格式的程式碼看上去也比較優美,同時避免了關於逗號的爭論:
1 2 3 |
var a = "ape" var b = "bat" var c = "cat" |
其實省略分號也是可以借鑑的,所以本文認為比較好的逗號格式應該是這樣的:
1 2 3 4 5 6 7 8 9 10 |
var one , two , three var prop = { a: 'a' , b: 'b' , c: 'c' , d: 'd' } |
負作用
其實省略分號也有負用,在與閉包結合時會有一些問題,如下段程式碼:
1 2 3 4 5 6 7 |
var a = 1 (function() { console.log(a) })() // TypeError: number is not a function |
一個錯誤丟擲了,在JS解釋執行時,很可能將之合成了1行。
1 |
var a = 1 (function() { console.log(a) })() |
錯誤就產生了,所以很多開源框架都會在閉包前置或後置分號,以避免前人無意或故意遺漏分號從而造成錯誤,正確的寫法應該是:
1 2 3 4 5 |
var a = 1 ;(function() { console.log(a) })() |
不使用分號的bootstrap框架也是這麼幹的,不過bootstrap框架使用了看上去更加高階的+號分隔閉包並後置分號,不過這一套不適合程式碼與閉包混合使用的場景,還是不要學比較好。
1 2 3 4 5 6 7 |
var a = 1 + function() { console.log(a) } (); //a 的值會變成 NaN |