Maison > interface Web > js tutoriel > le corps du texte

Maîtriser les arguments de fonction : moins, c'est plus en JavaScript

Mary-Kate Olsen
Libérer: 2024-10-03 18:20:30
original
316 Les gens l'ont consulté

Mastering Function Arguments: Less is More in JavaScript

Salut amis développeurs ! ? Aujourd'hui, abordons un aspect crucial de l'écriture de JavaScript propre et maintenable : la gestion des arguments de fonction

Le problème avec trop d'arguments

Avez-vous déjà rencontré une fonction qui ressemble à ceci ?

function createMenu(title, body, buttonText, cancellable, theme, fontSize, callback) {
  // ...a whole lot of logic here
}
Copier après la connexion

Si c'est le cas, vous connaissez la douleur d'essayer de se souvenir de l'ordre des arguments, ou pire, de déboguer lorsque quelqu'un les mélange inévitablement. ?

La règle des deux arguments

Voici une règle d'or : Essayez de limiter vos fonctions à deux arguments ou moins.
Pourquoi? Voici quelques raisons impérieuses :

  • Testabilité améliorée : moins d'arguments signifie moins de cas de test pour couvrir toutes les possibilités.
  • Lisibilité améliorée : il est plus facile de comprendre l'objectif d'une fonction en un coup d'œil.
  • Charge cognitive réduite : Moins de jonglerie mentale avec les paramètres pour les développeurs utilisant la fonction.

Mais que se passe-t-il si j’ai besoin de plus de paramètres ?

Excellente question ! C'est là qu'intervient la magie de la déstructuration des objets. Regardez ceci :

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
});
Copier après la connexion

Les avantages de cette approche

  • Simule les paramètres nommés : vous pouvez fournir des arguments dans n'importe quel ordre. Auto-documentation : La signature de la fonction montre clairement quelles propriétés sont attendues. Valeurs par défaut : définissez facilement les valeurs par défaut pour les paramètres facultatifs. Prévient les effets secondaires : Déstructuration des valeurs primitives des clones, aidant à éviter les mutations accidentelles. Linter-Friendly : les outils peuvent vous avertir des propriétés inutilisées.

Conseil de pro : TypeScript Boost

Si vous utilisez TypeScript, vous pouvez aller plus loin :

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

function createMenu(options: MenuOptions) {
  // Implementation
}
Copier après la connexion

Cela ajoute la sécurité des types et la saisie semi-automatique, rendant votre code encore plus robuste !

Conclusion

En adoptant ce modèle, vous constaterez que vos fonctions deviennent plus flexibles, plus faciles à utiliser et plus simples à entretenir. C'est un petit changement qui peut avoir un impact important sur la qualité de votre code.

Que pensez-vous de cette approche ? Avez-vous d'autres conseils pour gérer les arguments de fonction ? Discutons-en dans les commentaires !

Bon codage ! ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal