[SRC] Métaprogrammation en javascript

**gwyohm** · 03/12/2008, 19h35

Je me suis récement interressé à LivePipe qui offre une couche supplémentaire à prototype pour la gestion de controles (entre autres des fenêtres, des onglets...). Dans les extras de LivePipe, un élément m'a particulièrement attiré l'attention : Event.Behavior. Inspiré par un post sur la metaprogrammation en JavaScript.

L'idée étant de pouvoir écrire du code javascript fonctionnellement compréhensible :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
  // exemple :
  show("myDiv").when("myInputText").is("OK");

Le post d'Adam McCrea explique la démarche. C'est très intéressant mais ca resemble plus à un POC qu'autre chose.
L'implémentation faite par LivePipe est contraignante : elle impose prototype (ce n'est pas tellement ce qui me dérange, je l'utilise beaucoup moi aussi) mais surtout elle impose le core LivePipe.

En exercice (et pour tuer quelques heures de train), je me suis donc fait ma propre bibliothèque qui n'a besoin de rien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
 
/* PARTIE 1 */
var EasyEvents = function() {
/* private */
  var registeredDependencyActions = {}; 
 
  var Dependency = function(target, dependencyAction) {
    this.target             = target;
    this.dependencyAction   = dependencyAction
    this.triggers           = new Array();
    this.parameter          = null;
    this.runOpposite        = false;
  };
 
  Dependency.prototype.when = function( triggerElement ) {
    this.triggers.push( new DependencyTrigger(triggerElement) );
    return this;
  };
  Dependency.prototype.and = Dependency.prototype.when;
 
  Dependency.prototype.on = function (element) {
    this.parameter = this.target;
    this.target = element;
    return this;
  };
  Dependency.prototype.from = Dependency.prototype.on;
  Dependency.prototype.to = Dependency.prototype.on;
 
  Dependency.prototype._with = function(param) {
    this.parameter = param;
    return this;
  };
 
  Dependency.prototype.appendListenerToLastTrigger = function(eventName, matchFunction, parameter) {
    matchFunction = matchFunction || function() {return true;};
    var lastAddedTrigger = this.triggers[this.triggers.length - 1];
    lastAddedTrigger.matchFunction = matchFunction;
    lastAddedTrigger.parameter = parameter;
    lastAddedTrigger.registerEventListener(eventName, this);
  };
 
  Dependency.prototype.testMatch = function() {
    var valid = true;
    for(var i=0; i<this.triggers.length; i++) {
      var currTrigger = this.triggers[i]
      valid = valid && currTrigger.matchFunction(currTrigger.element, currTrigger.parameter);
    }
    if(valid) {
      this.dependencyAction.run(this.target, this.parameter);
    } else if(this.runOpposite) {
      this.dependencyAction.reverse(this.target, this.parameter);
    }
  };
 
  Dependency.prototype.reverseOtherwise = function() {
    this.runOpposite = true;
  };
 
 
  var DependencyAction = function(actionMethod, reverseMethod) {
    this.run = actionMethod;
    this.reverse = reverseMethod || function(){};
  };
 
  var DependencyTrigger = function(triggerElement) {
    this.element = document.getElementById(triggerElement);
    this.matchFunction = null;
    this.parameter = null;
  };
 
  DependencyTrigger.prototype.registerEventListener = function(eventName, dependency) {
    if(window.attachEvent) {
      this.element.attachEvent("on" + eventName, function(){dependency.testMatch();});
    } else {
      this.element.addEventListener(eventName, function(){dependency.testMatch();}, false);
    }
  };
 
/* public */  
  return {
    registerDependencyAction : function(dependencyActionName, dependencyActionFunction, dependencyReverseFunction) {
      registeredDependencyActions[dependencyActionName] = new DependencyAction(dependencyActionFunction, dependencyReverseFunction);
      EasyEvents[dependencyActionName] = function(param) {
        return new Dependency(param, registeredDependencyActions[dependencyActionName]);
      }
    },
 
    registerTriggerListener : function(methodName, eventName, method) {
      Dependency.prototype[methodName] = function(parameter) {
        this.appendListenerToLastTrigger(eventName, method, parameter);
        return this;
      }
    }
  };
}();
 
 
/* PARTIE 2 : Enrichissement du vocabulaire */
with(EasyEvents) {
  registerDependencyAction("show", function(element) {
    document.getElementById(element).style.display = "block";
 
  }, function(element) {
    document.getElementById(element).style.display = "none";
  });
 
  registerDependencyAction("addClassName", function(element, parameter) {
    var elem = document.getElementById(element);
    var classNames = elem.className;
    var newClassNames = classNames;
    var idxStart = classNames.indexOf(parameter);
    if(idxStart < 0) {
      newClassNames += " " + parameter;
      elem.className = newClassNames;
    }
  }, function(element, parameter) {
    var elem = document.getElementById(element);
    var classNames = elem.className;
    var newClassNames = "";
    idxStart = classNames.indexOf(parameter);
    if(idxStart > 0) {
      newClassNames += classNames.substr(0, idxStart - 1);
    }
    if(idxStart >= 0) {
      newClassNames += classNames.substr(idxStart + parameter.length);
    }
    elem.className = newClassNames.replace(/^\s+|\s+$/, "").replace(/\s+/, " ");
  });
 
  registerDependencyAction("removeClassName", function(element, parameter) {
    var elem = document.getElementById(element);
    var classNames = elem.className;
    var newClassNames = "";
    idxStart = classNames.indexOf(parameter);
    if(idxStart > 0) {
      newClassNames += classNames.substr(0, idxStart - 1);
    }
    if(idxStart >= 0) {
      newClassNames += classNames.substr(idxStart + parameter.length);
    }
    elem.className = newClassNames.replace(/^\s+|\s+$/, "").replace(/\s+/, " ");
  }, function(element, parameter) {
    var elem = document.getElementById(element);
    var classNames = elem.className;
    var newClassNames = classNames;
    var idxStart = classNames.indexOf(parameter);
    if(idxStart < 0) {
      newClassNames += " " + parameter;
      elem.className = newClassNames;
    }
 
  });
 
  registerTriggerListener("isClicked", "click");
  registerTriggerListener("is", "change", function(elem, param){return elem.value == param});
  registerTriggerListener("isNot", "change", function(elem, param){return elem.value != param});
}

Toute la partie 1 défini les objets mis en jeu. Quasiment tout est privé dans EasyEvents sauf 2 méthodes qui vont nous permettre de construire notre propre vocabulaire :

registerDependencyAction(dependencyActionName, dependencyActionFunction[, dependencyReverseFunction])
registerTriggerListener(methodName, eventName[, method])

L'objectif étant de pouvoir écrire des instructions javascript en langage presque naturel, une syntaxe est imposée. La voici :

action(cible).when(elementObservé).arriveQuelqueChose()
ou bien
action(parametre).on(cible).when(elementObservé).arriveQuelqueChose(autreParametre).reverseOtherwise()

les éléments en gras sont imposés, mais les autres non, ils sont définis en amont (de la façon la plus générique possible) :

C'est ce que fait la partie 2 :
Voici une autre façon de décrire les actions show et hide:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
  // On définit une fonction qui positionne à 'block' la propriété 'display' du style de l'element dont l'id est passé en parametre
  var _show = function(element) {
    document.getElementById(element).style.display = "block";  
  };
 
  // On définit la fonction inverse au sens fonctionnel : 
  var _hide = function(element) {
    document.getElementById(element).style.display = "none";  
  };
  // et on enregistre l'action : les parametres sont le nom que l'on veut donner, la fonction d'action et éventuellement, sa fonction inverse
  registerDependencyAction("show", _show, _hide);
 
  // ... tant qu'on y est, on enregistre l'action "hide" :
  registerDependencyAction("hide", _hide, _show);

A ce niveau, pour la phrase générique

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
action(cible).when(elementObservé).arriveQuelqueChose()

action peut être show ou hide.

Il peut arriver que pour certaines actions, on ait besoin d'un parametre (par exemple, l'action addClassName necessite d'avoir le nom de la classe CSS à ajouter)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
 action(parametre).on(cible).when(elementObservé).arriveQuelqueChose()

C'est pour celà que les fonctions d'action peuvent être définies avec 2 parametres. Le premier étant la cible, l'éventuel second un parametre

Ensuite il faut définir les "arriveQuelqueChose"

Exemple : quand l'element est clique, on souhaite utiliser la méthode isClicked.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
// on passe à registerTriggerListener le nom de la méthode voulue et le nom de l'événement sans le 'on' :
registerTriggerListener("isClicked", "click");

Là aussi, on peut avoir besoin de plus d'infos : exemple, dans le cas d'un événement change, tester la nouvelle valeur du champ.
Pour cela on passe un troisième parametre qui est une fonction prenant en parametre l'element observé et une valeur :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
// On définit la fonction qui teste l'égalité
var _isEqual = function(elem, param) {
  return elem.value == param;
}
 
// on enregistre...
registerTriggerListener("is", "change", _isEqual);

A ce niveau, pour la phrase générique
action(cible).when(elementObservé).arriveQuelqueChose(parametre),
arriveQuelqueChose(parametre) peut être is("OK")

Maintenant un petit test :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
  <style type="text/css">
    div {
      width:100px;
      height:100px;
      border:1px solid black;
    }
 
  </style>
 
  <div id="myTestDiv" style="display:none;">
 
  </div>
  <input type="text" id="myInputText"/>
 
  <script type="text/javascript">
    with(EasyEvents) {
      show("myTestDiv").when("myInputText").is("OK").reverseOtherwise();
    }
  </script>

**le_chomeur** · 04/12/2008, 09h41

Code très intéressant

j'avais il y a un moment déjà orienté un développement sur cette syntaxe, mais le problème est que lorsque l'on a plus la tête dans le code pendant un moment et si la source n'est plus documenté ... bon courage ^^

A coté de ça il est non discutable que cela apporte une certaine lisibilité et peut même être remplacé par du français , mais très lourd a gérer pour une application au final...

En tous cas merci pour cette source qui pourrait en apprendre beaucoup a ceux qui s'attarderont dessus

**franculo_caoulene** · 04/12/2008, 10h55

Salut,

J'ai pas tout regarder, et pense le faire plus tard, je trouve ça intéressant. Mais je suis tombé sur quelque chose qui pourrait éventuellement planter et sur laquelle je travaillais justement hier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
if(window.attachEvent) {
      this.element.attachEvent("on" + eventName, function(){dependency.testMatch();});
    } else {
      this.element.addEventListener(eventName, function(){dependency.testMatch();}, false);
    }

Si tu testes de l'évènement de cette façon, en cas de délégation d'évènement Opera ne réagira pas comme voulu :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <title></title>
   <style type="text/css">
   * {margin:0;padding:0;color:#fff;}
   body {background:#000;}
   #liste {width:100px;background:#999;}
   #liste li {width:100px;border:1px solid #ccc;background:#333;}
   p {width:100px;height:40px;border:1px solid #ccc;background:#666;}
   </style>
</head>
<body>
   <ul id="liste">
      <li>bla</li>
      <li>ble</li>
      <li>bli</li>
      <li>blo</li>
      <li>blb</li>
      <li>blc</li>
      <li>bld</li>
      <li>blf</li>
      <li>blg</li>
      <li>blh</li>
      <li>blj</li>
      <li>blk</li>
   </ul>  
   <p id="aRemplir"></p>
   <script type="text/javascript">
   var liste = document.getElementById("liste");
   if (document.attachEvent) document.attachEvent("onmouseover", afficher);
   else liste.addEventListener("mouseover", afficher, false);   // bug sous Opera
 
   function afficher(e) {
      var element = e.target || e.srcElement;
      //document.getElementById("aRemplir").innerHTML = element.textContent; // bug sous IE
      document.getElementById("aRemplir").innerHTML = element.innerHTML;
   }
   </script>
</body>
</html>

Simplement en inversant l'objet testé document.addEventListener plutôt que document.attachEvent ça règle le problème. Mais, il vaut tout de même mieux faire un else if

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
if(document.addEventListener) liste.addEventListener("mouseover", afficher, false);
else if(document.attachEvent) document.attachEvent("onmouseover", afficher);

Après il y a d'autres améliorations à améliorer de ce point de vue là je suppose, mais j'en suis pas encore là.

**gwyohm** · 05/12/2008, 12h27

Envoyé par le_chomeur

mais le problème est que lorsque l'on a plus la tête dans le code pendant un moment et si la source n'est plus documenté ... bon courage ^^

C'est tellement vrai ! de plus la documentation est éxtrèmement difficile à faire : on n'utilise que 2 fonctions et les objets privés sont difficiles à expliquer en commentaires : on ne se rend pas compte qu'on les manipule... Je ne suis d'ailleurs que partiellement satisfait de mon POST, il est difficile d'expliquer le code en détail. Je tâcherai de compléter par la suite d'autant que tu as raison, ca peut donner des idées.

Envoyé par franculo_caoulene

je suis tombé sur quelque chose qui pourrait éventuellement planter et sur laquelle je travaillais justement hier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
if(window.attachEvent) {
      this.element.attachEvent("on" + eventName, function(){dependency.testMatch();});
    } else {
      this.element.addEventListener(eventName, function(){dependency.testMatch();}, false);
    }

Merci, je mettrai à jour les sources prochainement

Envoyé par franculo_caoulene

il y a d'autres améliorations à améliorer

Euh... avant d'améliorer les améliorations, je vais commencer par les améliorations...

[SRC] Métaprogrammation en javascript

Contribuez

Discussions similaires

Partager

Partager