想成爲web開發大神？那你應該從擁有良好的代碼規範走起！（JavaScript篇 - 第一篇）

  規範在咱們的平常生活中很是的可見，良好的規範能夠給人一種清爽愉悅的感受，在程序員的世界看代碼如見其人，一個有着良好的規範的代碼能夠給人良好的第一印象。本着互聯網的精神，我將我應用的代碼規範分享給你們。

爲何要使用代碼規範？哼！我認爲我本身的寫法很爽，爲啥要用領導規定的破規範？

  當一個公司剛剛組建團隊時，每一個人都有各自的一套編程習慣，畢竟每一個人想法大不相同，也有些人是在某個公司工做時習慣了前公司的編碼規範，並認爲那纔是最好的規範（PHP同窗：「我纔是世界上最好的語言」）。在這種狀況下A員工若是須要維護B員工的代碼就會至關困難，而且要對代碼進行梳理纔會找出問題的所在，這樣的方式會消耗一名程序員的大量時間，時間對於企業來講就是money。顯然企業是不但願看見這種狀況的，而有良好的規範後雖然一開始是比較痛苦的，可是隨着時間的推移和團隊間的磨合等到你們都適應了這套規範後，這套規範就會促成團隊成員之間高水準的寫做。

縮進層級

  對於縮進來說目前有兩種形式，一種是製表符（tab）進行縮進，一般一個製表符（tab）至關於4個空格。第二種形式是使用空格進行縮進。

   製表符： 使用製表符的好處是文本編輯器能夠配置製表符的展現長度，所以能夠修改配置文件達到修改製表符長度的目的。但缺點也很明顯，若是在另一個系統或另一款編輯器打開代碼時，就會發現出現代碼展現不一致的狀況。由於每一個系統和軟件對製表符（tab）的解釋不一樣。例如：win10系統中webstrom中一個製表符（tab）默認是4個空格，可是記事本中一個製表符（tab）默認是8個空格。

   空格： 使用空格實現層級縮進的好處就是在任何系統，任何編輯器打開代碼都會展現一致性的代碼。通常狀況下使用四個空格爲一個縮進。我我的也使用4個空格做爲一個縮進，但也有少部分人習慣使用2個或8個空格爲一個縮進。

  特殊方法: webstorm 能夠將製表符（tab）轉換爲空格，這樣就能保證在任何環境下都會獲得展現一致性的代碼。 File -> Setting -> Editor -> Code Style -> Javascript 在右側窗口中有一個 Use tab character 的選項。取消這個選項就會將縮進層級的製表符(tab)轉換成空格，勾選這個選項就是將縮進層級的空格轉換爲製表符（tab）。

變量、常量、函數、類的命名

  變量和函數的聲明目前主流使用的有兩種，一種是帕斯卡命名法（Pascal） ，另一種是 駝峯命名法（Camel）。

  帕斯卡命名法： 帕斯卡命名法又被稱爲大駝峯命名，名稱的每個單詞首字母都大寫。例如：SetColor、ClassName等。

  駝峯命名法： 駝峯命名法又被稱爲小駝峯命名，名稱的第一個單詞小寫，其後面的單詞首字母大寫。例如：setColor、className等。

   常量： 對於變量的聲明通常選用全大寫字母多個單詞時使用 "_" 進行拼接。例如：MAX_COUNT、CURRENT。

   總結： 在我平常的開發中使用駝峯命名法聲明變量名和函數名，使用帕斯卡命名法命名構造函數名（類名）。

語句結尾

   JavaScript與其餘代碼有所不一樣，例如Java語句結尾沒有";"在編譯時就會報錯，更別提運行了。而JavaScript中省略";" 也是能夠運行的。這要歸功於JavaScript的（Automatic Semicolon Insetion,ASI）機制。ASI會自動尋找代碼中須要插入分好但實際中沒有分好的位置。大多數狀況下ASI都會正確的插入分好，不會產生錯誤，可是我本人十分建議插入分好。例如你寫的代碼是這個樣子的。

function getUserInfo() {
    return
    {
        name:'鉛筆畫不出的黑白',
        age:"121213"
    }
}

複製代碼

  可是ASI理解的就是這樣的

function getUserInfo() {
    return;
    {
        name:'鉛筆畫不出的黑白',
        age:"121213"
    };
}
複製代碼

行的長度

   Java編碼規範單行不超過80個字符，Android開發者編碼風格規定單行不超過100個字符，Puby編程規範中規定單行不超過80，Python編碼規範不超過79個字符。JavaScript風格指南中不多說起長度，可是我我的推薦不超過100個字符，由於在如今開發中主流使用23寸以上顯示器（我公司27寸）特別公司用到了32寸顯示器。承載100個字符徹底不成問題，即便有出差使用筆記本電腦也徹底能夠應對。

  當單行代碼量超過約定字符時就應該考慮換行。極力推薦在運算符後進行換行，這樣作可讓代碼看着清晰明瞭，也能夠防止ASI 自做主張的在行尾插入分好。在下一行中增長兩個層級縮進（我每一個縮進是四個空格，因此在下一行增長8個空格）'

代碼的註釋

  通常分爲三種註釋狀況：單行註釋、行尾註釋、多行註釋。 註釋的說明應該儘可能的簡潔明表達下列代碼段的做用。

• 單行註釋： 在註釋字符（//）的後方應添加至少一個空格偏移，註釋獨佔一行的話則應在註釋前添加一個空行。若是註釋的代碼存在縮進註釋也應該有縮進。

// 總庫存
  let stock = 330;

  // 若是有存貨就發貨
  if(stock < 0){
    // 發貨
    stock -= 1;
  }

複製代碼

• 多行註釋： 多行註釋通常多用於須要描述或註釋註釋的代碼片斷。註釋前應該添加空行，而且於單行註釋同樣註釋的層級縮進應與代碼保持一致。

/*
  let stock = 300;
  if (stock < 0) {
    stock -= 1;
    console.log('剛賣了一個還剩餘庫存' + stock)
  }
  */
  
  /*
  當發生交易時
  會輸出剩餘庫存
  */
  let stock = 300;
  if (stock < 0) {
    stock -= 1;
    console.log('剛賣了一個還剩餘庫存' + stock)
  }
  ps: 以上兩種註釋方法雖然在語法上很合法，而且使用中更爲方便，可是本人更推薦使用Java類型的註釋，這樣的註釋更爲思路晰。
  
  /* 領導說這個功能不要了，先註釋萬一一會又要呢。
   * let stock = 300;
   * if (stock < 0) {
   * stock -= 1;
   * console.log('剛賣了一個還剩餘庫存' + stock)
   * }
  */

  /*
   * 當發生交易時
   * 會輸出剩餘庫存
  */
  let stock = 300;
  if (stock < 0) {
    stock -= 1;
    console.log('剛賣了一個還剩餘庫存' + stock)
  }
複製代碼

• 行尾註釋： 行尾註釋應與代碼之間有一個空格，並儘量用簡短的語言說明註釋，若是存在多個行尾註釋時應在註釋前添加空格使註釋對齊。

let stock = 300; // 庫存
  let sale = 1;    // 每次限購一個
  let price = 50;  // 每一個商品的價格
  if (stock < 0) { // 當有庫存的時候纔會發貨
    stock -= 1;
    console.log('剛賣了一個還剩餘庫存' + stock)
  }
複製代碼

• 文檔註釋 文檔註釋通常用於類、函數、方法、用於描述函數的功能，傳入參數的類型，以及返回值的說明。
  特殊方法: webstrom中快捷方法/**回車

/**
 * 求兩個數中較大的值。(函數的功能說明描述)
 * @param {number} x  第一個數字 （參數的說明）
 * @param {number} y  第二個數字 （參數的說明）
 * @returns {number}  返回較大的值 （返回值的說明）
 */

function max(x, y) {
    if (x > y) {
        return x
    }
    return y;
}



複製代碼

總結： 在本篇文章中，我爲你們介紹了主流的命名方式和註釋方法，而且我將我常用的規範介紹給了你們，但願你們能都根據本身的實際狀況，制定一套良好的規範。在下一篇文章中我將會詳細的介紹unll和undefined的區別以及使用場景。還有全局變量會形成的影響。

後語: 歡迎你們留言討論，也歡迎加本人微信（48988840）探討技術。請記住個人筆名：鉛筆畫不出的黑白。謝謝！