naming cheatsheet
1.0.0
Dinge zu benennen ist schwer. Dieses Blatt versucht, es einfacher zu machen.
Obwohl diese Vorschläge auf jede Programmiersprache angewendet werden können, werde ich JavaScript verwenden, um sie in der Praxis zu veranschaulichen.
Verwenden Sie die englische Sprache, wenn Sie Ihre Variablen und Funktionen benennen.
/* Bad */
const primerNombre = 'Gustavo'
const amigos = [ 'Kate' , 'John' ]
/* Good */
const firstName = 'Gustavo'
const friends = [ 'Kate' , 'John' ]Ob es Ihnen gefällt oder nicht, Englisch ist die dominierende Sprache in der Programmierung: Die Syntax aller Programmiersprachen ist in englischer Sprache sowie unzählige Dokumentationen und Bildungsmaterialien geschrieben. Indem Sie Ihren Code in Englisch schreiben, erhöhen Sie den Zusammenhalt dramatisch.
Wählen Sie eine Namenskonvention aus und folgen Sie ihr. Es kann camelCase oder snake_case sein oder wie auch immer, es spielt keine Rolle. Was zählt, ist, dass es konsequent bleibt.
/* 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 Ein Name muss kurz , intuitiv und beschreibend sein:
/* 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 Verwenden Sie keine Kontraktionen. Sie tragen nur zu einer verminderten Lesbarkeit des Codes bei. Es mag schwierig sein, einen kurzen, beschreibenden Namen zu finden, aber die Kontraktion ist keine Entschuldigung dafür.
/* Bad */
const onItmClk = ( ) => { }
/* Good */
const onItemClick = ( ) => { } Ein Name sollte den Kontext, in dem er definiert ist, nicht duplizieren. Entfernen Sie den Kontext immer von einem Namen, wenn dies seine Lesbarkeit nicht verringert.
class MenuItem {
/* Method name duplicates the context (which is "MenuItem") */
handleMenuItemClick = ( event ) => { ... }
/* Reads nicely as `MenuItem.handleClick()` */
handleClick = ( event ) => { ... }
} Ein Name sollte das erwartete Ergebnis widerspiegeln.
/* Bad */
const isEnabled = itemCount > 3
return < Button disabled = { ! isEnabled } />
/* Good */
const isDisabled = itemCount <= 3
return < Button disabled = { isDisabled } />Bei der Benennung von Funktionen gibt es ein nützliches Muster:
prefix? + action (A) + high context (HC) + low context? (LC)
Schauen Sie sich an, wie dieses Muster in der folgenden Tabelle angewendet werden kann.
| Name | Präfix | Aktion (a) | Hoher Kontext (HC) | Niedriger Kontext (LC) |
|---|---|---|---|---|
getPost | get | Post | ||
getPostData | get | Post | Data | |
handleClickOutside | handle | Click | Outside | |
shouldDisplayMessage | should | Display | Message |
Hinweis: Die Reihenfolge des Kontextes beeinflusst die Bedeutung einer Variablen.
shouldUpdateComponentbeispielsweise bedeutet, dass Sie eine Komponente aktualisieren möchten, währendshouldComponentUpdateIhnen mitgeteilt, dass die Komponente auf sich selbst aktualisiert wird und dass Sie nur dann kontrollieren, wann es aktualisiert werden sollte. Mit anderen Worten, hoher Kontext betont die Bedeutung einer Variablen .
Der Verb Teil Ihres Funktionsnamens. Der wichtigste Teil, der für die Beschreibung der Funktion verantwortlich ist.
getGreifen Sie sofort auf Daten zu (dh eine Kurzschließer interner Daten).
function getFruitCount ( ) {
return this . fruits . length
}Siehe auch komponieren.
set Legt eine Variable deklarativ, wobei der Wert A zu Wert B ist.
let fruits = 0
function setFruits ( nextFruits ) {
fruits = nextFruits
}
setFruits ( 5 )
console . log ( fruits ) // 5resetLegt eine Variable auf ihren Anfangswert oder Zustand zurück.
const initialFruits = 5
let fruits = initialFruits
setFruits ( 10 )
console . log ( fruits ) // 10
function resetFruits ( ) {
fruits = initialFruits
}
resetFruits ( )
console . log ( fruits ) // 5fetchAnfrage nach einigen Daten, die eine unbestimmte Zeit benötigen (dh asynchronisierte Anfrage).
function fetchPosts ( postCount ) {
return fetch ( 'https://api.dev/posts' , { ... } )
}removeEntfernt etwas von irgendwoher.
Wenn Sie beispielsweise über eine Sammlung ausgewählter Filter auf einer Suchseite verfügen, ist das Entfernen einer davon aus der Sammlung removeFilter , nicht deleteFilter (und so würden Sie es natürlich auch auf Englisch sagen):
function removeFilter ( filterName , filters ) {
return filters . filter ( ( name ) => name !== filterName )
}
const selectedFilters = [ 'price' , 'availability' , 'size' ]
removeFilter ( 'price' , selectedFilters )Siehe auch löschen.
deleteLöscht etwas aus den Bereichen der Existenz.
Stellen Sie sich vor, Sie sind ein Content -Editor, und es gibt diesen berüchtigten Beitrag, den Sie loswerden möchten. Sobald Sie auf eine glänzende Schaltfläche "Post löschen" geklickt haben, führte das CMS eine deletePost -Aktion aus, nicht removePost .
function deletePost ( id ) {
return database . find ( { id } ) . delete ( )
}Siehe auch entfernen.
composeErstellt neue Daten aus dem vorhandenen. Meistens für Zeichenfolgen, Objekte oder Funktionen anwendbar.
function composePageUrl ( pageName , pageId ) {
return ` ${ pageName . toLowerCase ( ) } - ${ pageId } `
}Siehe auch GET.
handleGriff eine Aktion. Häufig verwendet, wenn eine Rückrufmethode benannt wird.
function handleLinkClick ( ) {
console . log ( 'Clicked a link!' )
}
link . addEventListener ( 'click' , handleLinkClick ) Eine Domäne, auf der eine Funktion arbeitet.
Eine Funktion ist oft eine Aktion auf etwas . Es ist wichtig zu sagen, wie es sich um eine operative Domäne handelt, oder zumindest einen erwarteten Datentyp.
/* 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 ( ) )
}Einige sprachspezifische Annahmen können es ermöglichen, den Kontext wegzulassen. In JavaScript ist es beispielsweise üblich, dass
filterin Array arbeitet. Das Hinzufügen eines explizitenfilterArraywäre unnötig.
-
Das Präfix verbessert die Bedeutung einer Variablen. Es wird selten in Funktionsnamen verwendet.
is Beschreibt einen Merkmal oder Zustand des aktuellen Kontextes (normalerweise boolean ).
const color = 'blue'
const isBlue = color === 'blue' // characteristic
const isPresent = true // state
if ( isBlue && isPresent ) {
console . log ( 'Blue is present!' )
}has Beschreibt, ob der aktuelle Kontext einen bestimmten Wert oder Zustand besitzt (normalerweise boolean ).
/* Bad */
const isProductsExist = productsCount > 0
const areProductsPresent = productsCount > 0
/* Good */
const hasProducts = productsCount > 0should Spiegelt eine positive bedingte Aussage (normalerweise boolean ) in Verbindung mit einer bestimmten Aktion wider.
function shouldUpdateUrl ( url , expectedUrl ) {
return url !== expectedUrl
}min / maxRepräsentiert einen minimalen oder maximalen Wert. Verwendet bei der Beschreibung von Grenzen oder Grenzen.
/**
* 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 / nextGeben Sie den vorherigen oder den nächsten Zustand einer Variablen im aktuellen Kontext an. Verwendet bei der Beschreibung von Zustandsübergängen.
function fetchPosts ( ) {
const prevPosts = this . state . posts
const fetchedPosts = fetch ( '...' )
const nextPosts = concat ( prevPosts , fetchedPosts )
this . setState ( { posts : nextPosts } )
} Wie ein Präfix können Variablennamen singulär oder plural gemacht werden, je nachdem, ob sie einen einzelnen Wert oder mehrere Werte haben.
/* Bad */
const friends = 'Bob'
const friend = [ 'Bob' , 'Tony' , 'Tanya' ]
/* Good */
const friend = 'Bob'
const friends = [ 'Bob' , 'Tony' , 'Tanya' ]
