web前端命名規(guī)則有哪些

本篇內(nèi)容介紹了“web前端命名規(guī)則有哪些”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

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

const getLocationPermission = () => {}

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

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

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

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

例如：_index

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

例如：index_

什么時候用 has ， 什么時候用 is

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

has的使用場景，例如

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

is 的使用場景

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

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

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

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

const getLocalUserInfo = ?;
const getNetWorkUserInfo = ?;

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

函數(shù)變量

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

小駝峰

const getUserInfo

大駝峰

const GetUserInfo

下劃線

const _getUserInfo

使用縮寫

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

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

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

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

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

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

一些不好的命名：

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

比較通用的縮寫

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

常量命名

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

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

一天毫秒數(shù)綜合

const DAY_MILLI_SECOND_SUM = ?

單詞拼接 加深語義化

by： 通過

const aid = getUserAid()

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

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

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

參考命名：

document.getElementById
document.getElementByClassName
...

引入自定義組件

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

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

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

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

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

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

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

“web前端命名規(guī)則有哪些”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！