程式設計小技巧(三)-------前端編碼規範
年末了最近在整理檔案,順手寫了一套編碼規範,來源於工作和習慣。雖然程式設計師多不勝數,但是不是每一個程式設計師都寫的一手好程式碼,不論邏輯,單是看上去就沒有讓人讀的慾望。寫程式碼跟寫書寫文件一樣,簡單整潔易明瞭是通用的原則,接觸前端已經四個月,好死不死還是寫了不少的程式碼,爬過的坑,吐過的血沒有幾升也有幾斤。做一個優秀的程式設計師從寫的一手好的程式碼開始;寫的一手好程式碼從遵守一個好的規則開始。
==================================================================================================以下是正文:
通用規範:
命名規範:
專案:
全部採用英文 ,小寫方式命名,以下劃線分割。my_project_name
目錄:
英文,小寫,下劃線分割,負數結構時要採用複數命名法。scripts,data_models
js檔案:
同項目命名規則。account_model.js
CSS/SCSS檔案:
同項目命名規則。retina_sprites.scss
HTML檔案:
同項目命名規則。error_report.html
註釋規範:
CSS/SCSS註釋:
註釋統一採用‘/* */’
縮排與下一行保持一致
可位於一個程式碼行的末尾,與程式碼間隔一個空格
Javastript註釋
單行註釋
雙斜線後,必須跟一個空格;
縮排與下一行程式碼保持一致;
可位於一個程式碼行的末尾,與程式碼間隔一個空格。
多行註釋
最少三行,‘*’後跟一個空格,在難以理解的程式碼段、可能存在錯誤的程式碼段、業務邏輯強相關的程式碼
文件註釋:
專案管理規範
關於程式碼提交
每天下班前提交當日程式碼
關於程式碼修改
-
-
- 若只是小幅度修改,則不寫註釋
- 若大範圍修改或者功能性的修改,應當提交作者註釋,並說明修改內容
- 若修改範圍過多過大時應重新建立js,並做相應的說明
-
關於程式碼編寫
-
-
- 遵循最小,最簡化原則
- 儘量將HTML、JS、CSS檔案分開編寫,不要在HTML標籤中巢狀CSS規則
- 程式碼應有簡明易懂的註釋,不要一個檔案一點註釋都沒
-
介面規範
介面文件
介面描述:
介面英文名稱:
介面請求方式:
請求URL:
請求引數:
欄位:類的屬性
說明:中文釋義
型別:屬性型別(String、Number、Object、Array)
是否必須:是/否
備註:
返回引數:
專項規範:
HTML規範:
- 在屬性上使用雙引號
- 屬性名小寫,用中劃線分割
- 在頁面開頭因採用<!DOCTYPE html>宣告,同時規定頁面的lang屬性
- 字元編碼通常是'UTF-8'
- 引入CSS和JS不需要指明type
- 儘量減少標籤數量,以利於重構和迭代
Javastript規範
- 最外層引用統一使用單引號
- 標準的變數命名採用駝峰式命名
- ‘ID’、‘URL’在變數名中大寫
- 常量名因大寫,用下劃線連線
- jquery物件必須以‘$’開頭命名
- 一個函式作用域中所有的變數宣告儘量提到函式首部
CSS/SCSS規範
- 每個屬性末尾都要新增分號
- 註釋'/*'後和'*/'前要新增空格
- 每個屬性獨佔一行
- 最外層統一使用雙引號
- url內容要用引號
- 屬性選擇器中的屬性值需要引號
- 涉及類名均使用小寫字母,id屬性採用駝峰式命名
- 應對屬性宣告進行分組,組之間留下空行
- 顏色屬性採用16進位制用小寫字母,能簡寫的則簡寫
- 介面中不允許有空的規則,儘量少用' *'選擇器
- 不要在一個檔案裡出現兩個相同的規則
- 屬性值0後不要加單位