引言

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

不要嫌棄函數(shù)名過(guò)長(zhǎng)

const getLocationPermission = () => {}

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

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

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

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

例如：_index

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

例如：index_

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

has 常用于表示有沒(méi)有或者是否包含 / 而 is 常用于表示是不是，是否

has的使用場(chǎng)景，例如

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

is 的使用場(chǎng)景

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

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

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

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

const getLocalUserInfo = ?;
const getNetWorkUserInfo = ?;

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

函數(shù)變量

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

小駝峰

const getUserInfo

大駝峰

const GetUserInfo

下劃線(xiàn)

const _getUserInfo

使用縮寫(xiě)

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

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

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

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

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

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

一些不好的命名：

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

比較通用的縮寫(xiě)

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

常量命名

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

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

一天毫秒數(shù)綜合

const DAY_MILLI_SECOND_SUM = ?

單詞拼接 加深語(yǔ)義化

by： 通過(guò)

const aid = getUserAid()

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

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

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

參考命名：

document.getElementById
document.getElementByClassName
...

引入自定義組件

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

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

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

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ī)則的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論