JS代碼風格指南

8gw234 10年前發布 | 12K 次閱讀 風格 JavaScript開發

一.基本格式

  1. 縮進

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

  2. 分號

    不要省略分號，防止ASI（自動插入分號）錯誤

  3. 行寬

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

  4. 斷行

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

  5. 空行

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

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

  6. 命名

    • 變量名/函數名：Camel（駝峰）規則，首詞首字母小寫，后續詞首字母大寫，其余部分小寫

    • 常量名：C語言式，全大寫，下劃線分詞

    • 構造函數：Pascal規則，所有詞首字母大寫，其余部分小寫

  7. 字面量

    • 字符串：雙引號包裹，斷行用[+]操作符，不要用\轉義字符

    • 數值：不要省略小數點前后的部分，不要用八進制形式

    • Null：只把null當作Object的占位符，不要用來檢測形參，也不要用來檢測未初始化的變量

    • Undefined：應該把所有對象都初始化為null，以區分未定義和未初始化

    • 對象字面量/數組字面量：不要用構造函數方式聲明對象和數組

二.注釋

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.

  1. 單行注釋

    • 行尾：用1級縮進隔開代碼，而且//后面要有一個空格

    • 獨占一行：用來注釋下面，要與被注釋的代碼保持相同的縮進

    • 行首：用來注釋多行代碼

      • </ul> </li>

    • 多行注釋

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

      code
      

      /*
      

        

      • comment line1
        • 

      • comment line2
*/</pre>       </div>

         <p>
     注意：
 </p>
 <ul>
     <li>
         <p>
             多行注釋上方留一個空行
         </p>
     </li>
     <li>
         <p>
             *星號后面留一個空格
         </p>
     </li>
     <li>
         <p>
             多行注釋至少三行（因為第一行和最后一行后面不加注釋）
         </p>
     </li>
 </ul>

        
 </li>
 
      • 

         <p>
     在哪里添注釋
 </p>
 <ul>
     <li>
         <p>
             不能自解釋的代碼
         </p>
     </li>
     <li>
         <p>
             故意的，但看起來像是有錯的地方
         </p>
     </li>
     <li>
         <p>
             針對瀏覽器的hack
         </p>
     </li>
 </ul>

        
 </li>
 
      • 

         <p>
     文檔注釋
 </p>
 <p>
     應該給各個函數添注釋，包括功能描述、參數、返回值、拋出的錯誤等等，例如推薦的Eclipse風格：
 </p>
 <div>

        

        /**
        • 

      • 添加指定元素到默認數組
        • 

      • 

      • @method add
        • 

      • @param {Number} 將要添加的元素
        • 

      • @return {Boolean} 添加成功/失敗
        • 

      • @throw {TypeError} 參數類型不匹配
*/
function add(item){
 if(typeof item === "number"){

         arr.push(item)

        
 }
 else{

         throw new TypeError();

        
 }
}</pre>         </div>
 </li>
</ol>

        
 三.語句和表達式
        

          
 
        1. 

           <p>
     花括號對齊方式
 </p>
 <p>
     建議行尾風格，不推薦次行風格
 </p>

          
 </li>
 
        2. 

           <p>
     塊語句空格
 </p>
 <p>
     if后的圓括號部分前后各有一個空格，例如：
 </p>
 <div>

          

          if (expr) {
 code
}
                   </div>
 </li>
 
        3. 

           <p>
     switch語句
 </p>
 <ul>
     <li>
         <p>
             縮進：case與switch對齊，break縮進1級
         </p>
     </li>
     <li>
         <p>
             case貫穿：用空行或注釋//falls through表明case貫穿是故意的
         </p>
     </li>
     <li>
         <p>
             default：保留default或者用注釋//no default表明沒有default
         </p>
     </li>
 </ul>
 <p>
     P.S.《JavaScript語言精粹》的作者道格拉斯認為不應該用case貫穿（稱之為雞肋），因為極易引發bug，而尼古拉斯認為用空行或者注釋說明就好了
 </p>

          
 </li>
 
        4. 

           <p>
     with語句
 </p>
 <p>
     <em>不用</em> 
 </p>

          
 </li>
 
        5. 

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

          
 </li>
 
        6. 

           <p>
     for-in循環
 </p>
 <p>
     <em>不要</em>用來遍歷數組，用的時候記得加上hasOwnProperty過濾，如果故意遍歷原型屬性，應該用注釋說明
 </p>

          
 </li>
</ol>

          
 四.變量、函數、操作符
          

            
 
          1. 

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

            
 </li>
 
          2. 

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

            
 </li>
 
          3. 

             <p>
     函數調用
 </p>
 <p>
     圓括號前后都<em>不加</em>空格，避免和塊語句混淆
 </p>

            
 </li>
 
          4. 

             <p>
     匿名函數立即執行
 </p>
 <p>
     把立即執行的匿名函數用圓括號包裹，避免與匿名函數聲明混淆
 </p>

            
 </li>
 
          5. 

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

            
 </li>
 
          6. 

             <p>
     判斷等于
 </p>
 <p>
     只用===和!==
 </p>

            
 </li>
 
          7. 

             <p>
     eval
 </p>
 <p>
     <em>不用</em>eval()和new Function()，用匿名函數優化setTimeout()和setInterval()
 </p>

            
 </li>
 
          8. 

             <p>
     基本包裝類型
 </p>
 <p>
     <em>不要</em>用new Boolean(), new String(), new Number()
 </p>

            
 </li>
</ol>

            
 參考資料
            

              
 
            • 

               <p>
     《Maintainable JavaScript》
 </p>

              
 </li>
 
            • 

               <p>
     《JavaScript語言精粹》
 </p>

              
 </li>
</ul>
              
 來自：http://www.cnblogs.com/ayqy/p/4457470.html
              •
       本文由用戶 8gw234 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
       轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
       本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

相關經驗

相關資訊

相關文檔