[前端開發]--分享個人習慣的命名方式
如果說電腦科學只存在兩個難題：快取失效和命名。那麼我就覺得命名的難點只有兩個：詞彙量和堅持貫徹執行制定的規範。
最近在知乎上看到這個： ofollow,noindex">作為程式員，有沒有讓你感到既無語又崩潰的程式命名？ 。頓時感慨萬千，因為命名對於程式設計師來說是就是一個難題，有時候因為命名，可能會引起別人的誤導，疑惑等，對開發效率，專案的質量影響可大可小。今天，也分享下最近自己在使用的命名習慣，當然只是個人習慣。更希望能在評論區看到大家推薦的命名方式，互相學習，交流。
關於整篇內容，主要提及兩個：
1.如何寫出讓別人容易讀懂的命名
2.針對不同的物件，使用物件命名的格式
2.盤點那些難以讀懂的命名
首先，先盤點下有哪些命名的一些方式是很難讓別人讀懂的。這些情況，大家看到就應該在開發上儘量避免下。
2-1.單詞拼寫錯誤
舉個例子
//提交表單（把 Form 寫成了 From ）
submitFrom(){...}
複製程式碼
之前寫文章也有說過，單詞拼寫正確可以說是一個底線了。如果單詞拼寫錯誤，比如 from 和 form 都是正確的單詞，但完全不一樣的意思，如果把 from 寫成 form ，以後讀程式碼的人（也可能是你自己），很有可能會懵逼。
2-2.中英文混用
單詞拼寫錯誤會誤導別人，中英文混用這個命名方式就可以說讓人云裡霧裡的感覺，不會誤導，只會看不懂。
比如下面
let chanpinList=[]; 複製程式碼
這個變數名，一開始不知道是什麼，註釋也沒有，完全懵逼。後來看了需求，才知道這個的意思是：產品列表。
2-3.以1-9，a-z命名
這個情況相信大家都會遇到過，比如頁面上有幾個按鈕，有人命名成 btn1，btn2，btn3，btn4...。或者 btnA，btnB，btnC，btnD。這樣的命名看似簡單，但實際上從這些命名裡面讀取不到任何資訊，以後會可能會痛苦些。
2-4.混用命名格式
這個可以說沒那麼可恨，但是看著就彆扭，比如表示評論列表，有地方這樣命名：comments，另一個地方這樣命名： comment-list，還有這樣命名： commentList。幾種規範混在一起，就感覺不規範了。
還用一種雖然一般不會出現的情況，也遇見了。比如一個地方有新增供應商的按鈕，命名是：addSupplier 。在另一個地方也有相同的功能按鈕，完全一樣，結果命名是：addSupplierInfo 。當時就以為這兩個不是同一個功能，造成了誤會。
2-5.強制中文拼音命名
有些名詞，被中國人創造出來（淘寶-taobao，微博-weibo），沒有英文翻譯的。就可以用中文拼音命名，其他的都建議用英文。
但是偏偏有時候就算有英文的單詞，有些人還是用中文拼音命名，比如一個文章列表，很多人就是沒用 articleList，直接寫 wenzhangliebiao。但是看的時候，一定會懵逼一會。
2-6.強制簡寫
簡介雖然可以讓命名看著更加的簡潔，但是有時卻會遇上強制簡寫的命名，比如一個函式是提交使用者評論資訊的功能。原本以為是：handleCommentSubmit/submitComment/publishComment。結果後來一看--tjyhpl。強制簡寫還是用拼音的簡寫，後來讓他改一下，改成了ac。後來一問才知道他想表達的意思是 addComment ，當時差點動手了。
2-7.單複數不分
這個情況不算惡劣，只算是一種規範吧，之前有分別有兩個操作函式，一個是下載全部訂單資料，一個是下載當前訂單資料。但是兩個函式的命名，一個是downloadOrderData，另一個是downloadOrder。這樣也產生了一點懵逼感。
面對這樣的情況，建議還是區分下單複數，downloadOrder，downloadOrderAll/downloadOrderList。區分了單複數的命名，如果有返回值，也可以讓別人大概知道，單數可能就是返回單個記錄，複數可能返回一個數組。
2-8.正反義詞錯用
這個情況同上，不算是惡劣，只能算是不規範。比如：分別有兩個操作函式一個是顯示彈窗，一個是關閉彈窗。結果命名上面，一個是 showEditDialog 。另一個是 closeEditDialog 。
上面的案例，show 和 close ，一個是顯示，一個是關閉，顯然不是正反義詞。應該出現的姿勢是，showEditDialog 和 hideEditDialog ，或者 openEditDialog 和 closeEditDialog
2-9.為所欲為的命名
還有其它的搞笑命名，在知乎上面看到的情況，別人遇到的情況。大家移步到知乎吧，這個不重複太多。
3.命名相關格式
說完了命名第一個，命名單詞應該正確的書寫之後。再來說下命名的相關格式在說自己的命名例項之前，先說下不同的命名物件，命名方式是不一樣的。具體如下：
| 待命名物件 | 推薦名稱 |
|---|---|
| 圖片 | 小寫字母，‘-’或者‘_’ 分割 |
| css（class,id） | ‘-’ 分割 |
| 檔案，變數 | 小駝峰命名 |
| js類（class） | 大駝峰命名 |
| 常量 | 大寫字母，‘_’ 分割 |
| 臨時變數，私有變數 | ‘_’ 開頭，駝峰命名 |
4.HTML命名
在說命名 HTML 命名之前，先說下佈局的三個概念：模組( module )和元件( unit )
模組：各種常見的網頁內容模組，通常可以重複使用的較大的整體，比如導航、選單、幻燈、圖文列表等。命名前面建議帶有 m-
元件：各種常見的網頁內容元件，比如按鈕、標題、輸入框等。命名前面建議帶有 u-
兩者關係，模組包含元件，元件組成模組。
小小例項
看到上面的一個小彈窗。整個彈窗，當成一個模組。可以把標題，提示內容，按鈕當做元件。HTML 程式碼就如下，CSS , JS 程式碼就不貼了。模組就帶 m- ，元件就帶 u-
<div class="m-alert"> <div class="m-box"> <div class="m-box-inner"> <div class="u-title">提示2</div> <div class="u-content">這裡是提示內容2</div> </div> <div class="m-box-buttons"> <span class="u-btn-success">確定</span> </div> </div> </div> 複製程式碼
至於這樣的寫法有什麼優劣，注意事項，這裡就不展開講了，以後再寫文章。
5.JavaScript命名
在js命名裡面，應該只有四種命名方式：小駝峰(productList)，大駝峰(ProductList)，大寫字元，下劃線分割（PRODUCT_LIST），下劃線開頭+小駝峰(_productList)
5-1.按照型別命名
5-1-1.小駝峰
在js寫法裡面，小駝峰命名應該是最多的一種。變數，函式一般而言都是使用小駝峰命名。
//登入處理函式
let handleLogin=function(){}
複製程式碼
5-1-2.大駝峰
在es6之前，js還沒有class的概念，但是也組織不了開發者模擬class。現在有了class，自然而然，class的命名規範就更離不開了。關於class的命名規範，應該很多人都是習慣用大駝峰命名。
//建立一個類
class Person{
//...
}
複製程式碼
5-1-3.常量
常量建議還是使用大寫字元+下劃線命名。
//配置最大金額 const PRICE_MAX=10000; 複製程式碼
5-1-4.私有變數
私有變數相對於外面作用域而言，為了區分變數是公用的，還是私有的。建議命名上面就做下區分，私有變數建議使用下劃線開頭+小駝峰命名方式。
let myObj={
name:'守候',
setName(){
//儲存當前的this
let _this=this;
setTimeOut(function(){
alert(_this.name)
},1000)
}
}
複製程式碼
5-2.按職責命名
函式命名，一般都是動詞開頭。
5-2-1.獲取值
如果函式是為了獲取值(函式最後會返回一個值的)，函式前面建議帶有get。
//根據 ID 獲取使用者資訊
function getUserInfo(id){
}
複製程式碼
5-2-2.設定值
如果函式是為了設定值(函式最後會返回一個值的)，函式執行就是為了給某一個變數賦值，函式前面建議帶有set。
//設定使用者資訊
function setUserInfo(){
}
複製程式碼
5-2-3.處理動作
如果函式是為了處理一些操作，比如登入，註冊，渲染列表等。那麼就建議命名前面帶有handle。
//分頁操作
handleChangeCurrent(val){
}
//註冊操作
handleRegister(){
}
複製程式碼
這個處理動作，有些開發者也是習慣直接以動作開始。openDialog，closeDialog等。
6.目錄，檔案，圖片命名
6-1目錄，檔名稱的命名規則
統一小駝峰命名法。
如下例子：
| 目錄，檔案 | 建議命名 |
|---|---|
| 首頁 | index，index.html |
| 搜尋頁面 | search，search.html |
| 產品列表 | productList，productList.html |
| 產品詳細頁面 | productDatail，productDatail.html |
| 新聞列表 | newslist，newslist.html |
| 新聞詳細頁面 | newsdetail，newsdetail.html |
| 評論列表 | commentList，commentList.html |
| 關於我們 | about，about.html |
如果發現名稱過長，可以在團隊約定好簡寫格式：比如 product 簡寫成 pro 。
6-2圖片命名規範
如果是通用性質的圖片，例如LOGO，選單，側邊欄，背景等，就直接使用小寫字母命名。比如：logo.jpg ，menu.jpg，aside.jpg，bg.jpg。
如果不是通用的圖片，就建議根據 類別-模組-功能 的格式。使用小寫字母，‘-’或者‘_’分割，如下例子：
| 圖片名稱 | 意義 |
|---|---|
| btn-submit-comment.jpg | 提交評論的按鈕 |
| bg-product-list.jpg | 產品列表模組的背景 |
| icon-views.png | 瀏覽數的圖示 |
| icon-btn-vote.png | 投票按鈕 |
| ad-news-aside.jpg | 在新聞側邊欄的廣告圖片 |
7.參考資料
8.小結
關於命名，很簡單，也很難。也是困擾著很多的開發者，包括我。該文章的命名方式，也是我在用的一種個人命名方式，希望能讓大家有所收穫。當然其中還有很多的瑕疵，希望大家多多指點，或者推薦下自己建議的命名方式。
關於命名的規範，每個公司都有自己的編碼規範，只是很少公司能認真貫徹執行自己的規範，從而導致命名錯亂。所以命名的難點，我不認為是命名本身有難度，難度在於在專案上，面對各種需要命名的物件，堅持使用一套命名格式，正確的命每一個名。
-------------------------華麗的分割線--------------------
想了解更多，和我交流，內推職位，請新增我微信。或者關注我的微信公眾號：守候書閣
