JavaScript命名規範基礎及系統注意事項
阿新 • • 發佈：2018-11-26
| 前端程式碼中的自定義變數命名 | ||
| 命名方法： | ||
| 1.駝峰 2.下劃線連線 | ||
| 對於檔名，我們一般採用小寫字母+下劃線的形式 | ||
| 為什麼？因為在window下aa.txt和AA.txt系統認為是同一個的檔案，而在linux環境下則認為是2個不同的檔案，為了使我們程式碼移植性更好以及為了避免一些不必要的麻煩建議檔名必須小寫； |
||
| 對於js又有以下一些規則： | ||
| A：普通變數名 | ||
| 1.以變數首字母突出這個變數的型別(我叫她首字母標記型別法)； | ||
| 如： | ||
| 定義多個學生陣列 let aStudent = ['shiyue', 'ansheng']; |
||
| 定義一個學生物件 let oStudent = { name: 'xx' }； | ||
| 定義學生的名字 let sName = 'HanMeimei'; | ||
| 2.在變數末尾突出這個變數型別(我叫她變數末尾比較型別法, 我自己比較喜歡這種)； | ||
| 如： | ||
| 2.1 駝峰命名 | ||
| 定義多個學生陣列 let studentAry = ['shiyue', 'ansheng']; | ||
| 定義一個學生物件 let studentObj = { name: 'xx' }； | ||
| 定義學生的名字 let name = 'HanMeimei'; | ||
| 2.2 下劃線命名 | ||
| 定義多個學生陣列 let student_ary = ['shiyue', 'ansheng']; | ||
| 定義一個學生物件 let student_obj = { name: 'xx' }； | ||
| 定義學生的名字 let name = 'HanMeimei'; | ||
| B: 函式變數名 | ||
| 函式名推薦採用駝峰命名 | ||
| 如： | ||
| 獲取學生姓名的方法： let getName = function(){} ---方式1 | ||
| 可能有人會這樣定義： let getStudentName = function(){} ---方式2 | ||
| 這2種方式哪個更好呢？ | ||
| 如果這個指令碼或者說這個檔案中有獲取學生姓名和獲取老師姓名2個需求，那我覺得方式2更合適，如果只有獲取學生姓名這1個需求，那方式1更簡單合適； | ||
| 獲取學生這個物件： let getStudent = function(){} | ||
| 因為student就是1個物件，所以我們不需要寫成getStudentObj，閱讀我們程式碼的人也能一目瞭然的想到這是獲取學生物件； | ||
| C: 事件監聽函式命名 | ||
| 事件監聽函式命名建議採用onXXX開頭的駝峰式命名 | ||
| 如： | ||
| 監聽一個下拉選擇元件的change事件： let onSelectChange = function(e){...} | ||
| 當一個頁面中需要註冊多個下拉選擇元件的change事件時我們又該如何定義？ | ||
| 這個時候直接寫onSelectChange顯然不太合適了， | ||
| 如篩選條件中 學生物件的改變； 性別的改變 | ||
| onStudentChange(){} | ||
| onSexChange(){} | ||
| ！important | ||
| D：關於變數名的簡寫 | ||
| 很多時候我們的變數名需要多個單詞拼接，但是我們又不想讓這個變數名太長，很難取捨 | ||
| 如： | ||
| 定義未讀訊息條數，我看到有人是這樣定義的 let notRead = 0; | ||
| 顯然這個變數很糟糕， 首先否定修飾很多時候只需要在單詞前面加上un, 比如我們js中的defined <-> undefined，其次，我們在定義記數相關時一般都會使用count | ||
| let unReadCount = 0; ---方式1 | ||
| let notRead = 0; ---方式2 | ||
| 顯然方式1更優雅，一看就知道是個數量的定義，而方式2更像是一個未讀的Flag標記，很難讓人直接和未讀條數聯絡起來； | ||
| E: 邏輯關係 | ||
| 如： | ||
| 在vue中定義一個是否顯示的標記： v-if="isShow" | ||
| isShow是true就是顯示，false就是隱藏，這樣我們的程式碼邏輯就會很清晰； | ||
| 現在我們看2個很糟糕的例子： | ||
| 同樣是在vue中定義是否顯示的標記： | ||
| v-if="isHide" | ||
| v-if="!isHide" | ||
| 這2中方式都不好，我們的原則就是能避免使用否定的就儘量不要使用否定，不管單個否定還是雙向否定，總之正向的邏輯會更清晰； | ||
| 要洗澡睡覺了，對於css樣式的命名下一篇再介紹 |