【騰訊前端代碼規範】DevelopmentCodes

Web技術中心代碼規範

前言

軟件的長期價值直接源於其編碼質量。在它的整個生命週期裏，一個程序可能會被許多人閱讀或修改。若是一個程序能夠清晰的展示出它的結構和特徵，那就能減小在之後對其進行修改時出錯的可能性，編程規範能夠幫助程序員們增長程序的健壯性。基本全部的前端代碼都是暴露給公衆的，因此咱們更應該保證其質量。

規範理念

Any violation to this guide is allowed if it enhances readability. 全部的代碼都要變成可供他人容易閱讀的。 --引用自Dojo Javascript 語法規範

規範詳解

JS命名規範 1 必須使用 Tab 鍵進行代碼縮進，以節約代碼大小，建議設置編輯器的tab爲4個空格的寬度（而不是4個空格） 2 接口風格 結構 規則 例如 類 駝峯式 ModuleClass() 公有方法 混合式 getPosition() 公有變量 混合式 frameStyle 常量 大寫式 DEFAULT_FRAME_LAYOUT 3 其餘建議風格，非必要 結構 規則 公有方法和屬性 混合，例子：mixedCase 私有方法和屬性 混合，例子：_mixedCase 方法（method）參數 混合，例子：mixedCase 本地（local）變量 混合，例子：mixedCase 4 全部語句結束後，必須使用 ; 號結束 5 全部變量必須是有意義的英文，嚴厲禁止拼音 6 變量容許使用公認英文縮寫 7 類命名必須是駝峯式 8 常量必須全部單詞大寫，而且每一個單詞間加下劃線 9 枚舉類型時，枚舉的命名必須有意義，枚舉與枚舉成員必須以駝峯式 10 常量和枚舉必須在最前端定義，merge 時注意，必須把常量與枚舉定義的文件放在文件列表的第一位 11 變量內的簡寫單詞若是在開頭則全小寫：xmlDocument，若是不在開頭則全大寫：loadXML！！！ 12 "on"只能用做事件的命名 13 函數開頭必須是有意義的動詞或動詞短語 14 私有類的變量屬性成員 建議 使用混合式命名，並前面下下劃線 15 臨時的全局變量放到一個全局的哈希表裏，方便變量回收 16 全部全局變量必須初始化，儘可能少用全局變量 17 大括號前面不能有換行符 18 保留字以及特有的dom屬性不能做爲變量名 特殊命名約定 19 前面加 「is」 的變量名應該爲布爾值，亦可以使用 「can」 「has」 「should」 20 前面加 」str」 的變量名應該爲字符串 21 前面加 「arr」 的變量名應該爲數組 22 前面加 「num」 或 「count」 的變量名應該爲數字 23 「o」 做爲局部變量或參數，表示爲Object 24 「e」 做爲局部變量或參數，表示爲Element 25 「evt」 做爲局部變量或參數，表示爲event 26 「err」 做爲局部變量或參數，表示爲error 27 重複變量建議使用 "i", "j", "k" （依次類推）等名稱的變量(全世界公認) 28 能縮寫的單詞儘可能縮寫 29 避免產生使人誤解的布爾值 isNotNumber isNan 30 處理錯誤的變量，必須在後面跟着 「Error」 31 初始化用的函數 必須使用 「init」 開頭，若是一個頁面只有初始化能夠單獨使用 init() 32 儘可能作有意義的代碼折行，不要讓一行代碼過長。(HTML 字符串除外) 33 操做符 建議 使用空格隔開 34 函數調用和方法 避免 使用空白 35 逗號（,） 建議 使用空白隔開。 36 不容許頻繁使用 previousSibling 和 nextSibling 詞法結構 37 普通代碼段應該看起來以下： while(!isDone){ doSomething(); isDone = moreToDo(); } 38 變量定義方法以下： var a = null, b = 1, c = 0; 39 函數定義方法以下： var funcA = function(){ var a = 0; ... } 40 if 語句應該看起來像這樣： if(someCondition){ statements; }else if(someOtherCondition){ statements; }else{ statements; } 41 for 語句應該看起來像這樣： for(initialization; condition; update){ statements; } 42 while 語句應該看起來像這樣： while(!isDone){ doSomething(); isDone = moreToDo(); } 43 do ... while 語句應該看起來像這樣： do{ statements; }while(condition); 44 switch 語句應該看起來像這樣： switch(condition){ case "A": statements; //註釋 case "B": statements; break; default: statements; break; } 45 try ... catch 語句應該看起來像這樣： try{ statements; }catch(ex){ statements; }finally{ statements; } 46 單行的 if - else，while 或者 for 語句也必須加入括號： if(condition){ statement; } while(condition){ statement; } for(intialization; condition; update){ statement; }

註釋規範 47 一些你不打算給其餘人使用的函數，建議添加 @ignore 讓文檔輸出時能夠忽略這段註釋 48 一些相關的功能相關的函數，建議加上@see Function 來對上下文作索引 49 對於一些函數不建議或則須要注意的使用方法，必須加上 @deprecated做爲提醒 50 每一個js文件的文件頭都必須包含 @fileoverview @author, 建議加上@version 51 每一個函數都必須使用JsDoc 來註釋他的用意 52 每一個帶參數的函數必須包含 @param 53 每一個有返回值的函數必須包含 @return 54 構造函數必須加上 @constructor 55 繼承函數建議加上 @base 表示其繼承於哪一個類 56 經常使用全局變量建議使用 JsDoc 的註釋方式 57 通常的變量及局部變量才用 // 方式進行註釋，建議在須要作註釋的語句的上一行 58 其餘詳情請參考 JsDoc 註釋方法 其餘 59 String 優化 循環體內的字符串累加使用join方式。 例如: var r= []; for (var i=0;i<100;i++){ r.push("hello"); } var k= r.join(""); 60 Switch 建議採用hash-table switch 能夠才用 Object代替 例如: var a= { "1":doAction1, "2":doAction2, } function doAction1(){ }

function doAction2(){
}
a[1]();

61 不建議使用eval 不推薦使用eval來執行腳本。除非用來解釋已經肯定安全的json數據。 62 不要使用Function構造器。 63 不要給setTimeout或者setInterval傳遞字符串參數。 64 注意 IE 的內存泄露問題 65 JavaScript代碼獨立 Javascript不該該被包含在HTML文件中,除非這是段特定只屬於此部分的代碼。在HTML中的JavaScript代碼會明顯增長文件大小，並且也不能對其進行緩存和壓縮。

CSS命名規範 1 id和class命名採用該版塊的英文單詞或組合命名，並第一個單詞小寫，第二個單詞首個字母大寫，如：newRelease（最新產品/new+Release) 2 CSS樣式表各區塊用註釋說明 3 儘可能使用英文命名原則 4 不用加中槓 5 儘可能不縮寫，除非一看就明白的單詞 通過組員激烈的討論後，你們都比較偏向的命名方法以下： ID：統一採用駝峯式 ：　單字之間不以空格斷開（例：camel case）或鏈接號（-，例：camel-case）、底線（_，例：camel_case）連結， Class 命名法：駝峯式或下劃線 常見的CSS命名規則以下： 主要的 mian.css 模塊 module.css 基本共用 base.css 佈局，版面 layout.css 主題 themes.css 專欄 columns.css 文字 font.css 表單 forms.css 補丁 mend.css 打印 print.css 頭：header 內容：content/container 尾：footer 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制總體佈局寬度：wrapper 左右中：left right center 登陸條：loginbar 標誌：logo 廣告：banner 頁面主體：main 熱點：hot 新聞：news 下載：download 子導航：subnav 菜單：menu 子菜單：submenu 搜索：search 友情連接：friendlink 頁腳：footer 版權：copyright 滾動：scroll 內容：content 標籤頁：tab 文章列表：list 提示信息：msg 小技巧：tips 欄目標題：title 加入：joinus 指南：guild 服務：service 註冊：regsiter 狀態：status 投票：vote 合做夥伴：partner (二)註釋的寫法: /* Footer / 內容區 / End Footer */ (三)id的命名: (1)頁面結構 容器: container 頁頭：header 內容：content/container 頁面主體：main 頁尾：footer 導航：nav 側欄：sidebar 欄目：column 頁面外圍控制總體佈局寬度：wrapper 左右中：left right center (2)導航 導航：nav 主導航：mainbav 子導航：subnav 頂導航：topnav 邊導航：sidebar 左導航：leftsidebar 右導航：rightsidebar 菜單：menu 子菜單：submenu 標題: title 摘要: summary (3)功能 標誌：logo 廣告：banner 登錄：login 登陸條：loginbar 註冊：regsiter 搜索：search 功能區：shop 標題：title 加入：joinus 狀態：status 按鈕：btn 滾動：scroll 標籤頁：tab 文章列表：list 提示信息：msg 當前的: current 小技巧：tips 圖標: icon 註釋：note 指南：guild 服務：service 熱點：hot 新聞：news 下載：download 投票：vote 合做夥伴：partner 友情連接：link 版權：copyright (四)class的命名: (1)顏色:使用顏色的名稱或者16進制代碼,如 <!-- lang: css --> .red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; } （2）字體大小,直接使用」font+字體大小」做爲名稱,如 <!-- lang: css --> .font12px { font-size: 12px; } .font9pt {font-size: 9pt; } (3)對齊樣式,使用對齊目標的英文名稱,如 <!-- lang: css --> .left { float:left; } .bottom { float:bottom; } (4)標題欄樣式,使用」類別+功能」的方式命名,如

<!-- lang: css -->
.barnews { }    
.barproduct { }