前端開發(fā)變量命名系列 - JavaScript篇

JavaScript作為前端開發(fā)從業(yè)人員必須掌握的3大基礎(chǔ)知識(shí)中最重要的一環(huán)，也

是平是接觸時(shí)間最長、寫得最多的。在開發(fā)過程中必然會(huì)遇到命名的問題，你會(huì)

詞窮、糾結(jié)、惆悵嗎？本文的出現(xiàn)相信能夠解決大部分煩惱，讓你輕松寫出符合

規(guī)范、易讀、簡短的代碼。

本文將通過大量的實(shí)例來試圖自圓其說，形成一套系統(tǒng)化、實(shí)用的變量命名理化

體系。通過按JavaScript的數(shù)據(jù)類型分類著手、細(xì)到一個(gè)函數(shù)的參數(shù)命名，并提

供眾多可選方案，并盡量給出其適用范圍和利弊。

需要注意的是由于個(gè)人寫作水平、和知識(shí)有限，很多方面敘述上有

些生硬，在分類上也沒有什么特別的依據(jù)，文章也沒有人審稿，所

以有什么紙漏還請留言告知。由于寫作倉促，內(nèi)容可能不全，后續(xù)

會(huì)隨著工作和學(xué)習(xí)的深入而不斷地調(diào)整和更新。

布爾值（Boolean）命名

Boolean值是兩種邏輯狀態(tài)的變量，它包含兩個(gè)值：真和假。在JavaScript中對

應(yīng)true和false,在實(shí)踐中通常使用數(shù)字i表示真值，。來表示假值。

雖然Boolean的狀態(tài)只有兩種但是在命名時(shí)可以進(jìn)一步分類,這里給出幾種場景:

場景一：表示可見性、進(jìn)行中的狀態(tài)

解釋:可見性在通常指頁面中的元素、組件是否顯示（或者組件掛載到DOM上，

但并不可見）。進(jìn)行中主要是說明某種狀態(tài)是處于持續(xù)進(jìn)行中。

推薦命名方式為is+動(dòng)詞（現(xiàn)在進(jìn)行時(shí)）/形容詞，同時(shí)這種方式也可以直接不寫is,

但是為了更好的作區(qū)分，建議還是加上。

isSkow:'是否顯示I

泡是否可見。

kL?！φJ(rèn)g:'是否處于力口載中I

AC。八八cct/hg:'是否處于連接中一

以岫hg「正在驗(yàn)證中「

kRuFming:，正在運(yùn)行中I

isListening:，正在監(jiān)聽中，

)

注意：在Java中使用這種方式是有一定副作用的，為什么請移步：

為什么阿里巴巴禁止開發(fā)人員使用"isSuccess"作為變量名？

場景二：屬性狀態(tài)類

解釋：通常用來描述實(shí)體(例如：HTML標(biāo)簽、組件、對象)的功能屬性，而且

定法比較固定。

(

disabled:，是否禁用「

cditab/c」是否可編輯。

clearable:，是否可清除「

readonly:，只讀「

expande:受否可展開：

checked:，是否選中。

e八，儂帥e:，是否可枚舉二

itcsb他」是否可迭代。

cack〃b/e:，是否可點(diǎn)擊。

4小必地/0」是否可拖拽，

)

場景三：配置類、選項(xiàng)類

解釋：主要是指組件功能的開啟與關(guān)閉，功能屬性的配置。

這是一種比較常見的情景，目前命名方式也有很多種，但是歸納起來也不多。推

薦使用w汕Xx來表示組件在基本功能形態(tài)外的其它功能，比如組件的基礎(chǔ)功能

到高級功能的開啟；使用次加XX來表示組件某些功能的開啟；使用aHowXx來

表示功能屬性的配置；使用八。Xx用于建議功能使用者這個(gè)不建議開啟。

w/'tkTnb:，是否帶選項(xiàng)卡I

，不帶選項(xiàng)卡］

ei<\ableFilter:，開啟過濾「

allowk\Cu$toi^Scale：，允許自定義縮放一

s〃。川dC/ear:堤否清除「

caiaSelectlte^v\：'是否能選中元素一

八。C。/。八：'不顯示版后面的冒號(hào)一

MeckJs：'檢查Js「

em/tBOM:aUTF-8ByteOrderMark(J3OM)inthebeginningofoutputfiles/

)

注意：如果嫌分類太多，可以只使用其中一種方式，比如在

Typescript中使用了H/ownXx和noXx。

除了上面這些帶有特定的前置介詞、動(dòng)詞方式外還有一些在語義上帶有疑問性質(zhì)

的組合通常也是作為Boolean命名的一種參考。

是否啟用虛擬滾動(dòng)模式J

u^kPaMls:，在范圍選擇器里取消兩個(gè)日期面板之間的聯(lián)動(dòng)一

KH以比cEvc八七輸入時(shí)是否觸發(fā)表單的校驗(yàn)，

}

函數(shù)命名

函數(shù)在不同的上下文中的叫法也不一樣，在對象中稱為方法，在類中有構(gòu)造函數(shù)、

在異步處理時(shí)有回調(diào)函數(shù)，還有立即執(zhí)行函數(shù)、箭頭函數(shù)、柯里函數(shù)等。

函數(shù)命名的方式常常是和業(yè)務(wù)邏輯耦合在一起的，但是在命名規(guī)則上也有一些常

見的模式可以遵循。

場景一：事件處理

事件處理函數(shù)是前端平時(shí)用到最多的，包括瀏覽器原生事件、異步事件和組件自

定義事件。在寫法上最常見的兩種命名分別為onXx、onXxC/ick和han山eXx、

hain.dle.X.xChavy.ge。

這里如何在二者之間選擇，可以從二方面來歸類。一是，原生事件采用。八Xx,

而自定義事件使用以八山eXx。二是，事件主動(dòng)監(jiān)聽采用。八Xx,被動(dòng)處理使

用handleXx。

從實(shí)踐及三大主流框架的文檔關(guān)于事件部分的內(nèi)容來看，推薦使用hasUeXx這種

方式，而在表單提交的時(shí)候通常采用onSuhvut函數(shù)。

其實(shí)，在實(shí)際項(xiàng)目中很少嚴(yán)格這樣來命名事件處理函數(shù)，因?yàn)檫@種方式有一定的

局限性，比如點(diǎn)擊按鈕打開一個(gè)對話框，使用ka八山eOpenD/g和。八。penD/g者B沒有

直接寫叩八D/g方便，如果頁面有多個(gè)不同功能的對話框采用這種方式會(huì)顯得變

量名過長，而handle和on就顯得沒有必要了，比如hanldeOpenCoMMentDlg就

沒有opcnCoMAMentD/g直白。

下面列出了一些約定成俗的適用例子：

{

。八S〃匕⑼七，提交表單。

法md/eSizeCk〃八gc:'處理分頁頁數(shù)改變一

hai^dlePageCha^.ge:'處理分頁每頁大小改變二

。八Keydown：'按下鍵，

)

場景二：異步處理

這里主要是指在寫數(shù)據(jù)層服務(wù)、狀態(tài)管理中的Action命名，以及Ajax回調(diào)的命

名規(guī)則。

(

getUsers」獲取用戶列表)

fetc/VToke八」取得Token',

de/eteUse仁'刪除用戶一

rei^oveTag:'移除標(biāo)簽一

updntcU""F。：哽新用戶信息一

“ddU"：，添加用戶I

createAcc?！╪t:嗆U建賬戶，

)

命名主要圍繞數(shù)據(jù)的增刪查找來劃分，獲取數(shù)據(jù)通常是gctXx和胱MXx,在作者

看來兩者在使用上的區(qū)分在于getXx的數(shù)據(jù)來源不一定直接取自異步的原始數(shù)

據(jù)，可能是加工處理后的，而fetckXx是直接拿的原始數(shù)據(jù)。當(dāng)然在實(shí)際項(xiàng)目中

并沒有區(qū)分，看個(gè)人喜好。

念麻eXx主要用于數(shù)據(jù)刪除，而憶MweXx在語義上是移除數(shù)據(jù)，通常情況數(shù)據(jù)是

還存在的，只是沒有顯示或數(shù)據(jù)假刪除。updateXx是指數(shù)據(jù)更新操作，addXx是

在已有列表數(shù)據(jù)中添加新的子項(xiàng)、而createXx主要是創(chuàng)建新的實(shí)例，比如新建一

個(gè)賬戶。

場景三：跳轉(zhuǎn)路由

在實(shí)際開發(fā)過種中，比如在使用react-router/vue-router時(shí)，在模板或者JSX中

可以直接在標(biāo)簽中寫上目標(biāo)地址，但有些時(shí)候跳轉(zhuǎn)的目標(biāo)地址是經(jīng)過判斷或者組

合后的，并且通過事件觸發(fā)跳轉(zhuǎn)的，這個(gè)時(shí)候就需要一個(gè)函數(shù)來處理，那么在函

數(shù)命名的時(shí)候可以考慮使用

（

切空步時(shí)疝）跳轉(zhuǎn)到模板詳情頁面I

八WoHohA。：，導(dǎo)航至IJ首頁一

。叫叫。出0：'跳轉(zhuǎn)首頁：

跳轉(zhuǎn)首頁「

redirectToLogii^:'重定向到登錄頁「

switc/VTZb:，切換Tab選項(xiàng)卡一

backHcw，回至ij主頁，

)

推薦使用toXx和goXx這兩種方式，如果不是在當(dāng)前頁面打開/跳轉(zhuǎn)頁面，可以使

用toBlankTplDetail或者goBlankHoMe這種方式來進(jìn)一步語義化。如果前端頁面是

位于Webview中，也可以考慮采用toNativeShare這種方式來命名。

場景四：框架相關(guān)特定方法

這里主要是針對前端3大主流流行框架，有一些命名是帶有特定標(biāo)識(shí)符的，還有

就是一些生命周期的命名方式。

（

fori^atTii^\eFilter:，在A八gu/nrJsWVue中，通常用于過濾器命名「

stowC"/:，用于Ang川〃-Js定義控制器方法1

f。?vuatP/pc」用于中，標(biāo)識(shí)管道方法一

'Vue中的實(shí)例方法二

入八中的內(nèi)置方法）

beforeCreate：'Vue的生命周期命名。

coi^xpoMiatWillMouiat:'React生命周期命名

coi^xpoMiatDidMoui^t:'React生命周期命名I

afterCoi^teintti^it:'Ai^uglar生命周期命名「

afterViewClaecked:'Ai^gula生命周期命名I

httpProvidecA八gudanJs服務(wù)一

useKF〃ct"g:'工廠函數(shù)「

“scC〃他〃ck:，Re4ct鉤子函數(shù)，

)

場景五：數(shù)據(jù)的加工

這類場景在處理列表的時(shí)候經(jīng)常會(huì)碰到，比如排序、過濾、添加額外的字段、根

據(jù)ID和索引獲取特定數(shù)據(jù)等。

情形一：根據(jù)特定屬性獲取屬性

這里口J以參考DOM方法的命名，比如:

getElew.&ntsByClassNai^e.Q和getElenae八tsBgNakv\e（）,然后提煉出一個(gè)比較實(shí)用的模

板：gctXxBgYgO。其中Xx可以是：nt,（tern,option,data,selection,list,options以

及一些特定上下文的名字，比如：use心）,⑸等。Yg相對來說比較固定，經(jīng)

常用到的就是id,index,key,value.,selected,actived等。

除了使用get，還可以使用que吆和fetch,但是需要注意和上面提到的異步數(shù)據(jù)

處理作一個(gè)區(qū)分。

（

get/tCkBgU:喉據(jù)IP獲取數(shù)據(jù)元素J

get/te3s89sHecteW：'根據(jù)傳入的已選列表ID來獲取列表全部數(shù)據(jù)。

quergUserBgUid：喉據(jù)U（P查詢用戶，

）

注意：在get/tekvxsBgSe/ecteW這種情形卜直接寫成get/tcsSe/ecteW更好，但只適用

于丫9為形容詞的場景

情形二：格式化數(shù)據(jù)

這里的格式化操作包括排序、調(diào)整數(shù)據(jù)結(jié)構(gòu)、過濾數(shù)據(jù)、添加屬性。命名通常使

用form?tXx,co八veHXx,my/erseXx,togg/eXx,parseXx,flatXx,也可以結(jié)合數(shù)組的一^些

操作方法來命名，比如sliceXx,subsWXx,spliceXx,sortXx,j。，八Xx等來命名。

（

FOMA淚?ate：，格式化日期二

。。八火力口”。八。9—轉(zhuǎn)換貨幣單位一

im/e”eUst：反轉(zhuǎn)數(shù)據(jù)列表I

togg/eAHSe/e&edL切換所有已選擇數(shù)據(jù)狀態(tài)一

pcKseXn/U：，解析XML數(shù)據(jù)I

他比：喂開選擇數(shù)據(jù)I

sortBgDesc」按降序排序，

）

數(shù)組命名

數(shù)組的命名推薦使用復(fù)數(shù)形式來命名，還有就是名詞和具有列表意思的單詞組合。

常見的詞匯有option,list,Maps,inodes,entities,collection.等。

（

users:'用戶列表一

useriJsi：'用戶列表L

僅。。呻。八s：，選項(xiàng)卡選項(xiàng)）

s僅笈Maps」?fàn)顟B(tài)映射表一

se/ectedNodes：，選中的節(jié)點(diǎn)］

況八GK?！埃浚?，按鈕組1

userEntities：'用戶實(shí)體，

)

選項(xiàng)元素、下拉元素命名

主要針對的是在下拉選擇框、選項(xiàng)卡元素、Radio、Checkbox等數(shù)據(jù)源每個(gè)選項(xiàng)

數(shù)據(jù)的命名。常見的詞匯有：

title.,v\aw\e,key,label,field.,value,id,child.re.ia,im.de.Xiin.od.es等。

基中title/naMe/key/label/field作為選項(xiàng)顯示名，value/id用于唯一■標(biāo)識(shí)選項(xiàng)，

cMdr^odes用于包含子節(jié)點(diǎn)內(nèi)容。如果選項(xiàng)元素的語義很明確的情況下也可以

直接使用特定單詞來代替提到的這些泛指的詞匯，例如菜單列表就可以使

用wenu來作為顯示名。

//坡常見組合

(

tit/e：'標(biāo)題

value：'ID值，

)

//組合二

(

，標(biāo)簽名L

value:7P值'

1

//組合三

（

八，元素名。

id:'ID值'

）

//組合四

（

field：，字段，，

va/ue:'標(biāo)識(shí)'，

index:嗦引，

1

當(dāng)前選項(xiàng)、激活項(xiàng)命名

適用列表的選中項(xiàng)、菜單選中項(xiàng)、步驟操作的當(dāng)前進(jìn)行步驟、頁面路由當(dāng)前路由

等的命名。

（

〃比2打她：'當(dāng)前選中選項(xiàng)卡「

currMtPage:，當(dāng)前頁一

se/ectedD〃僅「當(dāng)前選項(xiàng)中數(shù)據(jù)一

）

臨時(shí)數(shù)據(jù)、比對數(shù)據(jù)命名

針對在代碼中有時(shí)會(huì)使用一些臨時(shí)的變量來存儲(chǔ)數(shù)據(jù)、保存數(shù)據(jù)快照的場景下的

命名。

(

swapDnt”：'臨時(shí)交換數(shù)據(jù)「

tekupDat〃：'臨時(shí)數(shù)據(jù)1

nnpskot:嗷據(jù)快照，

1

數(shù)據(jù)循環(huán)語句中變量命名

在使用f。『循環(huán)時(shí)，多層嵌套請依次使用力/k,超過3層可以使用x/g/z,儂/八來

命名。使用￡。在4曲小叩,的er等方法時(shí)，每一個(gè)元素命名可以根據(jù)不同語境下的

特殊名字來命名，比如遍歷儂enus,那么每個(gè)元素可以命名為3c不然則使用

上卜文無關(guān)的詞匯，比如：item,option,data,keyfobject等。至于索引通常使用index,

如果多層可以使用以Hex+數(shù)字的形式，也可以直接使用力/k來作為索引，甚至

還可以使用S(AbMdex/gm八山八dex這種方式來命名。

對于在使用for循環(huán)時(shí)數(shù)組長度如果需要單獨(dú)命名的話，可以使用xxlmgth/xS,

或者XXCounto

在循環(huán)的過程中通常還會(huì)統(tǒng)計(jì)某個(gè)條件下數(shù)據(jù)匹配的次數(shù)、重復(fù)元素?cái)?shù)量、記錄

中間結(jié)果等情況。這里推薦使用。?！ò似弑硎敬螖?shù)，Skipped表示跳過的數(shù)量，

result表示結(jié)果。

//for循環(huán)for(leti=。；i<工。；/+-+){

for(letj=O;j<IO;j++){

for(letk=O;k41。；k++){

//doSOHAC協(xié)/hg

}

}

)

For(leti=O,(e八s=this.opti。八s.(e八gth;i<他八s；i++)(

//dos。3c麗ng

)

//forEach

iASCd.foFEach((iteM,index)=>{

//doSON況hMg

1)

menus.index)=>{

if(kv\ei^(A.children){

MC"(.而以此八.foKEack((s〃bMe八〃，s〃b伉dcx)=>{

if(subMeiaiA.ckitdreia'){

s〃bMcnu.而〃七八.f"E〃ck((gKMdMcnu,gr^m山八dex)=>{

//一個(gè)不常用的示例

1)

)

1)

)

1)

方法參數(shù)命名

方法的參數(shù)名稱和數(shù)量在不同的方法中各不相同，但是還是有一些固定的模式可

以參考，比如在Vue中監(jiān)聽屬性變化的新值和舊值；reduce方法的上一個(gè)值，當(dāng)

前值；回調(diào)函數(shù)的命名、剩余參數(shù)的命名等。

情形一：新值、舊值

常見于Vue中watch對像中的屬性監(jiān)聽回調(diào)函數(shù)，推薦使用

（

oldVal:*舊值一

newVH：，新值，

）

情形二：上一個(gè)值、下一個(gè)值和當(dāng)前值

這種情形見于路由的鉤子方法，。切ectassign數(shù)據(jù)拷貝的參數(shù)。

//組合一

（

from:從

亡?！傅?/p>

）

//組合二

pr&v:，上一個(gè)…。

八ext：，下一個(gè)

C"：'當(dāng)前，

）

//組合三

（

source：'源「

僅燈況：'目標(biāo)，

）

//組合四

（

start：'開始

eiad:，結(jié)束，

）

情形三：異步數(shù)據(jù)返回

用于Promise的彷e八方法參數(shù)，await的返回的Promise等?？蛇x擇的詞匯有:

res,data,jsoin.,entity?推薦使用res0

^emoProm/se.theH（res=>{

//dosomething

1)

情形四：其它情況

一些使用不多，但是在編程時(shí)約定成俗的命名方式。例如次表示單個(gè)字符，也表

示字符串，”代表次數(shù),『兩表示正則,expr表示表達(dá)式，怙八s表示數(shù)組長

度,count表示數(shù)量,P表示數(shù)據(jù)的精度,q表示查詢(query),src表示數(shù)據(jù)源

(source),八。表示數(shù)字(number),rate表示比率,status表示狀態(tài),boot表示布爾

值,?rr表示數(shù)組值，。句表示對象值,X和g表示坐標(biāo)兩軸,feme表示函數(shù),ua表示

UserAgent,size.表示大小,unit表示單位,Moz表示水平方向,vert表示垂直方

向，小歇表示基數(shù)，根

//傳入單個(gè)字符fimetio八

//數(shù)&巾復(fù)functionrepeat(st匕八)

//亞則“?！?小磔公外/%Jb/)

事件命名

這里根據(jù)DOM、nodejs和一些框架和UI組件的事件進(jìn)行歸納

DOM事件

這里列舉DOM中常見的事件命名

(

□ad:'已完成加載J

unload：'資源正在被卸載I

bcFo「e(x八load:，資源即將被卸載一

0”。匕：，失敗時(shí)「

“bort」中止時(shí)I

Focus：'元素獲得焦點(diǎn):

blur.'元素失去焦點(diǎn)。

〃土：'己經(jīng)剪貼選中的文本內(nèi)容并且復(fù)制到了剪貼板。

copg:'已經(jīng)把選中的文本內(nèi)容復(fù)制到了剪貼板一

paste：，從剪貼板復(fù)制的文本內(nèi)容被粘貼、

resize：'元素重置大小「

scr。”「滾動(dòng)事件:

reset:，重置「

他淪俵單提交。

。八“八c：農(nóng)線L

offline:，離線，

ope八：'打開「

dose：'關(guān)閉I

confect:'連接，

start：，開始、

e八結(jié)束一

所八七一打印I

aftre3九八土一打印機(jī)關(guān)閉時(shí)觸發(fā)一

click:，點(diǎn)擊。

d勿c〃ck」雙擊「

Mange」變動(dòng)一

select：'文本被選中被選中I

kcgdow八/keg/"ess/keg〃p-按鍵事件「

touch：，輕按1

c。八，右鍵點(diǎn)擊（右鍵菜單顯示前）。

wkee/」?jié)L輪向任意方向滾動(dòng)J

p。阮ter:，指針事件I

d「〃g/dKagst〃rt/drage八d/drage八七?！?憶0。\/0〃4匕49/0〃/。：，拖放事件「

drop:'元素在有效釋放目標(biāo)區(qū)上釋放I

p/ag：'播放「

pause：'暫停'，

suspcnd:，掛起。

，。小川況e:，完成。

seek」搜索「

install:，安裝。

progress:'進(jìn)行一

broadcast:

i叩戊：輸入I

message「消息'，

valid:'有效一

ZOOM：，放大I

state:'旋轉(zhuǎn)

“He—縮放I

upgrade:更新I

憶〃準(zhǔn)備好「

active:

]

自定義事件

在封裝組件時(shí)提供的事件名除了參考DOM事件外，在命名上也可以參考Github

Api采用動(dòng)詞過去時(shí)+Event的方式,VisualStudioCodeApi的'on+

（

assighedEse八七」分配事件一

c/osedE"