divERsions Parce qu'il faut un blog (Erlang mode)…

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 :

1. création du lien HTML avec l’attribut data-event indiquant l’événement utilisé
2. création de la fonction javascript permettant de répondre à cet événement
3. 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 :

1. indiquer l’événement dans le lien à travers l’attribut data-event
2. é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() {
    ...
  }
});

Référencez cet article