Articles

Keeping Your Code DRY

Keeping Your Code DRY Within a Component

the first time I dangered I was not keeping my code DRY was when I had to make a log-in form. Alla oleva pääsisältö näyttää log-in-lomakkeeni koodin.

Login Form Non-DRY

Tämä on yleinen muoto, johon pitää syöttää sähköposti ja salasana. handleChange on takaisinkutsufunktio, joka tekee muodosta hallitun komponentin.

Jos ei tunne kontrolloitua komponenttia, se on oleellisesti siinä, missä Reaktiokomponentin arvot ovat samat kuin Dom: ssä, kiinni yhden totuuden lähteen periaatteessa.

Löydätkö, missä koodi ei välttämättä ole kuiva?

Vihje: katsokaa input attribuutteja.

jos katsoo input attribuutteja ja switch / case-lausekkeita, merkkijonot ”email” ja ”password” toistuvat.

Jos olet vahingossa poistanut kirjaimen noista merkkijonoista, koodi silti kokoaa, mutta nyt se tekisi virheenkorjauksesta painajaisen, kun pitää lähettää sähköpostin ja salasanan arvot loppupäähän.

myös, mitä jos päättäisin muuttaa sisäänkirjautumislomakettani siten, että sähköpostin käyttämisen sijaan haluaisin käyttää käyttäjänimeä?

nyt pitää löytää kaikki paikat, joissa ”sähköposti” näkyy ja vaihtaa se ”käyttäjätunnukseksi”. Saatat ajatella: ”odota, tekstieditori voi löytää kaikki esiintymät” nimi ”ja voin korvata sen kaiken” käyttäjätunnus ” ja soittaa sille päivä.”

ja sanoisin, että olet oikeassa, mutta siinä ei käsitellä edellisessä kappaleessa mainittuja tahattomia virheitä.

Joten, miten tämä log-in-muoto voi olla kuiva? Voit tallentaa toistuvat Jouset vakio.

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

Tämä kanavoi kaikki näiden merkkijonojen esiintymät yhdeksi totuuden lähteeksi, vakioksi. Huomaa, että vakiot on aktivoitu sopimuksen perusteella.

joten nyt, jos korvaat kaikki ”sähköposti” – ja ”salasana” – merkkijonot niiden vastaavilla vakioilla, koodi näyttää alla olevalta olennaiselta.

Log-in Form DRY

miten tämä ratkaisee vahingossa tapahtuneet virheet? Jos teet virheen vakionimellä (esim. EMAIL to EMAL), Javascriptillä on kokoamisvirhe, koska virheellistä nimettyä vakiota ei ole määritelty.

Jos teet merkkijonolle virheen eli vakion arvon, voit tarkasti osoittaa missä virhe on, koska on vain yksi rivi, jolla kyseinen arvo ilmoitetaan. Tämä säästää aikaa ja vaivaa etsivät perusteellisesti koodin mahdollisia pieniä virheitä.