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

引言

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

不要嫌棄函數名過長

const getLocationPermission = () => {}

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

變量 / 函數 命名頭部

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

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

例如：_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 （刪除）

比較通用的縮寫

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

常量命名

關於常量的命名，一般不會改變的變量，這類變量比較固定（例如：一天有多少毫秒，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

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

推薦閱讀：

• typescript快速上手的基礎知識篇
• typescript環境安裝並開啟VSCode自動監視編譯ts文件為js文件
• JS項目中對本地存儲進行二次的封裝的實現
• Linux在兩個服務器直接傳文件的操作方法
• 詳解PHP中的命名空間