JavaScript命名規範基礎及系統註意事項
阿新 • • 發佈：2018-11-27
2個 flag 類型 而在 末尾 name 變量名 data- 以及
| 前端代碼中的自定義變量命名 | ||
| 命名方法： | ||
| 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樣式的命名下一篇再介紹 |
JavaScript命名規範基礎及系統註意事項