2
votes

les fonctions util exportent directement par rapport à la classe util

Dans mon application react, je souhaite utiliser des utilitaires. J'ai vu 2 approches différentes. La première consiste simplement à créer la fonction et à l'exporter. La deuxième est la création d'une classe Util et l'exportation d'un objet afin qu'il ne puisse pas être instancié (classe statique).

export default redirectIfAuthenticated = (isAuthenticated, history, screen) => {
   if (isAuthenticated) 
      history.push(screen);
}

class Util {
   redirectIfAuthenticated = (isAuthenticated, history, screen) => {
      if (isAuthenticated) 
         history.push(screen);
   }
}

export default new Util();

Quelle est la meilleure approche ici et pourquoi?

javascript reactjs

1 commentaires

Vous aurez peut-être plus de chance de publier ceci sur Révision du code .

5 Réponses :

1
votes

Vous pouvez le faire dans les deux sens, mais créer une classe util et définir toutes vos fonctions est une manière standard de le faire. Par exemple:

class Util {
   redirectIfAuthenticated = (isAuthenticated, history, screen) => {
      if (isAuthenticated) 
         history.push(screen);
   }
  anotherFunction = () => {
     // your code

}

export default Util;

Vous pouvez donc définir ici plusieurs fonctions et importer ces fonctions depuis la classe util pour les utiliser n'importe où.

0 commentaires

1
votes

La classe peut être utilisée lorsqu'elle a des fonctions étroitement liées les unes aux autres. Si vos fonctions utils ne sont pas liées les unes aux autres, vous pouvez utiliser la deuxième approche. Je recommanderais d'utiliser la deuxième approche car les fonctions util ne sont généralement pas liées entre elles. Les fonctions util sont développées pour pouvoir être réutilisées dans d'autres composants.

0 commentaires

2
votes

L'utilisation de fonctions séparées est généralement la méthode préférée en raison du tremblement de l'arbre.

La secousse d'arbre est le processus de suppression des importations inutilisées par votre outil de construction (par exemple, Webpack) afin de minimiser votre code. Les classes sont beaucoup plus difficiles à réduire pour ces outils, c'est donc quelque chose à considérer.

0 commentaires

2
votes

Les classes Singleton sont souvent considérées comme des antipatterns. Util est un anti-modèle dans ce cas. Une classe est utilisée comme espace de noms, tandis que les modules sont déjà là pour fournir des espaces de noms.

L'utilisation de l'exportation par défaut pour plusieurs exportations les empêchera d'être transformées en arborescence.

export default redirectIfAuthenticated = ... est une erreur, il en résulte la création de la variable globale redirectIfAuthenticated en mode lâche et en erreur en mode strict.

Au cas où il ne devrait y en avoir qu'une export, l'exportation par défaut peut être utilisée:

export const redirectIfAuthenticated = (isAuthenticated, history, screen) => { ... };

Dans le cas où il peut y avoir plusieurs exportations (même s'il n'y en a actuellement qu'une), les exportations nommées peuvent être utilisées:

export default (isAuthenticated, history, screen) => { ... };

0 commentaires

1
votes

Je pense qu'en général, c'est quelque chose que les gens qui passent à JavaScript à partir d'autres langues frappent lorsqu'ils commencent à travailler. Tout n'a pas besoin (ou ne devrait pas être) d'une classe, et vous passerez un meilleur moment lorsque vous commencerez à coder de cette façon.

De plus, si vous voulez juste que vos importations soient belles, si vous transpilez, vous pouvez généralement créer des alias pour vos chemins.

0 commentaires