1.前言
如果說計(jì)算機(jī)科學(xué)只存在兩個(gè)難題：緩存失效和命名。那么我就覺得命名的難點(diǎn)只有兩個(gè)：詞匯量和堅(jiān)持貫徹執(zhí)行制定的規(guī)范蒂培。
最近在知乎上看到這個(gè)：作為程序員休玩，有沒有讓你感到既無語又崩潰的程序命名瑟捣？末荐。頓時(shí)感慨萬千，因?yàn)槊麑?duì)于程序員來說是就是一個(gè)難題勃救，有時(shí)候因?yàn)槊郑赡軙?huì)引起別人的誤導(dǎo)，疑惑等蒙秒，對(duì)開發(fā)效率勃黍，項(xiàng)目的質(zhì)量影響可大可小。今天晕讲，也分享下最近自己在使用的命名習(xí)慣覆获，當(dāng)然只是個(gè)人習(xí)慣。更希望能在評(píng)論區(qū)看到大家推薦的命名方式瓢省，互相學(xué)習(xí)弄息，交流。
關(guān)于整篇內(nèi)容勤婚，主要提及兩個(gè)：
1.如何寫出讓別人容易讀懂的命名
2.針對(duì)不同的對(duì)象摹量，使用對(duì)象命名的格式
2.盤點(diǎn)那些難以讀懂的命名
首先，先盤點(diǎn)下有哪些命名的一些方式是很難讓別人讀懂的蛔六。這些情況荆永，大家看到就應(yīng)該在開發(fā)上盡量避免下。
2-1.單詞拼寫錯(cuò)誤
舉個(gè)例子
//提交表單（把 Form 寫成了 From ）submitFrom(){...}復(fù)制代碼
之前寫文章也有說過国章，單詞拼寫正確可以說是一個(gè)底線了。如果單詞拼寫錯(cuò)誤豆村，比如 from 和 form 都是正確的單詞液兽，但完全不一樣的意思，如果把 from 寫成 form ，以后讀代碼的人（也可能是你自己）四啰，很有可能會(huì)懵逼宁玫。
2-2.中英文混用
單詞拼寫錯(cuò)誤會(huì)誤導(dǎo)別人，中英文混用這個(gè)命名方式就可以說讓人云里霧里的感覺柑晒，不會(huì)誤導(dǎo)欧瘪，只會(huì)看不懂。
比如下面
letchanpinList=[];復(fù)制代碼
這個(gè)變量名匙赞，一開始不知道是什么佛掖，注釋也沒有，完全懵逼涌庭。后來看了需求芥被，才知道這個(gè)的意思是：產(chǎn)品列表。
2-3.以1-9坐榆，a-z命名
這個(gè)情況相信大家都會(huì)遇到過拴魄，比如頁面上有幾個(gè)按鈕，有人命名成? btn1席镀，btn2匹中，btn3，btn4...豪诲≈霸保或者 btnA，btnB跛溉，btnC焊切，btnD。這樣的命名看似簡(jiǎn)單芳室，但實(shí)際上從這些命名里面讀取不到任何信息专肪，以后會(huì)可能會(huì)痛苦些。
2-4.混用命名格式
這個(gè)可以說沒那么可恨堪侯，但是看著就別扭嚎尤，比如表示評(píng)論列表，有地方這樣命名：comments伍宦，另一個(gè)地方這樣命名： comment-list芽死，還有這樣命名： commentList。幾種規(guī)范混在一起次洼，就感覺不規(guī)范了关贵。
還用一種雖然一般不會(huì)出現(xiàn)的情況，也遇見了卖毁。比如一個(gè)地方有添加供應(yīng)商的按鈕揖曾，命名是：addSupplier 。在另一個(gè)地方也有相同的功能按鈕，完全一樣炭剪，結(jié)果命名是：addSupplierInfo 练链。當(dāng)時(shí)就以為這兩個(gè)不是同一個(gè)功能，造成了誤會(huì)奴拦。
2-5.強(qiáng)制中文拼音命名
有些名詞媒鼓，被中國人創(chuàng)造出來（淘寶-taobao，微博-weibo）错妖，沒有英文翻譯的绿鸣。就可以用中文拼音命名，其他的都建議用英文站玄。
但是偏偏有時(shí)候就算有英文的單詞枚驻，有些人還是用中文拼音命名，比如一個(gè)文章列表株旷，很多人就是沒用 articleList再登，直接寫 wenzhangliebiao。但是看的時(shí)候晾剖，一定會(huì)懵逼一會(huì)锉矢。
2-6.強(qiáng)制簡(jiǎn)寫
簡(jiǎn)介雖然可以讓命名看著更加的簡(jiǎn)潔，但是有時(shí)卻會(huì)遇上強(qiáng)制簡(jiǎn)寫的命名齿尽，比如一個(gè)函數(shù)是提交用戶評(píng)論信息的功能沽损。原本以為是：handleCommentSubmit/submitComment/publishComment。結(jié)果后來一看--tjyhpl循头。強(qiáng)制簡(jiǎn)寫還是用拼音的簡(jiǎn)寫绵估，后來讓他改一下，改成了ac卡骂。后來一問才知道他想表達(dá)的意思是 addComment 国裳，當(dāng)時(shí)差點(diǎn)動(dòng)手了。
2-7.單復(fù)數(shù)不分
這個(gè)情況不算惡劣全跨，只算是一種規(guī)范吧缝左，之前有分別有兩個(gè)操作函數(shù)，一個(gè)是下載全部訂單數(shù)據(jù)浓若，一個(gè)是下載當(dāng)前訂單數(shù)據(jù)渺杉。但是兩個(gè)函數(shù)的命名，一個(gè)是downloadOrderData挪钓，另一個(gè)是downloadOrder是越。這樣也產(chǎn)生了一點(diǎn)懵逼感。
面對(duì)這樣的情況诵原，建議還是區(qū)分下單復(fù)數(shù)英妓，downloadOrder挽放，downloadOrderAll/downloadOrderList绍赛。區(qū)分了單復(fù)數(shù)的命名蔓纠，如果有返回值，也可以讓別人大概知道吗蚌，單數(shù)可能就是返回單個(gè)記錄腿倚，復(fù)數(shù)可能返回一個(gè)數(shù)組。
2-8.正反義詞錯(cuò)用
這個(gè)情況同上蚯妇，不算是惡劣敷燎，只能算是不規(guī)范。比如：分別有兩個(gè)操作函數(shù)一個(gè)是顯示彈窗箩言，一個(gè)是關(guān)閉彈窗硬贯。結(jié)果命名上面，一個(gè)是 showEditDialog 陨收。另一個(gè)是 closeEditDialog 饭豹。
上面的案例，show 和 close 务漩，一個(gè)是顯示拄衰，一個(gè)是關(guān)閉，顯然不是正反義詞饵骨。應(yīng)該出現(xiàn)的姿勢(shì)是翘悉，showEditDialog 和 hideEditDialog ，或者 openEditDialog 和 closeEditDialog
2-9.為所欲為的命名
還有其它的搞笑命名居触，在知乎上面看到的情況妖混，別人遇到的情況。大家移步到知乎吧轮洋，這個(gè)不重復(fù)太多制市。
作為程序員，有沒有讓你感到既無語又崩潰的程序命名砖瞧？息堂。
3.命名相關(guān)格式
說完了命名第一個(gè)，命名單詞應(yīng)該正確的書寫之后块促。再來說下命名的相關(guān)格式在說自己的命名實(shí)例之前荣堰，先說下不同的命名對(duì)象，命名方式是不一樣的竭翠。具體如下：
待命名對(duì)象推薦名稱
圖片小寫字母振坚，‘-’或者‘_’ 分割
css（class,id）‘-’ 分割
文件，變量小駝峰命名
js類（class）大駝峰命名
常量大寫字母斋扰，‘_’ 分割
臨時(shí)變量渡八，私有變量‘_’ 開頭啃洋，駝峰命名
4.HTML命名
在說命名 HTML 命名之前，先說下布局的三個(gè)概念：模塊( module )和元件( unit )
模塊：各種常見的網(wǎng)頁內(nèi)容模塊屎鳍，通澈曷Γ可以重復(fù)使用的較大的整體，比如導(dǎo)航逮壁、菜單孵坚、幻燈、圖文列表等窥淆。命名前面建議帶有m-
元件：各種常見的網(wǎng)頁內(nèi)容元件卖宠，比如按鈕、標(biāo)題忧饭、輸入框等扛伍。命名前面建議帶有u-
兩者關(guān)系，模塊包含元件词裤，元件組成模塊刺洒。
小小實(shí)例
看到上面的一個(gè)小彈窗。整個(gè)彈窗亚斋，當(dāng)成一個(gè)模塊作媚。可以把標(biāo)題帅刊，提示內(nèi)容纸泡，按鈕當(dāng)做元件。HTML 代碼就如下赖瞒，CSS , JS 代碼就不貼了女揭。模塊就帶m-，元件就帶u-
至于這樣的寫法有什么優(yōu)劣栏饮，注意事項(xiàng)吧兔，這里就不展開講了，以后再寫文章袍嬉。
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。現(xiàn)在有了class航罗，自然而然禀横，class的命名規(guī)范就更離不開了。關(guān)于class的命名規(guī)范伤哺，應(yīng)該很多人都是習(xí)慣用大駝峰命名燕侠。
//創(chuàng)建一個(gè)類class Person{? ? //...}復(fù)制代碼
5-1-3.常量
常量建議還是使用大寫字符+下劃線命名者祖。
//配置最大金額const PRICE_MAX=10000;復(fù)制代碼
5-1-4.私有變量
私有變量相對(duì)于外面作用域而言立莉，為了區(qū)分變量是公用的，還是私有的七问。建議命名上面就做下區(qū)分蜓耻，私有變量建議使用下劃線開頭+小駝峰命名方式。
letmyObj={? ? name:'守候',setName(){? ? ? ? //保存當(dāng)前的thislet_this=this;setTimeOut(function(){? ? ? ? ? ? alert(_this.name)? ? ? ? },1000)? ? }}復(fù)制代碼
5-2.按職責(zé)命名
函數(shù)命名械巡，一般都是動(dòng)詞開頭刹淌。
5-2-1.獲取值
如果函數(shù)是為了獲取值(函數(shù)最后會(huì)返回一個(gè)值的)，函數(shù)前面建議帶有g(shù)et讥耗。
//根據(jù) ID 獲取用戶信息functiongetUserInfo(id){? ? }復(fù)制代碼
5-2-2.設(shè)置值
如果函數(shù)是為了設(shè)置值(函數(shù)最后會(huì)返回一個(gè)值的)有勾，函數(shù)執(zhí)行就是為了給某一個(gè)變量賦值，函數(shù)前面建議帶有set古程。
//設(shè)置用戶信息functionsetUserInfo(){? ? }復(fù)制代碼
5-2-3.處理動(dòng)作
如果函數(shù)是為了處理一些操作蔼卡，比如登錄，注冊(cè)挣磨，渲染列表等雇逞。那么就建議命名前面帶有handle。
//分頁操作handleChangeCurrent(val){? ? }//注冊(cè)操作handleRegister(){? ? }復(fù)制代碼
這個(gè)處理動(dòng)作茁裙，有些開發(fā)者也是習(xí)慣直接以動(dòng)作開始塘砸。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
評(píng)論列表commentList，commentList.html
關(guān)于我們about扭倾，about.html
如果發(fā)現(xiàn)名稱過長(zhǎng)淀零，可以在團(tuán)隊(duì)約定好簡(jiǎn)寫格式：比如 product 簡(jiǎn)寫成 pro 。
6-2圖片命名規(guī)范
如果是通用性質(zhì)的圖片膛壹，例如LOGO驾中，菜單，側(cè)邊欄模聋，背景等肩民，就直接使用小寫字母命名。比如：logo.jpg 链方，menu.jpg持痰，aside.jpg，bg.jpg祟蚀。
如果不是通用的圖片工窍，就建議根據(jù)類別-模塊-功能的格式。使用小寫字母前酿，‘-’或者‘_’分割患雏，如下例子：
圖片名稱意義
btn-submit-comment.jpg提交評(píng)論的按鈕
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)隊(duì)合作的css命名規(guī)范
8.小結(jié)
關(guān)于命名，很簡(jiǎn)單罢维，也很難淹仑。也是困擾著很多的開發(fā)者，包括我言津。該文章的命名方式攻人，也是我在用的一種個(gè)人命名方式，希望能讓大家有所收獲悬槽。當(dāng)然其中還有很多的瑕疵怀吻，希望大家多多指點(diǎn)，或者推薦下自己建議的命名方式初婆。
關(guān)于命名的規(guī)范蓬坡，每個(gè)公司都有自己的編碼規(guī)范，只是很少公司能認(rèn)真貫徹執(zhí)行自己的規(guī)范磅叛，從而導(dǎo)致命名錯(cuò)亂屑咳。所以命名的難點(diǎn)，我不認(rèn)為是命名本身有難度弊琴，難度在于在項(xiàng)目上兆龙，面對(duì)各種需要命名的對(duì)象，堅(jiān)持使用一套命名格式敲董，正確的命每一個(gè)名紫皇。
作者：守候i
鏈接：https://juejin.im/post/5b6ad6b0e51d4519171766e2
來源：掘金
著作權(quán)歸作者所有慰安。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處聪铺。
