[前端開發]--分享我的習慣的命名方式

把一件平凡的事情作好，很平凡。把一件平凡的事情堅持的作好，很不平凡。

1.前言

若是說計算機科學只存在兩個難題：緩存失效和命名。那麼我就以爲命名的難點只有兩個：詞彙量和堅持貫徹執行制定的規範。

最近在知乎上看到這個：做爲程序員，有沒有讓你感到既無語又崩潰的程序命名？。頓時感慨萬千，由於命名對於程序員來講是就是一個難題，有時候由於命名，可能會引發別人的誤導，疑惑等，對開發效率，項目的質量影響可大可小。今天，也分享下最近本身在使用的命名習慣，固然只是我的習慣。更但願能在評論區看到你們推薦的命名方式，互相學習，交流。

關於整篇內容，主要說起兩個：

1.如何寫出讓別人容易讀懂的命名

2.針對不一樣的對象，使用對象命名的格式

2.盤點那些難以讀懂的命名

首先，先盤點下有哪些命名的一些方式是很難讓別人讀懂的。這些狀況，你們看到就應該在開發上儘可能避免下。

2-1.單詞拼寫錯誤

舉個例子

//提交表單（把 Form 寫成了 From ）
submitFrom(){...}

以前寫文章也有說過，單詞拼寫正確能夠說是一個底線了。若是單詞拼寫錯誤，好比 form 和 from 都是正確的單詞，但徹底不同的意思，若是把 form 寫成 from ，之後讀代碼的人（也多是你本身），頗有可能會懵逼。

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
產品詳細頁面	productDetail，productDetail.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.參考資料

一些前端書寫規範建議

關於團隊合做的css命名規範

8.小結

關於命名，很簡單，也很難。也是困擾着不少的開發者，包括我。該文章的命名方式，也是我在用的一種我的命名方式，但願能讓你們有所收穫。固然其中還有不少的瑕疵，但願你們多多指點，或者推薦下本身建議的命名方式。

關於命名的規範，每一個公司都有本身的編碼規範，只是不多公司能認真貫徹執行本身的規範，從而致使命名錯亂。因此命名的難點，我不認爲是命名自己有難度，難度在於在項目上，面對各類須要命名的對象，堅持使用一套命名格式，正確的命每個名。

-------------------------華麗的分割線--------------------

想了解更多，和我交流，內推職位，請添加我微信。或者關注個人微信公衆號：守候書閣