JavaScript編碼風格

最近在看前端大牛Nicbolas C.Zakas的《編寫可維護的JavaScript代碼》一書。以爲裏面的不少知識點都寫的很好，因此，就寫篇博文，總結一下吧！編碼規範對於程序設計來講是很重要的，由於若是編碼風格不一致的話，代碼看上去就會很亂，是很難維護的。固然，不一樣的開發團隊有着不一樣的編碼規範，比較著名的有，Google編碼規範，jQuery編碼規範，dojo編碼規範以及Yahoo！編碼規範，等等。

第一， Indentation Levels （ 縮進 ）。目前比較流行的是2空格縮進和4空格縮進，好比谷歌的是2空格的，可是jQuery和Yahoo！是4空格的。而Nicbola建議使用4個空格的tab鍵縮進，他的理由是：

    1.大多數編輯器默認是4個空格的

    2.此外，兩個空格縮進不夠明顯；

無論採用哪一種方法哪一種縮進方法，團隊開發必定要採用相同的縮進，切忌同一個項目裏面，有些採用兩空格縮進，有些採用4空格縮進。

 

 

第二，line length and  line breaking （行的長度和換行），很多開發者喜歡把一行代碼寫的很長很長，要拖動水平滾動條才能夠看全一行的代碼，事實上，這是很差的作法，在不少的編碼規範裏面，都對行長度作了限制的。 通常的，一行代碼的長度不要超過80個字符。當字母超過限制的長度時，（通常爲80個字母），必定要換行。換行須要縮進，並且仍是二級縮進（所謂二級縮進就是縮進再縮進，也即按下兩個tab鍵）。好比下面的代碼：

 

// 推薦寫法，在運算符結尾處斷行（逗號也是運算符），並且縮進也正確，用了二級縮進
callAFunction(document, element, window, "some string value", true, 123,
        navigator);
 
// 不推薦寫法，由於只用了一級縮進
callAFunction(document, element, window, "some string value", true, 123,
    navigator);
 
// Bad: 不推薦寫法，不是以運算符結尾處斷行
callAFunction(document, element, window, "some string value", true, 123
        , navigator);

 

斷行須要注意的是， 爲了不JavaScript引擎自動在末尾添加分號致使出錯，每每都是在運算符結尾處斷行的；在這種斷行規則在塊級語句裏一樣適用的，以下是if語句的斷行：

if (isLeapYear && isFebruary && day == 29 && itsYourBirthday &&
        noPlans) {
    waitAnotherFourYears();
}

 

不過有一個例外，就是爲變量賦值的時候，第二行的起始位置要跟第一行的等號的右部的首個字符對齊，這樣說有點兒拗口，直接來個例子說明吧，以下所示：

var result = something + anotherThing + yetAnotherThing + somethingElse +
             anotherSomethingElse;

 

咱們爲變量result賦值，第二行的anotherSomethingElse與第一行的等號右邊的第一個字符（即something的第一個字符s）對齊的；

 

第三.naming(命名規則)

通常的，建議使用小寫的字母開頭的駝峯命名規則，以下

var schoolName;

 

變量的命名最好是以名詞開頭，以下：

var schoolName;

 

函數命名最好以動詞開頭，經常使用的有can, has, is, get, set，以下：

function getSchoolName() {
 
}

 

變量類型最好能夠猜出變量的類型，好比：count, length, size等能夠知道是Number類型的，而schoolName, title, color, type等都是字符String類型的，此外，循環的趟數經常使用i, j, k等；

 

可是有一類函數建議使用大寫字母開頭的，那就是 construtor(構造函數)。構造函數是用來建立對象的，一般採用pascal的命名規則，即首字母大寫的駝峯命名，以便跟普通函數能夠區分開，以下：

// 推薦寫法
function Person(name) {
    this.name = name;
}
Person.prototype.sayName = function() {
    alert(this.name);
};
var me = new Person("Nicholas");

 

 

第四，String(字符串)

javascript的字符串既可使用單引號包起來，也可使用雙引號。以下面都是容許的：

var name = "Nicholas says, \"Hi.\""; 
var name = 'Nicholas says, "Hi"';  

 

可是爲了統一，不要有時使用雙引號，有時使用單引號。 以下面代碼就很差的了：

var p1, p2;
p1 = "Tom";
p2 = "Jane"

 

關於字符串的使用還有一個問題，儘可能不要使用multiline strings（多行字符串），而是應該把他們拆成多個字符串，而後是用「+」進行拼接，以下：

//不推薦寫法
var longString = "Here's the story, of a man \
named Brady.";
 
//推薦寫法
var longString = "Here's the story, of a man " +
                 "named Brady.";

 

做者建議使用雙引號，由於，其餘不少語言都是用雙引號的。好比你既寫JavaScript代碼，又寫Java言代碼，若是你一直都用雙引號的話，那就不用總是去想「我如今是在寫JavaScript仍是Java呢」！

 

第五，statement（塊級語句）

塊級語句主要包括下面這些：    • if     • for    • while    • do...while    • try...catch...finally等等，不少時候，當塊級語句只有一條語句時，不少人都喜歡省略花括號，以下：

if (condition)
doSomething();

 

如今這個代碼是沒問題的，若是一段時間以後，咱們想要爲這個塊級語句擴展代碼，好比，在if裏面添加多一個語句，以下：

if (condition)
doSomething();
doSomethingElse();

 

這時候，doSomethingElse();不管如何都是會執行的，由於他不是在if裏面的，但這不是咱們想要的。因此，爲了不擴展時出現相似的問題，應該養成不管什麼時候都要添加花括號，哪怕只有一條語句，上面的例子推薦寫法，應該以下：

if (condition) {
    doSomething();
}

 

此外，對於塊級元素的左花括號（「{」）的位置通常建議寫在 塊級語句開始行的後面，Google JavaScript Style Guides，以及jQuery都是推薦這種寫法的，以下：

if (condition) {
    doSomething();
} else {
    doSomethingElse();
}

而不要寫在另起一行的開頭，以下：

if (condition)
{
    doSomething();
}
else
{
    doSomethingElse();
}

 

還有就是， 左花括號前面要添加一個空格，以下所示

if (condition) {
    doSomething();
}

 

第六， 函數調用時，函數名和左括號之間不要有空格

// 推薦寫法
doSomething(item);

// 不推薦寫法，這看起來像塊級語句了
doSomething (item);

 

第七，等式（ equality）

 通常的，在比較兩個不一樣類型的數值是否相等時，建議使用「===」和「！==」，而不要使用「==」和"!="。由於，若是比較兩個不一樣類型的數值時，"=="和"!="會發生強制類型轉換的，因此這樣的比較結果有時候是不太準確的。好比，數字跟字符串的比較，會自動把字符串轉換成數字的：

// The number 5 and string 5
console.log(5 == "5"); // true
// The number 25 and hexadecimal string 25
console.log(25 == "0x19"); // true