[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>

[SRC] Métaprogrammation en javascript

Contribuez

Mode arborescent

Discussions similaires

Partager

Partager