Articles

A kód szárazon tartása

A kód szárazon tartása egy komponensen belül

először akkor jöttem rá, hogy nem tartom szárazon a kódomat, amikor bejelentkezési űrlapot kellett készítenem. Az alábbi lényeg a bejelentkezési űrlap kódját mutatja.

bejelentkezési űrlap nem száraz

Ez egy általános űrlap, ahol meg kell adnia e-mail címét és jelszavát. handleChange az a visszahívási funkció, amely az űrlapot ellenőrzött összetevővé teszi.

Ha nem ismeri a szabályozott komponenst, akkor lényegében ott van, ahol a React komponens értékei megegyeznek azzal, ami a DOM-on látható, ragaszkodva az igazság egyetlen forrása elvhez.

megtalálja, ahol a kód nem lehet száraz?

tipp: vessen egy pillantást a input attribútumokra.

Ha megnézzük a input attribútumokat és a switch / case utasításokat, az” email “és a” password ” karakterláncok ismétlődnek.

ha véletlenül töröltél egy betűt ezekből a karakterláncokból, a kód még mindig le fog fordítani, de most ez rémálommá tenné a hibakeresést, amikor el kell küldened az e-mail és a jelszó értékeket a hátsó végbe.

mi van akkor is, ha úgy döntöttem, hogy megváltoztatom a bejelentkezési űrlapomat úgy, hogy az e-mail hitelesítő adatként történő használata helyett inkább felhasználónevet akartam használni?

most meg kell találnom az összes helyet, ahol az “e-mail” megjelenik, és “felhasználónév” – re kell változtatnom. Lehet, hogy arra gondolsz: “várj, a szövegszerkesztőm megtalálja a” név “összes példányát, és mindent helyettesíthetek a” felhasználónév ” – re, és egy napot hívhatok.”

és azt mondanám, hogy igazad van, de nem foglalkozik az előző bekezdésben említett véletlen hibák kérdésével.

szóval, hogyan lehet ez a bejelentkezési űrlap száraz? Az ismételt karakterláncokat állandóra mentheti.

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

Ez a húrok összes példányát egyetlen igazságforrássá, állandóvá teszi. Felhívjuk figyelmét, hogy az állandók nagybetűkkel alapuló egyezmény.

tehát most, ha az összes “e-mail” és “jelszó” karakterláncot lecseréli a megfelelő állandókra, a kód az alábbi lényegre fog hasonlítani.

bejelentkezési űrlap száraz

hogyan ítéli meg ez a véletlen hibák kérdését? Ha hibát követ el az állandó névvel (pl. EMAIL to EMAL), A JavaScriptnek fordítási hibája lesz, mivel a helytelen nevű állandó nincs meghatározva.

Ha hibát követ el a karakterláncon vagy az állandó értékén, akkor pontosan meghatározhatja, hogy hol van a hiba, mert csak egy sor van, ahol ezt az értéket deklarálják. Ez időt és erőfeszítést takarít meg, alaposan átnézve a kódot a lehetséges kisebb hibák után.