naming cheatsheet
1.0.0
命名事物很難。該表試圖使其更容易。
儘管這些建議可以應用於任何編程語言，但我將使用JavaScript在實踐中說明它們。
命名變量和功能時，請使用英語。
/* Bad */
const primerNombre = 'Gustavo'
const amigos = [ 'Kate' , 'John' ]
/* Good */
const firstName = 'Gustavo'
const friends = [ 'Kate' , 'John' ]不管喜歡與否，英語是編程中的主要語言：所有編程語言的語法均以英語以及無數的文檔和教育材料編寫。通過用英語編寫代碼，您可以顯著提高其凝聚力。
選擇一個命名約定並遵循它。它可能是camelCase ， snake_case ，或者無論如何都無關緊要。重要的是要保持一致。
/* Bad */
const pages_count = 5
const shouldUpdate = true
/* Good */
const pageCount = 5
const shouldUpdate = true
/* Good as well */
const page_count = 5
const should_update = true 名稱必須簡短，直觀和描述：
/* Bad */
const a = 5 // "a" could mean anything
const isPaginatable = a > 10 // "Paginatable" sounds extremely unnatural
const shouldPaginatize = a > 10 // Made up verbs are so much fun!
/* Good */
const postCount = 5
const hasPagination = postCount > 10
const shouldDisplayPagination = postCount > 10 // alternatively 不要使用收縮。它們除了降低代碼的可讀性外，什麼都沒有貢獻。找到一個簡短的描述性名稱可能很難，但是收縮並不是不這樣做的藉口。
/* Bad */
const onItmClk = ( ) => { }
/* Good */
const onItemClick = ( ) => { } 名稱不應重複定義其定義的上下文。如果沒有降低其可讀性，請始終從名稱中刪除上下文。
class MenuItem {
/* Method name duplicates the context (which is "MenuItem") */
handleMenuItemClick = ( event ) => { ... }
/* Reads nicely as `MenuItem.handleClick()` */
handleClick = ( event ) => { ... }
} 名稱應反映預期的結果。
/* Bad */
const isEnabled = itemCount > 3
return < Button disabled = { ! isEnabled } />
/* Good */
const isDisabled = itemCount <= 3
return < Button disabled = { isDisabled } />命名功能時有一個有用的模式：
prefix? + action (A) + high context (HC) + low context? (LC)
看看如何在下表中應用此模式。
| 姓名 | 前綴 | 動作（A） | 高環境（HC） | 低環境（LC） |
|---|---|---|---|---|
getPost | get | Post | ||
getPostData | get | Post | Data | |
handleClickOutside | handle | Click | Outside | |
shouldDisplayMessage | should | Display | Message |
注意：上下文的順序會影響變量的含義。例如，
shouldUpdateComponent意味著您將要更新組件，而shouldComponentUpdate告訴您組件將自行更新，並且您只是在控制何時應更新。換句話說，高環境強調變量的含義。
函數名稱的動詞部分。最重要的部分負責描述該功能的作用。
get立即訪問數據（即內部數據的速記獲取）。
function getFruitCount ( ) {
return this . fruits . length
}另請參見組成。
set以聲明性的方式設置變量，並具有值A至值B 。
let fruits = 0
function setFruits ( nextFruits ) {
fruits = nextFruits
}
setFruits ( 5 )
console . log ( fruits ) // 5reset將變量設置回其初始值或狀態。
const initialFruits = 5
let fruits = initialFruits
setFruits ( 10 )
console . log ( fruits ) // 10
function resetFruits ( ) {
fruits = initialFruits
}
resetFruits ( )
console . log ( fruits ) // 5fetch請求一些數據，這些數據需要一些不確定的時間（即異步請求）。
function fetchPosts ( postCount ) {
return fetch ( 'https://api.dev/posts' , { ... } )
}remove從某個地方刪除了一些東西。
例如，如果您在搜索頁面上收集了選定的過濾器的集合，則將其中一個從該集合中刪除是removeFilter ，而不是deleteFilter （這也是您自然而然地用英語說的）：
function removeFilter ( filterName , filters ) {
return filters . filter ( ( name ) => name !== filterName )
}
const selectedFilters = [ 'price' , 'availability' , 'size' ]
removeFilter ( 'price' , selectedFilters )另請參見刪除。
delete完全從存在領域中刪除了一些東西。
想像一下，您是內容編輯，並且有您希望擺脫的臭名昭著的帖子。單擊閃亮的“刪除帖子”按鈕後，CMS執行了deletePost操作，而不是removePost 。
function deletePost ( id ) {
return database . find ( { id } ) . delete ( )
}另請參閱刪除。
compose從現有數據中創建新數據。主要適用於字符串，對像或功能。
function composePageUrl ( pageName , pageId ) {
return ` ${ pageName . toLowerCase ( ) } - ${ pageId } `
}另請參閱。
handle處理動作。通常在命名回調方法時使用。
function handleLinkClick ( ) {
console . log ( 'Clicked a link!' )
}
link . addEventListener ( 'click' , handleLinkClick ) 函數在運行的域。
功能通常是對某事的動作。重要的是說什麼是可操作的域，或至少是預期的數據類型。
/* A pure function operating with primitives */
function filter ( predicate , list ) {
return list . filter ( predicate )
}
/* Function operating exactly on posts */
function getRecentPosts ( posts ) {
return filter ( posts , ( post ) => post . date === Date . now ( ) )
}某些特定於語言的假設可能允許省略上下文。例如，在JavaScript中，
filter在數組上運行很常見。添加顯式filterArray是不必要的。
- -
前綴增強了變量的含義。它很少在函數名稱中使用。
is描述當前上下文的特徵或狀態（通常是boolean ）。
const color = 'blue'
const isBlue = color === 'blue' // characteristic
const isPresent = true // state
if ( isBlue && isPresent ) {
console . log ( 'Blue is present!' )
}has描述當前上下文是否具有一定的價值或狀態（通常是boolean ）。
/* Bad */
const isProductsExist = productsCount > 0
const areProductsPresent = productsCount > 0
/* Good */
const hasProducts = productsCount > 0should反映了一個積極的條件陳述（通常是boolean ）以及一定的動作。
function shouldUpdateUrl ( url , expectedUrl ) {
return url !== expectedUrl
}min / max代表最小值或最大值。描述邊界或限制時使用。
/**
* Renders a random amount of posts within
* the given min/max boundaries.
*/
function renderPosts ( posts , minPosts , maxPosts ) {
return posts . slice ( 0 , randomBetween ( minPosts , maxPosts ) )
}prev / next在當前上下文中指示變量的上一個或下一個狀態。描述狀態轉換時使用。
function fetchPosts ( ) {
const prevPosts = this . state . posts
const fetchedPosts = fetch ( '...' )
const nextPosts = concat ( prevPosts , fetchedPosts )
this . setState ( { posts : nextPosts } )
} 像前綴一樣，可變名稱可以根據單個值還是多個值製成單數或複數形式。
/* Bad */
const friends = 'Bob'
const friend = [ 'Bob' , 'Tony' , 'Tanya' ]
/* Good */
const friend = 'Bob'
const friends = [ 'Bob' , 'Tony' , 'Tanya' ]
