編寫可維護的JavaScript 收納架

  若是你看過Nicolas C.Zakas寫過的任何做品,你必須認可他是個徹徹底底的天才。也只有天才級的才能寫出《JavaScript高級程序設計》讓全部的前端攻城師人手一本。Nicolas C.Zakas除了對現代JavaScrpt技術的詳細講解,還倡導了不少最佳實踐,包括漸進加強、可訪問性、性能、擴展性和可維護性等。前端

  編寫可維護的Javascript就意味着:消滅團隊個體的差別達成總體的統一,以保持你們的代碼風格一致和可讀的、可維護性的、可擴展的。因此該系列收納架作一個收納整理。編程

 

  書從編碼風格、編程實踐以及自動化3個部分來說。ide

第一部分 編程風格函數

  編程風格的肯定會促成整個團隊成員的高水準運做,由於全部的代碼風格看起來極爲相似就如同一我的編寫。性能

在團隊開發中,編程風格一致性變得尤其重要,緣由有:編碼

  • 任何開發者都不在意某個文件的做者是誰,也沒有必要花費額外的精力去理解代碼的邏輯而且從新排版,由於全部代碼的排版風格都是很是一致的,由於風格不一致會致使咱們打開代碼文件的第一件事情不是當即工做,而是進行縮進的排版整理。
  • 能很容易的辨別出有問題的代碼而且發現錯誤,若是全部的代碼風格很像,當看到一段不同凡響的代碼時,很肯能問題就出在這裏。

  JSLint 和 JSHint 是兩個檢查編程風格的工做。不只找出代碼中潛在的錯誤,還能對潛在的風格問題給予提示警告。JSLint是屬於「頑固派」不接受你的自定義也就是不會爲你作任何改變;JSHint是屬於「受教派」能夠接受你的自定義個性化的檢查。spa

第一章 基本的格式化設計

  編程風格的核心就是基本的格式化規範,這些規範決定着如何編寫高水準的代碼。code

1.1 縮進層級blog

  縮進沒有統一的共識二分紅兩派:

  • 使用製表符縮進。  
  • 使用空格縮進。
     只要不將二者混着用,保持一致即可。我的喜歡使用製表符Tab縮進。Zakas建議4個空格,或設置 製表符Tab 替換爲 4個空格爲一個縮進層。
 
1.2 語句結尾
  因爲JavaScript分析器會自動插入機制,因此禁止省略分號和函數中的前「{」不該該換行。
  如:
// 原始代碼
function getData() {
    return
    {
        title:"JavaScript",
        ...
    }
}

// 分析器將理解成
function getData() {
    return;
    {
        title:"JavaScript",
        ...
    }
}

// 推薦寫法
function getData() {
    return {
        title:"JavaScript",
        ...
    }
}
View Code

 

1.3 行的長度

  行的長度不該該超過80個字符。

1.4 換行

  當一行達到了單行最大字符數或超過單屏時,應該手動換行。推薦在運算符後換行,下一行需增長兩個層級的縮進(兩個Tab/8個字符)]

1.5 空行

  空行推薦使用在:

  • 在每一個流控制語句以前(如if/for等)。
  • 在方法之間。
  • 在方法中局部變量和第一條語句之間。
  • 在多行或單行註釋以前。
  • 在方法內的邏輯片斷之間插入空行,提供可讀性。
  • 在一段代碼的語義和另外一段代碼不相關之間,確保語義有關聯的代碼展示在一塊兒 如:
// 不推薦寫法
if(wl && wl.length){
    for (i=0,l=wl.length;i<l;++i) {
        ...
    }
}

// 推薦寫法
if(wl && wl.length){

    for (i=0,l=wl.length;i<l;++i) {
        ...
    }
}
View Code

1.6 命名

  JavaScripe 核心 ECMAScript,便是遵守了駝峯式大小寫。

  1.6.1 變量和函數

    變量名老是應該遵循駝峯大小寫命名法,而且命名的前綴應當是名詞,使得能夠將變量和函數區分開。 如:

// 不推薦寫法: 變量看起來像函數
var getCount=10;
var isFound=true;

// 推薦寫法
var count=10;
var found=true;
View Code

    命名長度儘量短並能看詞知意。

    常見參考:

    can        函數返回布爾值
    has       函數返回布爾值
    is          函數返回布爾值
    get        函數返回非布爾值
    set        函數用來保存值
 
  1.6.2 常量
    在ECMAScript 6 以前,JavaSCript 不存在真正的常量的概念。而後工做中仍然把變量用做成常量的。因爲我是用C#的,若是根據C#的命名規則,約定常量首字母大寫來區分, 如:
// 這是個人我的約定跟本書不一樣(書是C語言使用大寫字母和下劃線命名)
var MaxCount=100;
var Url="http://www.cnblogs.com/";
View Code

 

  1.6.3 構造函數

    構造函數的命名是遵守 UpperCamelCase(大駝峯)命名法。

 

1.7 直接量

                                                                                          《-未完 待續-》

相關文章
相關標籤/搜索