引言

自己總結(jié)的一些常用的命名規(guī)范，好的命名不僅可以使代碼看起來簡潔，并且維護(hù)起來也方便了許多。作為初級程序員，不給他人增加負(fù)擔(dān)也是需要學(xué)習(xí)的

不要嫌棄函數(shù)名過長

const getLocationPermission = () => {}

這是一個(gè)用來獲取定位權(quán)限的函數(shù)。雖然這個(gè)名稱很長，但是語義化清晰，看一眼就知道他是用來做什么的。這里可以拆分成為 3 部分 get 獲取的意思 location 定位的意思 permission 權(quán)限的意思， 這樣一個(gè)十分具有語義化的函數(shù)命名就完成了。

變量 / 函數(shù) 命名頭部

一般為動(dòng)詞，后面加上具體要做什么的名詞

_ : 一般用于表示私有的字段，不希望外部訪問

例如：_index

當(dāng)然也有寫在尾部的風(fēng)格

例如：index_

什么時(shí)候用 has ， 什么時(shí)候用 is

has 常用于表示有沒有或者是否包含 / 而 is 常用于表示是不是，是否

has的使用場景，例如

const hasLocationPermission = ?
// 有沒有定位權(quán)限
const hasUserInfo = ?
// 有沒有用戶信息
...

is 的使用場景

const isShow = ?
// 是否（展示/顯示)
const isTiemout = ?
// 是否超時(shí)
...

總結(jié)一下: has 是 "有沒有" 包含的關(guān)系，而 is 則是 "是不是？"這個(gè)意思

一個(gè)好的命名需要遵循的規(guī)則

首先，你要清楚知道你這個(gè)函數(shù)是用來干什么的。比如我需要寫一個(gè)函數(shù)用來處理對象、數(shù)組等數(shù)據(jù)是否為空。那么我可以這樣寫 isEmpty 是否為空。例如我需要一個(gè)函數(shù)來獲取本地保存的用戶信息，另一個(gè)是需要通過網(wǎng)絡(luò)請求來獲取用戶信息那么我可以這樣來編寫

const getLocalUserInfo = ?;
const getNetWorkUserInfo = ?;

仔細(xì)拆分，獲取關(guān)鍵的字眼。 '獲取本地保存的用戶信息' => get（獲?。﹍ocal（本地）UserInfo（用戶信息） 這樣，一個(gè)十分具有語義化的函數(shù)命名就完成了

函數(shù)變量

使用小駝峰命名規(guī)則 / 組件構(gòu)造函數(shù)使用大駝峰 / 組件文件名使用下劃線開頭

小駝峰

const getUserInfo

大駝峰

const GetUserInfo

下劃線

const _getUserInfo

使用縮寫

注意點(diǎn)1： 通用性，不能隨便拉出來一個(gè)單詞就使用縮寫，例如我想寫一個(gè) class 用于管理整個(gè)用戶本地存儲(chǔ)信息的獲取、修改、刪除等操作?？梢赃@樣命名這個(gè)class ：LocalUserInfoManage 或者說放到 同一個(gè) localStroage 目錄下，每一個(gè)再使用 UserInfoManage / UserConfigManage 等用于區(qū)分。 但是不能夠 這樣命名 lum ？

l （local）u （user / userInfo）m （manage）！??？

這樣就比較迷惑了， 命名本來就是讓其他人看起來更加簡單易懂，而不是增加閱讀負(fù)擔(dān)

注意點(diǎn)2：保證統(tǒng)一性 既然某個(gè)單詞使用了縮寫， 那么最好都用縮寫，不能有的寫，有的不寫

注意點(diǎn)3：縮寫是作為一個(gè)單詞存在，也就是這樣的規(guī)則去命名的，例如： typeScript 縮寫 ts這里第一個(gè)是小寫，那么就是小寫，后面的 Script 不再是單獨(dú)的一個(gè)單詞，應(yīng)該是與前面是屬于一個(gè)單詞。轉(zhuǎn)換規(guī)則 typeScript => tscript => ts , 同理如果 TypeScript => Ts ， 這是只在命名的情況下的轉(zhuǎn)換

注意點(diǎn)4：不要通過刪除單詞中的字母來達(dá)到縮寫的目的

一些不好的命名：

const n = ?							// 無意義的命名
const nError = ?				// 不明確的命名
const wgcComponents = ? // 不明確的命名，或者就你的團(tuán)隊(duì)能看懂，一旦有人員變動(dòng)維護(hù)就會(huì)困難
const scid = ?					// 不能用中文，也不能用中文縮寫  sc （刪除）

比較通用的縮寫

以上有很多其實(shí)在平時(shí)已經(jīng)有使用到，也還有很多沒有寫進(jìn)去的，使用縮寫命名的時(shí)候一定要注意規(guī)范，參考第六點(diǎn)。

常量命名

關(guān)于常量的命名，一般不會(huì)改變的變量，這類變量比較固定（例如：一天有多少毫秒，180deg 或者 xxx deg的選擇角度，再就是和其他人約定好的魔鬼數(shù)字等等）他們的共同點(diǎn)是我們無法使其變化，也可以說我們不希望他會(huì)被改變。

這種常量的話一般是使用全大寫，每一個(gè)單詞使用 _ 下劃線分開。 例如

一天毫秒數(shù)綜合

const DAY_MILLI_SECOND_SUM = ?

單詞拼接 加深語義化

by： 通過

const aid = getUserAid()

這段是獲取用戶 aid ， 使用 get user aid， 無可厚非，但有時(shí)候我們并不需要去從用戶信息中拿，而是直接從本地拿。

此時(shí)就可以加上 by 了， 并且語義表現(xiàn)上也會(huì)豐富

const aid = getAidByLocal(); // 通過本地獲取 Aid
const aid = getAidByUserInfo(); // 通過用戶信息獲取 Aid

參考命名：

document.getElementById
document.getElementByClassName
...

引入自定義組件

現(xiàn)在你有一個(gè)組件 picker ，基于 picker 封裝了一個(gè)時(shí)間選擇器目錄結(jié)構(gòu)如下

---conponents
   --- picker
       --- index.jsx
       --- date.jsx

那么引入的命名應(yīng)該是 父級文件名 + 組件名 / 或者你直接把組件的文件名命名成這樣也可以的

import pickerDate from 'component/picker/date.jsx';

文件命名的風(fēng)格

_ 或者 - 分割單詞時(shí)，一定要統(tǒng)一，二者選一個(gè)就可以

--- conponents
    --- test-file1
    --- test_file2

以上就是前端命名規(guī)則總結(jié)的詳細(xì)內(nèi)容，更多關(guān)于前端命名規(guī)則的資料請關(guān)注腳本之家其它相關(guān)文章！