Oct/090
Amélioration des événements génériques an javascript
La problématique concerne la façon dont le MVC est addressé en javascript dans notre application.
Lorsque l’on veut répondre à un événement, on code de la façon suivante :
- création du lien HTML avec l’attribut
data-event
indiquant l’événement utilisé - création de la fonction javascript permettant de répondre à cet événement
- création du code d’association entre l’attribut et la fonction
Ces cas sont représentés ainsi :
Création du lien :
<a href="xxx" data-event="eventStart">event</a>
Fonction javascript :
$.extend({ eventStart: function() { console.log("eventStart fired"); } });
Code d’association :
$(document).bind("eventStart", $.eventStart);
La fonction utilisée afin de se substituer au click n’est pas représentée ici, elle peut être retrouvée dans un ancien article
Le problème est que l’on se retrouve rapidement à écrire une floppée de lignes d’association qui posent problèmes :
- les lignes sont triviales et apportent beaucoup de bruit pour rien
- introduit une duplication des noms d’événements non maintenable
Le mieux est de pouvoir inférer automatiquement ces lignes d’association à partir du javascript créé.
Résolution
Pour cela, on va stocker les événements génériques dans un autre espace de nom. On modifie donc nos événements en les stockant dans la clé events
:
$.extend({ events: { eventStart: function() { console.log("eventStart fired"); }, init: function() { $.each(this, function(key, value) { if (key != "init") $(document).bind(key, value); }); } } });
Et on rajoute par la même occasion, une fonction d’introspection qui permet d’associer toute fonction dans l’espace events
à l’événement correspondant au nom de la fonction !
Il suffit alors de rajouter un comportement global de type :
$(function() { $.events.init(); }
Et tout lien qui possède l’attribut data-event
sera associé automatiquement à une fonction correspondante dans l’espace events
.
La restriction est que tout événement ne doit pas comporter de caractères spéciaux. Nos événéments précédent comme login:start
doivent être renommés en loginStart
.
Maintenant, le workflow est le suivant :
- indiquer l’événement dans le lien à travers l’attribut
data-event
- écrire la fonction ayant le même nom dans l’espace
$.events
Simplissime, j’adore.
Extensions
Certains événements sont définis dans des fichiers séparés afin d’aider à la maintenance de l’applicatif.
Dans ce cas, il n’est pas possible d’utiliser la même notation, et il devient nécessaire d’augmenter la définition de la table de hachage de la façon suivante :
$.extend($.events, { moreEvent: function() { ... } });