JavaScript 代碼風格指南

jopen 9年前發布 | 27K 次閱讀 JavaScript開發 JavaScript

一.基本格式

縮進

建議每級4個空格,可以給編輯器設置tab = 4個空格,自動轉換

分號

不要省略分號,防止ASI(自動插入分號)錯誤

行寬

每行代碼不超過80個字符,過長應該用操作符手動斷行

斷行

操作符在上一行末尾,且下一行縮進2級,如果是賦值語句,還應該和等號后面部分對齊

空行

函數聲明與函數聲明、變量聲明與函數聲明、函數內部的邏輯塊之間都應該有空行隔開

作者尼古拉斯還建議在流程控制塊頂部留一個空行,但給的例子不是很明確

命名

  • 變量名/函數名:Camel(駝峰)規則,首詞首字母小寫,后續詞首字母大寫,其余部分小寫
  • 常量名:C語言式,全大寫,下劃線分詞
  • 構造函數:Pascal規則,所有詞首字母大寫,其余部分小寫
  • </ul>

    字面量

    • 字符串:雙引號包裹,斷行用[+]操作符,不要用\轉義字符
    • 數值:不要省略小數點前后的部分,不要用八進制形式
    • Null:只把null當作Object的占位符,不要用來檢測形參,也不要用來檢測未初始化的變量
    • Undefined:應該把所有對象都初始化為null,以區分未定義和未初始化
    • 對象字面量/數組字面量:不要用構造函數方式聲明對象和數組
    • </ul>

      二.注釋

      P.S.書中有一句非常經典的解釋:

      Appropriately written comments help tell the story of code, allowing other developers to drop into a part of the story without needing to hear the beginning.

      </blockquote>

      單行注釋

      • 行尾:用1級縮進隔開代碼,而且//后面要有一個空格
      • 獨占一行:用來注釋下面,要與被注釋的代碼保持相同的縮進
      • 行首:用來注釋多行代碼
      • </ul>

        多行注釋

        用來包裹大段注釋,推薦Eclipse風格,例如

        /*
         * comment line1
         * comment line2
         */

        注意:

        • 多行注釋上方留一個空行
        • *星號后面留一個空格
        • 多行注釋至少三行(因為第一行和最后一行后面不加注釋)
        • </ul>

          在哪里添注釋

          • 不能自解釋的代碼
          • 故意的,但看起來像是有錯的地方
          • 針對瀏覽器的hack
          • </ul>

            文檔注釋

            應該給各個函數添注釋,包括功能描述、參數、返回值、拋出的錯誤等等,例如推薦的Eclipse風格:

            /**
             * 添加指定元素到默認數組
             *
             * @method add
             * @param {Number} 將要添加的元素
             * @return {Boolean} 添加成功/失敗
             * @throw {TypeError} 參數類型不匹配
             */
            function add(item){
                if(typeof item === "number"){
                    arr.push(item)
                }
                else{
                    throw new TypeError();
                }
            }

            三.語句和表達式

            花括號對齊方式

            建議行尾風格,不推薦次行風格

            塊語句空格

            if后的圓括號部分前后各有一個空格,例如:

            if (expr) {
                code
            }

            switch語句

            • 縮進:case與switch對齊,break縮進1級
            • case貫穿:用空行或注釋//falls through表明case貫穿是故意的
            • default:保留default或者用注釋//no default表明沒有default
            • </ul>

              P.S.《JavaScript語言精粹》的作者道格拉斯認為不應該用case貫穿(稱之為雞肋),因為極易引發bug,而尼古拉斯認為用空行或者注釋說明就好了

              with語句

              不用

              for循環

              所有變量都應該在函數體頂部聲明,包括for循環初始化部分用到的變量,避免hosting(提升)引發bug(可能會屏蔽全局變量)

              for-in循環

              不要用來遍歷數組,用的時候記得加上hasOwnProperty過濾,如果故意遍歷原型屬性,應該用注釋說明

              四.變量、函數、操作符

              變量聲明

              函數體 = 變量聲明 + 函數聲明 + 邏輯語句。用空行隔開各個部分

              函數聲明

              先聲明再使用,千萬不要把函數聲明放在if分支里,因為瀏覽器理解不同,而且ES沒給標準

              函數調用

              圓括號前后都不加空格,避免和塊語句混淆

              匿名函數立即執行

              把立即執行的匿名函數用圓括號包裹,避免與匿名函數聲明混淆

              嚴格模式

              不要在全局作用域開嚴格模式,只在函數內部開,給多個函數開可以用匿名函數立即執行限定嚴格模式的作用域

              判斷等于

              只用===和!==

              eval

              不用eval()和new Function(),用匿名函數優化setTimeout()和setInterval()

              基本包裝類型

              不要用new Boolean(), new String(), new Number()

              參考資料

              • 《Maintainable JavaScript》
              • 《JavaScript語言精粹》
              • </ul> 來源:黯羽輕揚

 本文由用戶 jopen 自行上傳分享,僅供網友學習交流。所有權歸原作者,若您的權利被侵害,請聯系管理員。
 轉載本站原創文章,請注明出處,并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺,歡迎各類分享!