Articles

udržování kódu v suchu

udržování kódu v suchu v komponentě

poprvé jsem si uvědomil, že neudržuji svůj kód v suchu, když jsem musel vytvořit přihlašovací formulář. Podstata níže ukazuje kód pro můj přihlašovací formulář.

Přihlašovací Formulář Non-SUCHÉ

Toto je obecný formulář, kde musíte zadat váš e-mail a heslo. handleChange je funkce zpětného volání, díky které je formulář řízenou součástí.

Pokud nejste obeznámeni s řízenou komponentou, je to v podstatě tam, kde jsou hodnoty ze složky React stejné jako hodnoty zobrazené na DOM, dodržující princip jediného zdroje pravdy.

můžete zjistit, kde kód nemusí být suchý?

Tip: Podívejte se nainput atributy.

Pokud se podíváte na atributy input a příkazy switch/case, řetězce „email“ a „password“ se opakují.

Pokud jste omylem smazané dopis z těchto řetězců, kód bude pořád kompilovat, ale teď, že by ladění noční můra, když potřebujete poslat e-mail a heslo hodnoty na back-end.

také, co když jsem se rozhodl změnit svůj přihlašovací formulář tak, že místo použití e-mailu jako pověření, chtěl jsem místo toho použít uživatelské jméno?

nyní musím najít všechna místa, kde se objeví „e-mail“, a změnit jej na „uživatelské jméno“. Možná si myslíte: „počkejte, můj textový editor může najít všechny instance „name“ a mohu to všechno nahradit „username“ a nazvat to den.“

a řekl bych, že máte pravdu, ale neřeší problém případných náhodných chyb uvedených v předchozím odstavci.

Jak tedy může být tento přihlašovací formulář suchý? Opakované řetězce můžete uložit na konstantu.

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

Tento trychtýř všechny instance těchto řetězců do jediného zdroje pravdy, konstanty. Vezměte prosím na vědomí, že konstanty jsou velkými písmeny na základě konvence.

Pokud nyní nahradíte všechny řetězce „E-mail“ a „heslo“ jejich příslušnými konstantami, kód bude vypadat jako podstata níže.

Přihlásit-v Podobě SUCHÉ

Jak to vyjádřit otázkou náhodné chyby? EMAIL to EMAL), JavaScript bude mít chybu kompilace, protože nesprávná pojmenovaná konstanta není definována.

Pokud uděláte chybu na řetězci nebo na hodnotě konstanty, můžete přesně určit, kde je chyba, protože existuje pouze jeden řádek, kde je tato hodnota deklarována. To šetří čas a úsilí při důkladném prohledávání kódu pro případné drobné chyby.