1 / 9

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

Javascript les 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.

helene
Download Presentation

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

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Javascriptles 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 qu’on réaffecte le contexte « this » dans un callback.

  3. Le binding (attachement) Le bindingd’é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.

  4. Le binding (attachement) Le binding de contexte (ou d’objets) 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 l’objet 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 », c’est la solution qu’utilise 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 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.

More Related