1.前言
如果說計算機科學(xué)只存在兩個難題：緩存失效和命名。那么我就覺得命名的難點只有兩個：詞匯量和堅持貫徹執(zhí)行制定的規(guī)范。
最近在知乎上看到這個：作為程序員，有沒有讓你感到既無語又崩潰的程序命名？。頓時感慨萬千，因為命名對于程序員來說是就是一個難題，有時候因為命名，可能會引起別人的誤導(dǎo)，疑惑等，對開發(fā)效率，項目的質(zhì)量影響可大可小。今天，也分享下最近自己在使用的命名習(xí)慣，當(dāng)然只是個人習(xí)慣。更希望能在評論區(qū)看到大家推薦的命名方式，互相學(xué)習(xí)，交流。
關(guān)于整篇內(nèi)容，主要提及兩個：
1.如何寫出讓別人容易讀懂的命名
2.針對不同的對象，使用對象命名的格式
2.盤點那些難以讀懂的命名
首先，先盤點下有哪些命名的一些方式是很難讓別人讀懂的。這些情況，大家看到就應(yīng)該在開發(fā)上盡量避免下。
2-1.單詞拼寫錯誤
舉個例子
//提交表單（把 Form 寫成了 From ）submitFrom(){...}復(fù)制代碼
之前寫文章也有說過，單詞拼寫正確可以說是一個底線了。如果單詞拼寫錯誤，比如 from 和 form 都是正確的單詞，但完全不一樣的意思，如果把 from 寫成 form ，以后讀代碼的人（也可能是你自己），很有可能會懵逼。
2-2.中英文混用
單詞拼寫錯誤會誤導(dǎo)別人，中英文混用這個命名方式就可以說讓人云里霧里的感覺，不會誤導(dǎo)，只會看不懂。
比如下面
letchanpinList=[];復(fù)制代碼
這個變量名，一開始不知道是什么，注釋也沒有，完全懵逼。后來看了需求，才知道這個的意思是：產(chǎn)品列表。
2-3.以1-9，a-z命名
這個情況相信大家都會遇到過，比如頁面上有幾個按鈕，有人命名成? btn1，btn2，btn3，btn4...?；蛘?btnA，btnB，btnC，btnD。這樣的命名看似簡單，但實際上從這些命名里面讀取不到任何信息，以后會可能會痛苦些。
2-4.混用命名格式
這個可以說沒那么可恨，但是看著就別扭，比如表示評論列表，有地方這樣命名：comments，另一個地方這樣命名： comment-list，還有這樣命名： commentList。幾種規(guī)范混在一起，就感覺不規(guī)范了。
還用一種雖然一般不會出現(xiàn)的情況，也遇見了。比如一個地方有添加供應(yīng)商的按鈕，命名是：addSupplier 。在另一個地方也有相同的功能按鈕，完全一樣，結(jié)果命名是：addSupplierInfo 。當(dāng)時就以為這兩個不是同一個功能，造成了誤會。
2-5.強制中文拼音命名
有些名詞，被中國人創(chuàng)造出來（淘寶-taobao，微博-weibo），沒有英文翻譯的。就可以用中文拼音命名，其他的都建議用英文。
但是偏偏有時候就算有英文的單詞，有些人還是用中文拼音命名，比如一個文章列表，很多人就是沒用 articleList，直接寫 wenzhangliebiao。但是看的時候，一定會懵逼一會。
2-6.強制簡寫
簡介雖然可以讓命名看著更加的簡潔，但是有時卻會遇上強制簡寫的命名，比如一個函數(shù)是提交用戶評論信息的功能。原本以為是：handleCommentSubmit/submitComment/publishComment。結(jié)果后來一看--tjyhpl。強制簡寫還是用拼音的簡寫，后來讓他改一下，改成了ac。后來一問才知道他想表達(dá)的意思是 addComment ，當(dāng)時差點動手了。
2-7.單復(fù)數(shù)不分
這個情況不算惡劣，只算是一種規(guī)范吧，之前有分別有兩個操作函數(shù)，一個是下載全部訂單數(shù)據(jù)，一個是下載當(dāng)前訂單數(shù)據(jù)。但是兩個函數(shù)的命名，一個是downloadOrderData，另一個是downloadOrder。這樣也產(chǎn)生了一點懵逼感。
面對這樣的情況，建議還是區(qū)分下單復(fù)數(shù)，downloadOrder，downloadOrderAll/downloadOrderList。區(qū)分了單復(fù)數(shù)的命名，如果有返回值，也可以讓別人大概知道，單數(shù)可能就是返回單個記錄，復(fù)數(shù)可能返回一個數(shù)組。
2-8.正反義詞錯用
這個情況同上，不算是惡劣，只能算是不規(guī)范。比如：分別有兩個操作函數(shù)一個是顯示彈窗，一個是關(guān)閉彈窗。結(jié)果命名上面，一個是 showEditDialog 。另一個是 closeEditDialog 。
上面的案例，show 和 close ，一個是顯示，一個是關(guān)閉，顯然不是正反義詞。應(yīng)該出現(xiàn)的姿勢是，showEditDialog 和 hideEditDialog ，或者 openEditDialog 和 closeEditDialog
2-9.為所欲為的命名
還有其它的搞笑命名，在知乎上面看到的情況，別人遇到的情況。大家移步到知乎吧，這個不重復(fù)太多。
3.命名相關(guān)格式
說完了命名第一個，命名單詞應(yīng)該正確的書寫之后。再來說下命名的相關(guān)格式在說自己的命名實例之前，先說下不同的命名對象，命名方式是不一樣的。具體如下：
待命名對象推薦名稱
圖片小寫字母，‘-’或者‘_’ 分割
css（class,id）‘-’ 分割
文件，變量小駝峰命名
js類（class）大駝峰命名
常量大寫字母，‘_’ 分割
臨時變量，私有變量‘_’ 開頭，駝峰命名
4.HTML命名
在說命名 HTML 命名之前，先說下布局的三個概念：模塊( module )和元件( unit )
模塊：各種常見的網(wǎng)頁內(nèi)容模塊，通?？梢灾貜?fù)使用的較大的整體，比如導(dǎo)航、菜單、幻燈、圖文列表等。命名前面建議帶有m-
元件：各種常見的網(wǎng)頁內(nèi)容元件，比如按鈕、標(biāo)題、輸入框等。命名前面建議帶有u-
兩者關(guān)系，模塊包含元件，元件組成模塊。
小小實例
看到上面的一個小彈窗。整個彈窗，當(dāng)成一個模塊?？梢园褬?biāo)題，提示內(nèi)容，按鈕當(dāng)做元件。HTML 代碼就如下，CSS , JS 代碼就不貼了。模塊就帶m-，元件就帶u-
至于這樣的寫法有什么優(yōu)劣，注意事項，這里就不展開講了，以后再寫文章。
5.JavaScript命名
在js命名里面，應(yīng)該只有四種命名方式：小駝峰(productList)，大駝峰(ProductList)，大寫字符，下劃線分割（PRODUCT_LIST），下劃線開頭+小駝峰(_productList)
5-1.按照類型命名
5-1-1.小駝峰
在js寫法里面，小駝峰命名應(yīng)該是最多的一種。變量，函數(shù)一般而言都是使用小駝峰命名。
//登錄處理函數(shù)lethandleLogin=function(){}復(fù)制代碼
5-1-2.大駝峰
在es6之前，js還沒有class的概念，但是也組織不了開發(fā)者模擬class?，F(xiàn)在有了class，自然而然，class的命名規(guī)范就更離不開了。關(guān)于class的命名規(guī)范，應(yīng)該很多人都是習(xí)慣用大駝峰命名。
//創(chuàng)建一個類class Person{? ? //...}復(fù)制代碼
5-1-3.常量
常量建議還是使用大寫字符+下劃線命名。
//配置最大金額const PRICE_MAX=10000;復(fù)制代碼
5-1-4.私有變量
私有變量相對于外面作用域而言，為了區(qū)分變量是公用的，還是私有的。建議命名上面就做下區(qū)分，私有變量建議使用下劃線開頭+小駝峰命名方式。
letmyObj={? ? name:'守候',setName(){? ? ? ? //保存當(dāng)前的thislet_this=this;setTimeOut(function(){? ? ? ? ? ? alert(_this.name)? ? ? ? },1000)? ? }}復(fù)制代碼
5-2.按職責(zé)命名
函數(shù)命名，一般都是動詞開頭。
5-2-1.獲取值
如果函數(shù)是為了獲取值(函數(shù)最后會返回一個值的)，函數(shù)前面建議帶有g(shù)et。
//根據(jù) ID 獲取用戶信息functiongetUserInfo(id){? ? }復(fù)制代碼
5-2-2.設(shè)置值
如果函數(shù)是為了設(shè)置值(函數(shù)最后會返回一個值的)，函數(shù)執(zhí)行就是為了給某一個變量賦值，函數(shù)前面建議帶有set。
//設(shè)置用戶信息functionsetUserInfo(){? ? }復(fù)制代碼
5-2-3.處理動作
如果函數(shù)是為了處理一些操作，比如登錄，注冊，渲染列表等。那么就建議命名前面帶有handle。
//分頁操作handleChangeCurrent(val){? ? }//注冊操作handleRegister(){? ? }復(fù)制代碼
這個處理動作，有些開發(fā)者也是習(xí)慣直接以動作開始。openDialog，closeDialog等。
6.目錄，文件，圖片命名
6-1目錄，文件名稱的命名規(guī)則
統(tǒng)一小駝峰命名法。
如下例子：
目錄，文件建議命名
首頁index，index.html
搜索頁面search，search.html
產(chǎn)品列表productList，productList.html
產(chǎn)品詳細(xì)頁面productDetail，productDetail.html
新聞列表newslist，newslist.html
新聞詳細(xì)頁面newsdetail，newsdetail.html
評論列表commentList，commentList.html
關(guān)于我們about，about.html
如果發(fā)現(xiàn)名稱過長，可以在團(tuán)隊約定好簡寫格式：比如 product 簡寫成 pro 。
6-2圖片命名規(guī)范
如果是通用性質(zhì)的圖片，例如LOGO，菜單，側(cè)邊欄，背景等，就直接使用小寫字母命名。比如：logo.jpg ，menu.jpg，aside.jpg，bg.jpg。
如果不是通用的圖片，就建議根據(jù)類別-模塊-功能的格式。使用小寫字母，‘-’或者‘_’分割，如下例子：
圖片名稱意義
btn-submit-comment.jpg提交評論的按鈕
bg-product-list.jpg產(chǎn)品列表模塊的背景
icon-views.png瀏覽數(shù)的圖標(biāo)
icon-btn-vote.png投票按鈕
ad-news-aside.jpg在新聞側(cè)邊欄的廣告圖片
7.參考資料
關(guān)于團(tuán)隊合作的css命名規(guī)范
8.小結(jié)
關(guān)于命名，很簡單，也很難。也是困擾著很多的開發(fā)者，包括我。該文章的命名方式，也是我在用的一種個人命名方式，希望能讓大家有所收獲。當(dāng)然其中還有很多的瑕疵，希望大家多多指點，或者推薦下自己建議的命名方式。
關(guān)于命名的規(guī)范，每個公司都有自己的編碼規(guī)范，只是很少公司能認(rèn)真貫徹執(zhí)行自己的規(guī)范，從而導(dǎo)致命名錯亂。所以命名的難點，我不認(rèn)為是命名本身有難度，難度在于在項目上，面對各種需要命名的對象，堅持使用一套命名格式，正確的命每一個名。
作者：守候i
鏈接：https://juejin.im/post/5b6ad6b0e51d4519171766e2
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
