Heim > Web-Frontend > js-Tutorial > Hauptteil

# Ersetzen Sie die generische Validierung durch wiederverwendbare Funktionen

王林
Freigeben: 2024-09-03 14:35:08
Original
715 Leute haben es durchsucht

# Replace Generic Validation with Reusable Functions

JavaScript- und TypeScript-Entwickler stellen oft fest, dass sie immer wieder dieselben Bedingungen schreiben. Wenn Sie ein Webentwickler sind, sind Sie wahrscheinlich auf Code wie diesen gestoßen:

const handleSaveTextKeydown = (event: KeyboardEvent) => {
   if (event.key === 'Enter') {
    //... save text
   }
}
Nach dem Login kopieren

In diesem Fall ist event.key vom Typ string, und es ist leicht, Fehler einzuführen, indem beispielsweise versehentlich ein Leerzeichen in „Enter“ eingefügt wird.

Warum kapseln Sie diese Bedingung nicht in einer Funktion?

const handleSaveTextKeydown = (event: KeyboardEvent) => {
   if (checkIsEnterKey(event.key)) {
    //... save text
   }
}
Nach dem Login kopieren

Dadurch wird sichergestellt, dass alle Prüfungen für die Eingabetaste konsistent und zuverlässig sind.

Bedenken Sie nun diese Bestätigung:

type Value = null | object;

const value = {} as Value;

if (typeof value === 'object') {
  value; // value type is null | object
}
Nach dem Login kopieren

Obwohl TypeScript intelligent ist, bleibt der Wert innerhalb der Bedingung vom Typ Wert. Dies liegt daran, dass typeof null „Objekt“ zurückgibt.

Also müssen Sie schreiben:

if (value !== null && typeof value === 'object') {
  value; // value type is object
}
Nach dem Login kopieren

Viele Entwickler kapseln dies möglicherweise nicht in eine Funktion und schreiben es stattdessen wiederholt, wenn sie auf diese Situation stoßen.

Wie oft haben Sie in Ihrem Leben über denselben Zustand geschrieben?

Wie oft haben Sie denselben Fehler gemacht?

Wie oft werden Sie die gleiche Bedingung in Zukunft noch schreiben?

Wenn ich es wäre, würde ich Folgendes tun:

if (checkIsObject(value)) {
  value; // value type is object
}
Nach dem Login kopieren

Es gibt viele Vorteile, generische Bedingungen in Funktionen zu kapseln.

Betrachten Sie das folgende Beispiel:

const array = [0, 1, 2, 3, 4, 5, null, undefined];
Nach dem Login kopieren

Lassen Sie uns ein Array erstellen, das nur Nullwerte ausschließt.

Sie könnten der Kürze Priorität einräumen und es so schreiben:

const numbers = array.filter(Boolean);
Nach dem Login kopieren

Leider ist das nicht ideal. 0 wird ebenfalls als falsch ausgewertet und ausgeschlossen. Sie müssen also Folgendes schreiben:

const numbers = array.filter(item => item !== null && item !== undefined);
Nach dem Login kopieren

Fühlt sich das nicht wie hässlicher, nicht wiederverwendbarer Code an?

Ich kann eleganteren Code schreiben:

const numbers = array.filter(checkIsNullish);
Nach dem Login kopieren

Hören Sie auf, wiederholt allgemeine Bedingungen zu schreiben. Es führt nur zu Fehlern und der Code wird schlechter lesbar.

Lassen Sie mich eine von mir erstellte Bibliothek namens checker vorstellen.

Diese Hilfsfunktionsbibliothek stellt häufig verwendete Bedingungen in der allgemeinen Webentwicklung und der Low-Level-Entwicklung als Funktionen dar. Alle Funktionen nehmen eine Eingabe entgegen und geben einen booleschen Wert zurück.

Zum Zeitpunkt des Schreibens dieses Artikels bietet es eine Fülle von Funktionen zur Verarbeitung von Datentypen wie Zeichenfolgen, Zahlen, booleschen Werten und Nullwerten. Alle Funktionen sind getestet, dokumentiert und einfach zu verwenden.

Schauen wir uns einige Beispiele aus der Praxis an.

Die von dieser Bibliothek bereitgestellten Pakete werden alle auf JSR veröffentlicht. Sie können problemlos in NPM-, PNPM-, Yarn-, Bun- und Deno-Projekten installiert werden.

Hier nehmen wir das @checker/string-Paket als Beispiel mit NPM.

  1. Installieren Sie das Paket

Führen Sie den folgenden Befehl in Ihrem Projektverzeichnis aus:

  npx jsr add @checker/string
Nach dem Login kopieren
  1. Nutzung der Funktionen
  import { checkIsNotEmptyString, checkIsIndexFound } from "@checker/string";

  const value = "Hello";

  const formatted = value.trim();

  if (checkIsNotEmptyString(formatted)) {
    // formatted !== ''
    // When formatted is not an empty string
  }

  const index = value.indexOf("el");

  if (checkIsIndexFound(index)) {
    // index !== -1
    // When "el" is found in value
  }
Nach dem Login kopieren

Ich verwende keine logischen Negationsoperatoren wie !SOME_CONDITION, um einen booleschen Wert umzukehren. Dies liegt daran, dass es implizit ist und das einfache Umkehren des booleschen Werts durch Hinzufügen oder Weglassen zu vielen gefährlichen Situationen führen kann.

Daher sind für alle Funktionen entsprechende checkIsNot~-Funktionen definiert.

Generische Bedingungen in Funktionen kapseln. Auf diese Weise wird der Code besser lesbar und Fehler lassen sich leichter erkennen.

Vielen Dank fürs Lesen.

Das obige ist der detaillierte Inhalt von# Ersetzen Sie die generische Validierung durch wiederverwendbare Funktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage