naming cheatsheet
1.0.0
Nombrar las cosas es difícil. Esta hoja intenta hacerlo más fácil.
Aunque estas sugerencias se pueden aplicar a cualquier lenguaje de programación, usaré JavaScript para ilustrarlas en la práctica.
Use el idioma inglés al nombrar sus variables y funciones.
/* Bad */
const primerNombre = 'Gustavo'
const amigos = [ 'Kate' , 'John' ]
/* Good */
const firstName = 'Gustavo'
const friends = [ 'Kate' , 'John' ]Nos guste o no, el inglés es el lenguaje dominante en la programación: la sintaxis de todos los lenguajes de programación está escrito en inglés, así como innumerables documentos y materiales educativos. Al escribir su código en inglés, aumenta drásticamente su cohesión.
Elija una convención de nombres y sígala. Puede ser camelCase , o snake_case , o de todos modos, no importa. Lo que importa es que permanezca consistente.
/* 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 Un nombre debe ser corto , intuitivo y descriptivo :
/* 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 No use contracciones. No contribuyen a nada más que una disminución de la legibilidad del código. Encontrar un nombre corto y descriptivo puede ser difícil, pero la contracción no es una excusa para no hacerlo.
/* Bad */
const onItmClk = ( ) => { }
/* Good */
const onItemClick = ( ) => { } Un nombre no debe duplicar el contexto en el que se define. Siempre elimine el contexto de un nombre si eso no disminuye su legibilidad.
class MenuItem {
/* Method name duplicates the context (which is "MenuItem") */
handleMenuItemClick = ( event ) => { ... }
/* Reads nicely as `MenuItem.handleClick()` */
handleClick = ( event ) => { ... }
} Un nombre debe reflejar el resultado esperado.
/* Bad */
const isEnabled = itemCount > 3
return < Button disabled = { ! isEnabled } />
/* Good */
const isDisabled = itemCount <= 3
return < Button disabled = { isDisabled } />Hay un patrón útil a seguir al nombrar funciones:
prefix? + action (A) + high context (HC) + low context? (LC)
Eche un vistazo a cómo se puede aplicar este patrón en la tabla a continuación.
| Nombre | Prefijo | Acción (a) | Contexto alto (HC) | Contexto bajo (LC) |
|---|---|---|---|---|
getPost | get | Post | ||
getPostData | get | Post | Data | |
handleClickOutside | handle | Click | Outside | |
shouldDisplayMessage | should | Display | Message |
Nota: El orden de contexto afecta el significado de una variable. Por ejemplo,
shouldUpdateComponentsignifica que está a punto de actualizar un componente, mientras queshouldComponentUpdatele indica que el componente se actualizará en sí mismo, y que está controlando cuándo debe actualizarse. En otras palabras, el alto contexto enfatiza el significado de una variable .
La parte verbal del nombre de su función. La parte más importante responsable de describir lo que hace la función.
getAccede a los datos inmediatamente (es decir, el obtador de datos internos).
function getFruitCount ( ) {
return this . fruits . length
}Ver también componer.
set Establece una variable de manera declarativa, con el valor A al valor B .
let fruits = 0
function setFruits ( nextFruits ) {
fruits = nextFruits
}
setFruits ( 5 )
console . log ( fruits ) // 5resetEstablece una variable a su valor o estado inicial.
const initialFruits = 5
let fruits = initialFruits
setFruits ( 10 )
console . log ( fruits ) // 10
function resetFruits ( ) {
fruits = initialFruits
}
resetFruits ( )
console . log ( fruits ) // 5fetchSolicitud de algunos datos, que lleva un tiempo indeterminado (es decir, solicitud de async).
function fetchPosts ( postCount ) {
return fetch ( 'https://api.dev/posts' , { ... } )
}removeElimina algo de alguna parte.
Por ejemplo, si tiene una colección de filtros seleccionados en una página de búsqueda, eliminar uno de ellos de la colección es removeFilter , no deleteFilter (y así es como también lo diría naturalmente en inglés):
function removeFilter ( filterName , filters ) {
return filters . filter ( ( name ) => name !== filterName )
}
const selectedFilters = [ 'price' , 'availability' , 'size' ]
removeFilter ( 'price' , selectedFilters )Ver también Eliminar.
deleteBorra completamente algo de los reinos de la existencia.
Imagine que es un editor de contenido, y existe esa notoria publicación de la que desea deshacerse. Una vez que ha hecho clic en un botón brillante "Eliminar post", el CMS realizó una acción deletePost , no removePost .
function deletePost ( id ) {
return database . find ( { id } ) . delete ( )
}Ver también Eliminar.
composeCrea nuevos datos del existente. Principalmente aplicable a cadenas, objetos o funciones.
function composePageUrl ( pageName , pageId ) {
return ` ${ pageName . toLowerCase ( ) } - ${ pageId } `
}Ver también Get.
handleManeja una acción. A menudo se usa al nombrar un método de devolución de llamada.
function handleLinkClick ( ) {
console . log ( 'Clicked a link!' )
}
link . addEventListener ( 'click' , handleLinkClick ) Un dominio en el que opera una función.
Una función es a menudo una acción en algo . Es importante establecer cuál es su dominio operable, o al menos un tipo de datos esperado.
/* 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 ( ) )
}Algunos supuestos específicos del lenguaje pueden permitir omitir el contexto. Por ejemplo, en JavaScript, es común que
filterfuncione en una matriz. AgregarfilterArrayexplícito sería innecesario.
-
El prefijo mejora el significado de una variable. Raramente se usa en los nombres de funciones.
is Describe una característica o estado del contexto actual (generalmente boolean ).
const color = 'blue'
const isBlue = color === 'blue' // characteristic
const isPresent = true // state
if ( isBlue && isPresent ) {
console . log ( 'Blue is present!' )
}has Describe si el contexto actual posee un cierto valor o estado (generalmente boolean ).
/* Bad */
const isProductsExist = productsCount > 0
const areProductsPresent = productsCount > 0
/* Good */
const hasProducts = productsCount > 0should Refleja una declaración condicional positiva (generalmente boolean ) junto con una cierta acción.
function shouldUpdateUrl ( url , expectedUrl ) {
return url !== expectedUrl
}min / maxRepresenta un valor mínimo o máximo. Utilizado al describir límites o límites.
/**
* 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 / nextIndique el estado anterior o el siguiente de una variable en el contexto actual. Utilizado al describir las transiciones de estado.
function fetchPosts ( ) {
const prevPosts = this . state . posts
const fetchedPosts = fetch ( '...' )
const nextPosts = concat ( prevPosts , fetchedPosts )
this . setState ( { posts : nextPosts } )
} Al igual que un prefijo, los nombres variables se pueden hacer singulares o plurales dependiendo de si contienen un valor único o valores múltiples.
/* Bad */
const friends = 'Bob'
const friend = [ 'Bob' , 'Tony' , 'Tanya' ]
/* Good */
const friend = 'Bob'
const friends = [ 'Bob' , 'Tony' , 'Tanya' ]
