Javascript les spécificités du langage - Partie 6 -

Présentation au sujet: "Javascript les spécificités du langage - Partie 6 -"— Transcription de la présentation:

1 Javascript les spécificités du langage - Partie 6 -

2 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 quon réaffecte le contexte « this » dans un callback.

3 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 sappelle « bind » en jQuery.

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

5 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 lobjet même grâce a prototypage et à la closure. Cette fonction « bind » est par exemple implémentée dans la librairie Prototype.

6 Le binding (attachement) Voici un exemple où nous utilisons le binding de contexte : // Creation de mon object en JSON var 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ée monObjet.maMethode();

7 Le binding (attachement) On peut également avoir une autre approche pour créer la fonction de binding, sans passer par un prototypage de « Function », cest la solution quutilise la librairie Underscore « _ »

8 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 JSON var 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ée monObjet.maMethode();

9 Le binding (attachement) A noter quen jQuery, cest la fonction « proxy » qui permet faire du binding de contexte. Proxy parce quon peut considérer que la fonction joue le rôle de passerelle entre 2 objets différents, entre le gestionnaire dévénements et lobjet quon a défini par exemple.