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존재의 영역에서 무언가를 완전히 지 웁니다.
당신이 콘텐츠 편집자라고 상상해보십시오. 그리고 당신이 제거하고 싶은 악명 높은 게시물이 있습니다. 반짝이는 "Post Delete Post"버튼을 클릭하면 CMS는 removePost 가 아닌 deletePost 작업을 수행했습니다.
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' ]
