前端變數函數命名規則總結

2022-07-05 10:00:16

引言

自己總結的一些常用的命名規範，好的命名不僅可以使程式碼看起來簡潔，並且維護起來也方便了許多。作為初級程式設計師，不給他人增加負擔也是需要學習的

不要嫌棄函數名過長

const getLocationPermission = () => {}

這是一個用來獲取定位許可權的函數。雖然這個名稱很長，但是語意化清晰，看一眼就知道他是用來做什麼的。這裡可以拆分成為 3 部分 get 獲取的意思 location 定位的意思 permission 許可權的意思，這樣一個十分具有語意化的函數命名就完成了。

變數 / 函數命名頭部

一般為動詞，後面加上具體要做什麼的名詞

字首	字首 + 命名	大意
get	getUserInfo	獲取使用者資訊
del/delete	delUserInfo	刪除使用者資訊
update / add	updateUserInfo / addUserInfo	修改使用者資訊 / 增加使用者資訊
is	isTimeout	是否超時
has	hasUserInfo	有沒有使用者資訊
handle	handleLogin	處理登入
calc	calcAverageSpeed	計算平均速度

_ : 一般用於表示私有的欄位，不希望外部存取

例如：_index

當然也有寫在尾部的風格

例如：index_

什麼時候用 has ，什麼時候用 is

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

has的使用場景，例如

const hasLocationPermission = ?
// 有沒有定位許可權
const hasUserInfo = ?
// 有沒有使用者資訊
...

is 的使用場景

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

總結一下: has 是 "有沒有" 包含的關係，而 is 則是 "是不是？"這個意思

一個好的命名需要遵循的規則

首先，你要清楚知道你這個函數是用來幹什麼的。比如我需要寫一個函數用來處理物件、陣列等資料是否為空。那麼我可以這樣寫 isEmpty 是否為空。例如我需要一個函數來獲取本地儲存的使用者資訊，另一個是需要通過網路請求來獲取使用者資訊那麼我可以這樣來編寫

const getLocalUserInfo = ?;
const getNetWorkUserInfo = ?;

仔細拆分，獲取關鍵的字眼。 '獲取本地儲存的使用者資訊' => get（獲取）local（本地）UserInfo（使用者資訊）這樣，一個十分具有語意化的函數命名就完成了

函數變數

使用小駝峰命名規則 / 元件建構函式使用大駝峰 / 元件檔名使用下劃線開頭

小駝峰

const getUserInfo

大駝峰

const GetUserInfo

下劃線

const _getUserInfo

使用縮寫

注意點1：通用性，不能隨便拉出來一個單詞就使用縮寫，例如我想寫一個 class 用於管理整個使用者本地儲存資訊的獲取、修改、刪除等操作。可以這樣命名這個class ：LocalUserInfoManage 或者說放到同一個 localStroage 目錄下，每一個再使用 UserInfoManage / UserConfigManage 等用於區分。但是不能夠這樣命名 lum ？

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

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

注意點2：保證統一性既然某個單詞使用了縮寫，那麼最好都用縮寫，不能有的寫，有的不寫

注意點3：縮寫是作為一個單詞存在，也就是這樣的規則去命名的，例如： typeScript 縮寫 ts這裡第一個是小寫，那麼就是小寫，後面的 Script 不再是單獨的一個單詞，應該是與前面是屬於一個單詞。轉換規則 typeScript => tscript => ts , 同理如果 TypeScript => Ts ，這是隻在命名的情況下的轉換

注意點4：不要通過刪除單詞中的字母來達到縮寫的目的

一些不好的命名：

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

比較通用的縮寫

源單詞	縮寫
message	msg
information	info
button	btn
background	bg
response	res
request	req
image	img
utility	util
prroperty	prop
source	src
boolean	bool
error	err
settings	set

以上有很多其實在平時已經有使用到，也還有很多沒有寫進去的，使用縮寫命名的時候一定要注意規範，參考第六點。

常數命名

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

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

一天毫秒數綜合

const DAY_MILLI_SECOND_SUM = ?

單詞拼接加深語意化

by：通過

const aid = getUserAid()

這段是獲取使用者 aid ，使用 get user aid，無可厚非，但有時候我們並不需要去從使用者資訊中拿，而是直接從本地拿。

此時就可以加上 by 了，並且語意表現上也會豐富

const aid = getAidByLocal(); // 通過本地獲取 Aid
const aid = getAidByUserInfo(); // 通過使用者資訊獲取 Aid

參考命名：

document.getElementById
document.getElementByClassName
...

引入自定義元件

現在你有一個元件 picker ，基於 picker 封裝了一個時間選擇器目錄結構如下

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

那麼引入的命名應該是父級檔名 + 元件名 / 或者你直接把元件的檔名命名成這樣也可以的

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

檔案命名的風格

_ 或者 - 分割單詞時，一定要統一，二者選一個就可以

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

以上就是前端命名規則總結的詳細內容，更多關於前端命名規則的資料請關注it145.com其它相關文章！