Articles

Hold din kode tør

Hold din kode tør inden for en komponent

første gang jeg indså, at jeg ikke holdt min kode tør, var da jeg skulle lave en log-in-formular. Kernen nedenfor viser koden til min log-in formular.

Login Form Non-DRY

Dette er en generisk formular, hvor du skal indtaste din e-mail og adgangskode. handleChange er tilbagekaldsfunktionen, der gør formularen til en kontrolleret komponent.

Hvis du ikke er bekendt med en kontrolleret komponent, er det i det væsentlige, hvor værdierne fra React-komponenten er de samme som det, der vises på DOM, og overholder princippet om en enkelt kilde til sandhed.

kan du finde, hvor koden muligvis ikke er tør?

tip: Tag et kig påinput attributter.

Hvis du kigger påinput attributter og skift / sag udsagn, gentages strengene “email” og “adgangskode”.

Hvis du ved et uheld har slettet et brev fra disse strenge, vil koden stadig kompilere, men nu ville det gøre fejlfinding til et mareridt, når du skal sende e-mail-og adgangskodeværdierne til bagenden.

hvad nu, hvis jeg besluttede at ændre min log-in-formular, så jeg i stedet for at bruge e-mail som legitimationsoplysninger ville bruge et brugernavn i stedet?

nu skal jeg finde alle de steder, hvor “email” vises og ændre det til “brugernavn”. Du tænker måske: “vent, min teksteditor kan finde alle forekomster af “navn”, og jeg kan erstatte det hele med “brugernavn” og kalde det en dag.”

og jeg vil sige, at du har ret, men det løser ikke problemet med utilsigtede fejl, der er nævnt i det foregående afsnit.

så hvordan kan denne log-in formular være tør? Du kan gemme de gentagne strenge til en konstant.

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

dette trækker alle forekomster af disse strenge til en enkelt sandhedskilde, en konstant. Bemærk, at konstanterne aktiveres baseret på konvention.

så nu, hvis du erstatter alle “e-mail” og “adgangskode” strenge med deres respektive konstanter, vil koden se ud som kernen nedenfor.

Log-in Form DRY

hvordan afgør dette spørgsmålet om utilsigtede fejl? EMAILtil EMAL), vil JavaScript have en kompileringsfejl, da den forkerte navngivne konstant ikke er defineret.

Hvis du laver en fejl på strengen eller værdien af konstanten, kan du nøjagtigt bestemme, hvor fejlen er, fordi der kun er en linje, hvor denne værdi er erklæret. Dette sparer tid og kræfter på at kigge grundigt igennem din kode for potentielle mindre fejl.