編寫可維護的JavaScript

軟件生命週期中80%的成本都消耗在了維護上；並且幾乎全部的維護者都不是代碼的直接開發人。如何讓本身寫的代碼讓別人閱讀起來更高效？固然是寫代碼的時候注入一些規範。那麼在Javascript中有哪些編程風格值得咱們去注重呢？這篇文章將總結《編寫可維護的JavaScript》裏面的觀點。

縮進風格

上圖是Stack Overflow的調查，可見，大部分的Programmer都喜歡用tab進行縮進。每行縮進由4個空格組成。

語句結尾

建議不要省略分號。不少人喜歡寫js代碼很依賴於自動分號插入，也就是語句後面不加分號。可是這是大多數的狀況，像return這樣的語句是會出錯的。相似的還有其餘一些語法，這裏就不細說自動分號插入機制了，感興趣的童鞋能夠前往JavaScript ASI 機制詳解。

行的長度

這個以前在另一篇博客中有介紹過，爲了保證在小屏筆記本和大屏幕上看到的代碼是一致的，一般建議每一行代碼不要超過80列。

換行

代碼長度超過80列，換行也是有講究的。建議換行的代碼增長兩個縮進長度。例如：

callFunction(element1, element2, element3, element4,
        element5);
複製代碼

空行

整個函數代碼沒有空行地緊湊在一塊兒會給閱讀代碼的人必定的視覺疲勞。也讓人厭倦，起碼我看到這樣的代碼就不想再看下去了。對於空行地建議：

• 在方法之間
• 在方法中的局部變量和第一條語句之間
• 在註釋以前
• 在方法內的邏輯片斷之間插入空行，提升可讀性

命名

命名是我以爲規範中最難的點，怎麼讓變量或者函數名稱還有意境。結合不一樣的場景，設置不同的名稱。讓維護代碼的人像看小說通常地閱讀代碼，就說明命名是成功的！除了變量含義以外，其餘的一些規範好比：

• 駝峯寫法
• 變量用名詞
• 函數用動詞+名詞
• 對象私有屬性或方法前面加_
• 常量用所有大寫字母且分割單詞用下劃線
• 構造函數首字母大寫，且以非動詞開頭

註釋

單行註釋

• 獨佔一行，用來解釋下一行代碼

if (condition) {
    
    // 若是代碼執行到這裏，表明經過了condition的校驗
    next();
}
複製代碼

注意註釋以前要加空行、註釋也要縮進。

• 與代碼同一行，用來解釋以前的代碼

var result = something + somethingElse;    // somethingElse will never be null
複製代碼

注意註釋與代碼直接至少添加一個縮進。

• 多行，用來註釋掉一個代碼塊

// if (condition) {
// doSomething();
// doSomethingElse();
// }
複製代碼

註釋一個代碼塊時是在連續多行使用單行註釋惟一能夠接受的狀況。可是最好別這樣使用。

多行註釋

if (condition) {

    /* * 若是代碼執行到這裏 * 說明balabala */
     doSomething();
}
複製代碼

要注意縮進、換行、空格、空行。

使用註釋聲明

註釋說明，主要用來作記號。主要有如下幾種：

• TODO 說明代碼還未完成，說明接下來要作的事情。
• HACK 代表代碼實現走了一個捷徑。應當包含爲什麼使用hack的緣由。同時也代表也許會有更好的解決辦法。
• FIXME 說明代碼存在bug，應當儘快修復。
• REVIEW 說明代碼任何可能的改動都須要評審。

變量、函數和運算符

• 變量聲明 變量聲明習慣通常有兩種：一種是「就近」原則，放在離使用最近的地方；第二種就是放在最上面，做爲函數內的第一條語句。我的推薦後者，這跟JavaScript引擎解析代碼的習慣是一致的。

• 函數聲明 函數聲明也會被JS引擎提早，建議在函數調用以前聲明函數。另外，推薦函數內部的局部函數應當緊接着變量聲明以後聲明。

• 當即調用的函數 當即執行函數，在開發中確定會常用。好的寫法是：

var value = (function() {

    // 函數體
    return {
        message: 'Hi'
    };
}());
複製代碼

清晰明瞭地的讓人知道這是一個當即執行函數。

• 嚴格模式 ES5引入了嚴格模式，經過這種方式解析執行js代碼，來達到減小錯誤的目的。代碼要以strict mode去解析也很簡單，只要將use strict放到js代碼中便可。當js解析器看到這樣一條沒有賦給變量的字符串以後，就會以嚴格模式去解析代碼。一個原則：儘可能少地影響到更多代碼！什麼意思呢？use strict能夠放到任何位置，全局或者函數局部均可以。

// bad
"use strict";
function doSomething() {
    // 代碼

}

// good
function doSomething() {
 "use strict";
    // 代碼

}
複製代碼

若是有多個函數要使用嚴格模式，就用當即函數限制起來，避免影響到全局。

(function() {
 "use strict";
    function doSomething() {
        // 代碼
    }
    function doSomethingElse() {
        // 代碼
    }
})();
複製代碼

• 相等 使用===、!==代替==、!=，避免類型轉換。類型轉換的相關內容這裏就不說了，自行了解。

UI層的鬆耦合

鬆耦合的原則：修改一個組件時儘量不須要修改其餘組件代碼。

• 將JavaScript從CSS中抽離 避免使用CSS表達式

• 將CSS從JavaScript中抽離 避免直接修改dom的樣式，經過類名去實現想要的效果。

// bad
element.style.cssText = "color: red; left: 10px";

// good
.reveal {
    color: red;
    left: 10px;
}

element.className += " reveal";
複製代碼

• 將JavaScript從HTML中抽離 避免直接在HTML寫事件處理程序和邏輯代碼

事件處理

兩個規則：

• 隔離程序邏輯 將應用邏輯從全部事件處理程序中抽離出來是最佳實踐，舉個例子：

// bad
function handleClick(event) {
    var popup = document.getElementById("popup");
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
    popup.className = "reveal";
}

// good
function handleClick(event) {
    showPopup(event);
}

function showPopup(event) {
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
    popup.className = "reveal";
}
複製代碼

• 不要濫用事件對象 將事件對象event一直傳遞下去是個很爛的實踐。別人並不知道你具體使用到事件對象的什麼屬性或者方法。繼續用上面的例子：

// bad
function handleClick(event) {
    showPopup(event);
}

function showPopup(event) {
    popup.style.left = event.clientX + "px";
    popup.style.top = event.clientY + "px";
    popup.className = "reveal";
}

// good
function handleClick(event) {
    showPopup(event.clientX, event.clientY);
}

function showPopup(x, y) {
    popup.style.left = x + "px";
    popup.style.top = y + "px";
    popup.className = "reveal";
}
複製代碼

vue的規範建議能夠前往vue最佳實踐，一塊兒討論學習吧！