web-dev-qa-db-fra.com

Code Jumpy avec des noms de fonction descriptifs

J'établis actuellement des fonctionnalités sur une page. Lors de l'écriture de JS, j'ai créé un ensemble de fonctions plus petites comme FindCarouselLocations(elem), GetImagesFromLibrary(url) et BuildCarousels(images, locs) qui utilisent toutes un sous-ensemble de fonctionnalités trouvées dans mon JS global fichier.

Lors de la conception d'une page qui est assez fortement dépendante de JS, est-il judicieux d'avoir une seule fonction qui raconte une histoire à travers d'autres appels de fonction? Avec les exemples de fonctions ci-dessus, je ferais:

// previous function definitions...

function AddImageCarousels (){    
    var imageLibraryUrl = 'http://mysite.com';
    var parentElem = document.querySelectorAll('.image-carousel');

    var images = GetImagesFromLibrary(imageLibraryUrl);
    var locs = FindCarouselLocations(parentElem);
    BuildCarousels(images, locs);
}
document.addEventListener('DOMContentLoaded', AddImageCarousels, false);

Ce qui, je pense, raconte une histoire sur ce qui se passe lorsque la page se charge. Je pourrais également supprimer certaines abstractions, mais je devrais alors commencer à ajouter plus de commentaires ou à refactoriser d'une autre manière. Personnellement, je pense que cela crée un peu d'auto-documentation, mais je suis assez nouveau dans les pratiques de développement ...

Si j'avais beaucoup de choses en cours dans la page, j'irais même plus loin et créerais une fonction qui pourrait ressembler à ceci:

// previous function definitions...
function AddImageCarousels(){ /* */ }

function BuildPage () {
    AddImageCarousels();
    AddChatbot();
    AddMaintenanceNotification();
}
document.addEventListener('DOMContentLoaded', BuildPage, false);

Où chaque fonctionnalité principale a été définie par une seule fonction, mais ces fonctions sont construites de manière similaire à la fonction AddImageCarousels.

Est-ce une bonne pratique ou une odeur de code qui implique un besoin de meilleure conception? Et si c'est le cas, quelle serait une meilleure alternative?

Je préfère conserver les fichiers de production dans le moins de fichiers séparés possible pour réduire le nombre d'appels HTTP, mais chaque fonctionnalité se trouve généralement dans son propre fichier de développement et transposée plus tard dans le même .js.

javascriptpatterns-and-practices
9
KGlasier

est-il logique d'avoir une seule fonction qui raconte une histoire à travers d'autres appels de fonction?

Oui.

Mais l'utilisation d'autres appels de fonction n'est pas ce qui est si bien avec ce code. Ce qui est agréable, c'est qu'il raconte une histoire courte, à un niveau d'abstraction, et qu'il utilise de bons noms. L'utilisation d'autres appels de fonction est simplement la façon dont vous avez réussi cela.

La résolution d'un problème complexe avec des fonctions courtes nécessite de nombreuses fonctions. De nombreuses fonctions nécessitent de nombreux noms. Par conséquent, le facteur limitant ici est votre capacité à trouver de bons noms. Si vous ne pouvez pas me donner de bons noms, donnez-moi de longues fonctions. Épargnez-moi les mauvais noms sur les fonctions courtes.

Une autre bonne chose est qu'il est clair quelles fonctions fonctionnent par effets secondaires et lesquelles fonctionnent en renvoyant une valeur. C'est une caractéristique de suivre Ségrégation de requête de commande .

Le modèle que je vois dans AddImageCarousels() est: construire des dépendances et les passer à quelque chose qui fait ce que nous avions promis de faire. Cette séparation garantit que des versions paramétrées des fonctions existent mais ne supprime pas la construction des dépendances sur tout votre point d'entrée.

La limitation de cette conception est que les fonctions d'ajout ne peuvent pas être partagées. À moins que cela ne devienne critique, je tolérerais simplement la duplication en faveur d'une séparation nette.

Un autre problème est que BuildCarousels() en cours de paramétrage n'est utile que s'il est appelé de plusieurs manières. Cette autre façon a besoin d'un nom qui se différencie de AddImageCarousels(). Encore une fois, ce qui limite votre pouvoir ici, c'est la capacité de trouver de bons noms.

Je dois dire que c'est l'un des plus beaux codes que j'ai vus depuis un moment. J'espère qu'il résistera à l'utilisation.

9
candied_orange
function BuildPage () {
   AddImageCarousels();
   AddChatbot();
   AddMaintenanceNotification();
}
document.addEventListener('DOMContentLoaded', BuildPage, false);

C'est un excellent code. Les noms de fonction sont descriptifs et il est facile de voir comment la page est construite. Si vous vouliez plus de détails sur la façon dont le chatbot a été ajouté, vous pouvez regarder cette méthode, mais si vous voulez juste voir comment la page est construite, ou ce qui est sur la page à un niveau élevé, il vous suffit de regarder cette seule méthode.

Notez qu'un code très similaire serait terrible:

function BuildPage () {
   AddIcs();
   Chat();
   AddEntity();
}
document.addEventListener('DOMContentLoaded', BuildPage, false);

Parce que les noms de fonction ne sont pas du tout descriptifs. Afin de comprendre ce qui est sur la page, vous devez regarder chacune des 3 fonctions, ce qui signifie que vous devez avoir beaucoup de réflexion sur ce que fait ce morceau de code.

Une mise en garde au code que vous avez écrit - vous devez vous assurer que chacune des méthodes appelées dans BuildPage fait exactement ce qu'elle dit qu'elle va faire. Vous ne voulez pas que votre méthode AddChatBot() soit en train de jouer avec les carrousels d'images ou de configurer les choses pour les notifications, ou quoi que ce soit d'autre - faites simplement ce qu'il faut pour ajouter le chat bot.

9
mmathis