Articles

Halten Sie Ihren Code TROCKEN

Halten Sie Ihren Code innerhalb einer Komponente TROCKEN

Das erste Mal, dass ich merkte, dass ich meinen Code nicht TROCKEN hielt, war, als ich ein Anmeldeformular erstellen musste. Der folgende Kern zeigt den Code für mein Anmeldeformular.

Anmeldeformular Nicht TROCKEN

Dies ist ein generisches Formular, in das Sie Ihre E-Mail-Adresse und Ihr Passwort eingeben müssen. handleChange ist die Callback-Funktion, die das Formular zu einer kontrollierten Komponente macht.

Wenn Sie mit einer kontrollierten Komponente nicht vertraut sind, sind die Werte der Reaktionskomponente im Wesentlichen dieselben wie im DOM, wobei das Single Source of Truth-Prinzip eingehalten wird.

Können Sie herausfinden, wo der Code möglicherweise nicht TROCKEN ist?

Tipp: Schauen Sie sich die input Attribute an.

Wenn Sie sich die input -Attribute und die switch/case-Anweisungen ansehen, werden die Zeichenfolgen „email“ und „password“ wiederholt.

Wenn Sie versehentlich einen Buchstaben aus diesen Zeichenfolgen gelöscht haben, wird der Code immer noch kompiliert, aber das würde das Debuggen zu einem Albtraum machen, wenn Sie die E-Mail- und Kennwortwerte an das Back-End senden müssen.

Was ist, wenn ich mein Anmeldeformular so ändern möchte, dass ich anstelle der Verwendung von E-Mail als Anmeldeinformationen einen Benutzernamen verwenden möchte?

Jetzt muss ich alle Stellen finden, an denen „E-Mail“ angezeigt wird, und sie in „Benutzername“ ändern. Sie denken vielleicht: „Warten Sie, mein Texteditor kann alle Instanzen von „name“ finden und ich kann alles durch „Benutzername“ ersetzen und es einen Tag nennen.“

Und ich würde sagen, Sie haben Recht, aber das Problem der im vorherigen Absatz erwähnten zufälligen Fehler wird nicht behoben.

Also, wie kann dieses Anmeldeformular TROCKEN sein? Sie können die wiederholten Zeichenfolgen in einer Konstanten speichern.

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

Dies trichtert alle Instanzen dieser Zeichenfolgen in eine einzige Quelle der Wahrheit, eine Konstante. Bitte beachten Sie, dass die Konstanten basierend auf Konventionen groß geschrieben werden.

Wenn Sie nun alle Zeichenfolgen „E-Mail“ und „Passwort“ durch ihre jeweiligen Konstanten ersetzen, sieht der Code wie folgt aus.

Anmeldeformular TROCKEN

Wie beurteilt dies das Problem versehentlicher Fehler? Wenn Sie einen Fehler mit dem Konstantennamen machen (z. B. EMAIL bis EMAL ), hat JavaScript einen Kompilierungsfehler, da die falsch benannte Konstante nicht definiert ist.

Wenn Sie einen Fehler in der Zeichenfolge oder dem Wert der Konstante machen, können Sie genau bestimmen, wo der Fehler liegt, da es nur eine Zeile gibt, in der dieser Wert deklariert ist. Dies spart Zeit und Mühe, Ihren Code gründlich nach möglichen kleineren Fehlern zu durchsuchen.