1. 程式人生 > >前端編碼規範 -- 通用篇

前端編碼規範 -- 通用篇

好的 空格 lint 重要 body 單詞 分隔符 ges win

前言

本系列意在增強團隊的開發協作,提高代碼質量和打造開發基石的編碼風格規範。

我們知道,當一個團隊開始指定並實行編碼規範的話,錯誤就會變得更加顯而易見。如果一段特定的代碼不符合規範的話,它有可能只是代碼風格錯誤,而也有可能會是bug。早期指定規範就使得代碼審核得以更好的開展,並且可以更精確的地定位到錯誤。只要開發者們能夠保證源代碼源文件都嚴格遵循規範,那接下去所使用的混淆、壓縮和編譯工具則可投其所好不盡相同。

不管有多少人共同參與同一項目,一定要確保每一行代碼都像是同一個人編寫的。

文件/資源命名

1、項目名全部采用小寫方式,以中劃線分隔,禁止駝峰式命名,禁止包含特殊符號,比如空格、$等

在 web 項目中,所有的文件名應該都遵循同一命名約定。以可讀性而言,中劃線(-)

是用來分隔文件名的不二之選。同時它也是常見的URL分隔符(/images/big-black-background.jpg),所以理所當然的,減號應該也是用來分隔資源名稱的好選擇。

請確保文件命名總是以字母開頭而不是數字。而以特殊字符開頭命名的文件,一般都有特殊的含義與用處。

資源的字母名稱必須全為小寫,這是因為在某些對大小寫字母敏感的操作系統中,當文件通過工具壓縮混淆後,或者人為修改過後,大小寫不同而導致引用文件不同的錯誤,很難被發現。

還有一些情況下,需要對文件增加前後綴或特定的擴展名(比如.min.js,.min.css),抑或一串前綴(比如 3fa89b.main.min.css)。這種情況下,建議使用點分隔符

來區分這些在文件名中帶有清晰意義的元數據。

//不建議      ->  推薦寫法
MyScript.js     ->   my-script.js
myCamelCaseName.css     ->  my-camel-case-name.css
i_love_underscores.html     ->  i-love-underscores.html
1001-scripts.js     ->  thousand-and-one-scripts.js
my-file-min.css     ->  my-file.min.css

2、有復數結構時,要采用復數命名法,如: scripts, styles, images, data-models。

3、為更好的表達語義,文件名使用英文名詞命名,或英文簡寫。多個單詞組成時,采用中劃線連接方式。

4、不允許命名帶有廣告等英文的單詞,例如ad,adv,adver,advertising,防止該模塊被瀏覽器當成垃圾廣告過濾掉。

註釋

註釋是你自己與你的小夥伴們了解代碼寫法和目的的唯一途徑。特別是在寫一些看似瑣碎的無關緊要的代碼時,由於記憶點不深刻,註釋就變得尤為重要了。

編寫自解釋代碼只是一個傳說,沒有任何代碼是可以完全自解釋的。而代碼註釋,則是永遠也不嫌多。

當你寫註釋時一定要註意:不要寫你的代碼都幹了些什麽,而要寫你的代碼為什麽要這麽寫,背後的考量是什麽。當然也可以加入所思考問題或是解決方案的鏈接地址。

//不推薦
var offset = 0;

if(includeLabels) {
  // Add offset of 20
  offset = 20;
}


//推薦
var offset = 0;
 
if(includeLabels) {
  // If the labels are included we need to have a minimum offset of 20 pixels
  // We need to set it explicitly because of the following bug: http://somebrowservendor.com/issue-tracker/ISSUE-1
  offset = 20;
}

一些註釋工具可以幫助你寫出更好的註釋。JSDocYUIDoc 就是用來寫 JavaScript 註釋用的。你甚至可以使用工具來為這些註釋生成文檔,這也是激勵開發者們寫註釋的一個好方法,因為一旦有了這樣方便的生成文檔的工具,他們通常會開始花更多時間在註釋細節上。

代碼檢查

對於比較寬松自由的編程語言來說,嚴格遵循編碼規範和格式化風格指南就顯得極為重要。

對於 JavaScript,建議使用 JSLintJSHint

如果不當或者補充請多多指教!

前端編碼規範 -- 通用篇