Maison > interface Web > js tutoriel > Maîtriser les arguments de fonction : moins, c'est plus en JavaScript

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

Mary-Kate Olsen
Libérer: 2024-10-03 18:20:30
original
401 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!

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