Heim  >  Artikel  >  Web-Frontend  >  # Ersetzen Sie die generische Validierung durch wiederverwendbare Funktionen

# Ersetzen Sie die generische Validierung durch wiederverwendbare Funktionen

王林
王林Original
2024-09-03 14:35:08694Durchsuche

# 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
   }
}

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
   }
}

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
}

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
}

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
}

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];

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);

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);

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

Ich kann eleganteren Code schreiben:

const numbers = array.filter(checkIsNullish);

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
  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
  }

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!

Stellungnahme:
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