Articles

uw Code droog houden

uw Code droog houden binnen een Component

De eerste keer dat ik me realiseerde dat ik mijn code niet droog hield was toen ik een inlogformulier moest maken. De kern hieronder toont de code voor mijn log-in formulier.

Login Form Non-DRY

Dit is een algemeen formulier waarop u uw e-mail en wachtwoord moet invoeren. handleChange is de callback functie die van de vorm een gecontroleerd onderdeel maakt.

als u niet bekend bent met een gecontroleerd component, is het in wezen waar de waarden van de React component hetzelfde zijn als wat op de DOM wordt getoond, waarbij het principe van de enige bron van waarheid wordt nageleefd.

kunt u vinden waar de code niet droog mag zijn?

Hint: kijk eens naar deinput attributen.

Als u de input attributen en de switch/case statements bekijkt, worden de strings “email” en “password” herhaald.

Als u per ongeluk een letter uit die tekenreeksen hebt verwijderd, zal de code nog steeds compileren, maar dat zou het debuggen een nachtmerrie maken wanneer u de e-mail-en wachtwoordwaarden naar de back-end moet sturen.

ook, wat als ik besloot om mijn log-in formulier zodanig te wijzigen dat in plaats van het gebruik van e-mail als een referentie, ik wilde een Gebruikersnaam te gebruiken in plaats van?

nu moet ik alle plaatsen vinden waar ” email “verschijnt en deze veranderen in”Gebruikersnaam”. Je zou kunnen denken: “wacht, mijn teksteditor kan alle instanties van “naam” vinden en ik kan het allemaal vervangen door “gebruikersnaam” en noem het een dag.”

en ik zou zeggen dat je gelijk hebt, maar het gaat niet over het probleem van eventuele toevallige fouten genoemd in de vorige paragraaf.

dus, hoe kan dit aanmeldformulier droog zijn? U kunt de herhaalde tekenreeksen opslaan op een constante.

const EMAIL = "email"
const PASSWORD = "password"

Dit leidt alle instanties van deze strings naar een enkele bron van waarheid, een constante. Houd er rekening mee dat de constanten worden gekapitaliseerd op basis van conventie.

dus nu, als je alle “email” en “password” strings vervangt door hun respectievelijke constanten, zal de code eruit zien als de kern hieronder.

Log-in Form DRY

Hoe beoordeelt dit het probleem van toevallige fouten? Als u een fout maakt met de constante naam (bijvoorbeeld EMAIL to EMAL), zal JavaScript een compilatiefout hebben omdat de onjuiste benoemde constante niet is gedefinieerd.

Als u een fout maakt op de tekenreeks, of de waarde van de constante, kunt u precies bepalen waar de fout is, omdat er slechts één regel is waar die waarde wordt gedeclareerd. Dit bespaart tijd en moeite om grondig door uw code te kijken naar mogelijke kleine fouten.