1. 程式人生 > >「前端開發」分享個人習慣的命名方式

「前端開發」分享個人習慣的命名方式

把一件平凡的事情做好,很平凡。把一件平凡的事情堅持的做好,很不平凡。

1.前言

如果說電腦科學只存在兩個難題:快取失效和命名。那麼我就覺得命名的難點只有兩個:詞彙量和堅持貫徹執行制定的規範。

最近在知乎上看到這個:作為程式設計師,有沒有讓你感到既無語又崩潰的程式命名?。頓時感慨萬千,因為命名對於程式設計師來說是就是一個難題,有時候因為命名,可能會引起別人的誤導,疑惑等,對開發效率,專案的質量影響可大可小。今天,也分享下最近自己在使用的命名習慣,當然只是個人習慣。更希望能在評論區看到大家推薦的命名方式,互相學習,交流。

關於整篇內容,主要提及兩個:

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
產品詳細頁面 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.小結

關於命名,很簡單,也很難。也是困擾著很多的開發者,包括我。該文章的命名方式,也是我在用的一種個人命名方式,希望能讓大家有所收穫。當然其中還有很多的瑕疵,希望大家多多指點,或者推薦下自己建議的命名方式。

關於命名的規範,每個公司都有自己的編碼規範,只是很少公司能認真貫徹執行自己的規範,從而導致命名錯亂。所以命名的難點,我不認為是命名本身有難度,難度在於在專案上,面對各種需要命名的物件,堅持使用一套命名格式,正確的命每一個名。

個人部落格

更多前端技術文章美術設計wordpress外掛、優化教程學習筆記盡在我的個人部落格喵容 - 和你一起描繪生活,歡迎一起交流學習,一起進步:http://panmiaorong.top

站內文章推薦:

「前端進階」史上最全的前端學習路線

「不要重複造輪子系列」 前端常用外掛、工具類庫彙總

如何保障前端專案程式碼質量

記錄一次基於vue、typescript、pwa的專案由開發到部署

小程式挖坑之路

原文連結:「前端開發」分享個人習慣的命名方式