Javascriptles spécificités du langage

- Partie 6 -

Le binding (attachement)•On peut attacher un événement à un élément du DOM, cela veut dire qu’à une action sur cet élément un ou plusieurs événements seront déclenchés.•On peut également attacher un contexte à un objet du fait système de scope de Javascript. Effectivement il arrive souvent qu’on réaffecte le contexte « this » dans un callback.

Le binding (attachement)

Le binding d’évènements :Peu de chose à ajouter, il se fait tout simplement comme cela :

window.onload = function() { alert ("Je suis chargé");}

A noter que la fonction de gestionnaire d’événement s’appelle « bind » en jQuery.

Le binding (attachement)

Le binding de contexte (ou d’objets)Voici comment nous allons créer notre fonction de binding :// Prototypage de l'objet FunctionFunction.prototype.bind = function(context) { var m = this; // référence l'instance de Function (closure) return function() { return m.apply(context, arguments); }}

Le binding (attachement)

•Grâce à l’ « apply », nous allons pouvoir appliquer le contexte passé en paramètre sur la fonction de binding et donc sur l’objet même grâce a prototypage et à la closure. •Cette fonction « bind » est par exemple implémentée dans la librairie Prototype.

Le binding (attachement)Voici un exemple où nous utilisons le binding de contexte :// Creation de mon object en JSONvar monObjet = { monAttribut: 4, maMethode : function() { window.onload = function() { // Grâce au bind "this" est bien monObjet et non window alert (this.monAttribut); }.bind(this); } } // Affiche 4 une fois la fenêtre chargéemonObjet.maMethode();

Le binding (attachement)

On peut également avoir une autre approche pour créer la fonction de binding, sans passer par un prototypage de « Function », c’est la solution qu’utilise la librairie Underscore « _ »

Le binding (attachement)var bind = function(source, add) { var args = []; for(var index=2;index <= arguments.length; index++) { args[index - 2] = arguments[index]; } return function() { return source.apply(add, args); }} // Creation de mon object en JSONvar monObjet = { monAttribut: 4, maMethode : function() { window.onload =bind( function() { // Grâce au bind "this" est bien monObjet et non window alert (this.monAttribut); }, this); } } // Affiche 4 une fois la fenêtre chargéemonObjet.maMethode();

Le binding (attachement)

• A noter qu’en jQuery, c’est la fonction « proxy » qui permet faire du binding de contexte.

• Proxy parce qu’on peut considérer que la fonction joue le rôle de passerelle entre 2 objets différents, entre le gestionnaire d’événements et l’objet qu’on a défini par exemple.