Heim > Web-Frontend > js-Tutorial > Hauptteil

Funktionsargumente beherrschen: Weniger ist mehr in JavaScript

Mary-Kate Olsen
Freigeben: 2024-10-03 18:20:30
Original
311 Leute haben es durchsucht

Mastering Function Arguments: Less is More in JavaScript

Hey liebe Entwickler! ? Lassen Sie uns heute auf einen entscheidenden Aspekt beim Schreiben von sauberem, wartbarem JavaScript eingehen: die Verwaltung von Funktionsargumenten

Das Problem mit zu vielen Argumenten

Ist Ihnen schon einmal eine Funktion begegnet, die so aussieht?

function createMenu(title, body, buttonText, cancellable, theme, fontSize, callback) {
  // ...a whole lot of logic here
}
Nach dem Login kopieren

Wenn ja, wissen Sie, wie schmerzhaft es ist, sich die Reihenfolge der Argumente zu merken oder, schlimmer noch, Fehler zu beheben, wenn jemand sie unweigerlich durcheinander bringt. ?

Die Zwei-Argumente-Regel

Hier ist eine goldene Regel: Versuchen Sie, Ihre Funktionen auf zwei Argumente oder weniger zu beschränken.
Warum? Hier sind einige überzeugende Gründe:

  • Verbesserte Testbarkeit: Weniger Argumente bedeuten weniger Testfälle, um alle Möglichkeiten abzudecken.
  • Verbesserte Lesbarkeit: Es ist einfacher, den Zweck einer Funktion auf einen Blick zu verstehen.
  • Reduzierte kognitive Belastung: Weniger mentales Jonglieren mit Parametern für Entwickler, die die Funktion verwenden.

Aber was ist, wenn ich mehr Parameter benötige?

Tolle Frage! Hier kommt die Magie der Objektzerstörung ins Spiel. Schauen Sie sich das an:

function createMenu({ title, body, buttonText, cancellable, theme = 'light', fontSize = 16, callback = () => {} }) {
  // Your implementation here
}

// Usage
createMenu({
  title: "Settings",
  body: "Adjust your preferences",
  buttonText: "Save",
  cancellable: true
});
Nach dem Login kopieren

Die Vorteile dieses Ansatzes

  • Simuliert benannte Parameter: Sie können Argumente in beliebiger Reihenfolge angeben. Selbstdokumentierend: Die Funktionssignatur zeigt deutlich, welche Eigenschaften erwartet werden. Standardwerte: Legen Sie ganz einfach Standardwerte für optionale Parameter fest. Verhindert Nebenwirkungen: Die Strukturierung primitiver Werte von Klonen hilft, versehentliche Mutationen zu vermeiden. Linter-freundlich: Tools können Sie vor ungenutzten Eigenschaften warnen.

Profi-Tipp: TypeScript Boost

Wenn Sie TypeScript verwenden, können Sie noch einen Schritt weiter gehen:

interface MenuOptions {
  title: string;
  body: string;
  buttonText: string;
  cancellable: boolean;
  theme?: 'light' | 'dark';
  fontSize?: number;
  callback?: () => void;
}

function createMenu(options: MenuOptions) {
  // Implementation
}
Nach dem Login kopieren

Dies fügt Typsicherheit und automatische Vervollständigung hinzu und macht Ihren Code noch robuster!

Zusammenfassung

Durch die Übernahme dieses Musters werden Ihre Funktionen flexibler, benutzerfreundlicher und einfacher zu warten. Es ist eine kleine Änderung, die große Auswirkungen auf Ihre Codequalität haben kann.

Was denken Sie über diesen Ansatz? Haben Sie weitere Tipps zum Verwalten von Funktionsargumenten? Lasst uns in den Kommentaren diskutieren!

Viel Spaß beim Codieren! ?

Das obige ist der detaillierte Inhalt vonFunktionsargumente beherrschen: Weniger ist mehr in JavaScript. 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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage