Où conserver le code du gestionnaire d'événements dans les objets d'espace de noms ou les fermetures?

Question

Au cours des deux dernières années, j'ai utilisé les espaces de noms JavaScript adoptés par YUI comme moyen de mise en forme du code JavaScript par défaut. Dans l'ensemble, il fonctionne bien dans des environnements plus complexes où de nombreux widgets Web peuvent être collés ensemble à des moments différents. Jusqu'à récemment, j'ai presque toujours utilisé des gestionnaires d'événements ajoutés dans le code HTML en appelant les gestionnaires de l'objet espacé nom lui-même.

J'ai récemment utilisé JQuery et j'ai défini les gestionnaires à l'intérieur de la fonction ready plutôt que dans le HTML. Comme je fais de plus en plus de cela, il semble que la fermeture de la fonction JQuery prête remplace l'objet espace de nom. Ce que je finis maintenant (au moins pour un widget/outil type pages) est un objet d'espace de nom qui traite principalement détient des données et un tas de gestionnaires d'événements fermés que j'accède à l'objet espace de noms à des fins spécifiques de données .

Ma question est, quelles sont les meilleures pratiques pour faire face à des fermetures vers un objet espace de nom en particulier en ce qui concerne les gestionnaires d'événements? Ou, de la même manière, quelles sont les meilleures pratiques pour configurer les gestionnaires d'événements, s'ils doivent être "lourds" et gérer le traitement eux-mêmes, ou passer à plus de code de bibliothèque. Personnellement, il est plus difficile de suivre le flux de nombreux gestionnaires d'événements «lourds» distincts.

Answer 1

Ceci est une question très subjective. Cela étant dit, je ferai de mon mieux pour donner ce que je pense être les avantages/inconvénients de chaque approche.

Objets Espace de noms:

yourNamespace.events.someClickHandler = function(event) {...} 
$(function() { 
    $("#someElement").click(yourNamespace.events.someClickHandler); 
} 

L'un des premiers « inconvénients » de cette approche est la séparation de votre gestionnaire d'événements à partir de son branchement. Vous pouvez éviter cela en reliant chaque événement après qu'il a été défini (comme je l'ai fait dans l'exemple ci-dessus), mais vous finissez avec un tas de lignes "$ (function() {" dans votre code

une autre « con » de ce style est les noms longs pour vos gestionnaires d'événements (par exemple « yourNamespace.events.someClickHandler »). Vous pouvez utiliser des alias.

var events = yourNamespace.events; 
$("#someElement").click(events.someClickHandler); 

et espaces de noms plus courts pour atténuer ce peu, mais il y a Donc, avec tous ces inconvénients, pourquoi quelqu'un utiliserait-il le modèle de l'espace de noms? Eh bien, un "pro" en est que les événements sont des accès. sible. Disons (à des fins de débogage) que vous voulez enregistrer l'objet événement qui est passé à votre gestionnaire de clic. En utilisant Firebug, vous pouvez faire quelque chose comme:

var oldHandler = yourNamespace.events.someClickHandler; 
var newHandler = function(e) {console.log(e); oldHandler(e);} 
$("#someElement").unbind("click"); 
$("#someElement").click(yourNamespace.events.someClickHandler); 

et, sans rafraîchir la page même, vous pourriez obtenir votre événement connecté.

De même, ce style a un autre pro de réutilisation.Si vous voulez faire un nouveau gestionnaire de clic qui est similaire à l'ancien, mais fait aussi x, y et z, vous pouvez faire:

yourNamespace.events.advancedClickHandler = function(event) { 
    yourNamespace.events.someClickHandler(e); 
    x(); y(); z(); 
} 

Maintenant, en revanche, nous avons le style « de fermeture » (I Je préfère l'appeler le style "fonction anonyme").

$(function() { 
    $("#someElement").click(function(event) {...}); 
} 

Il est nettement plus concise, la définition du gestionnaire est à peu près aussi proche qu'il peut arriver au crochet, et je pense qu'il utilise même un tantinet moins de mémoire parce qu'il n'y a pas de référence variable. MAIS, vous ne serez pas en mesure de faire du débogage en direct, vous ne pourrez pas accrocher ce gestionnaire ailleurs, ou l'étendre dans un nouveau gestionnaire, ou quelque chose comme ça, parce que votre gestionnaire n'existe que pour le moment quand vous l'accrochez.

Donc, j'espère que cela aide. Dans mon expérience, le style d'objet namespace est généralement la méthode préférée, en particulier le plus hardcore/sérieux du projet JS. Mais il a certainement des inconvénients; il n'y a pas vraiment de façon parfaite (c'est-à-dire parfaitement propre/et réutilisable) de connecter des événements dans JS en ce moment.