Jquery 1.4 , introduction a jQuery.proxy()

Jquery proxy : introduction

Parmi les nouveautés de jquery 1.4, proxy() va certainement être un des aspects les plus novateur. Novateur dans la manière de formaliser son code et novateur dans l’utilisation d’objets javascript pour paramétrer des éléments du DOM et plus spécifiquement des éléments sélectionnés par jquery.

Jusqu’à présent il était assez difficile d’associer des données (data) à des éléments de votre page web , même si jquery a proposer une solution ’temporaire’ avec jquery.data(). Cette difficulté était en réalité du à IE qui ne sait pas gérer complètement sa mémoire. Le risque étant de créer ce qu’on appelle des ’memory leak’.

Avec cette nouvelle version de jquery, la librairie propose une approche vraiment original qui va vous permettre d’associer facilement des données , des fonctions , des tableaux ... à vos éléments et cela d’une manière extrêmement simple et prometteuse. D’ailleurs cet article est une introduction à ce nouveau concept et je tacherai de vous en proposer un autre plus fourni tellement les possibilités offertes par jquery.proxy() sont immenses.

Jquery proxy : une demo et du code

Je vous propose de voir tout de suite un exemple et ensuite de voir le code qui permet de réaliser cela avec proxy. Vous avez 3 zones et en dessous 2 menus déroulants. Avec le premier choisissez une des zones dont vous souhaitez modifier la couleur de fond et avec l’autre choisissez la couleur. Si vous cliquez sur une de ces zones cela lui rendra sa couleur d’origine.

Nous allons voir maintenant comment cela est réalisé et qu’est ce qui change par rapport à ce qui nous aurions fait avec une version antérieur de jquery. Le code est en réalité très simple. Nous avons un seul objet javascript qui s’appelle demo_proxy , c’est lui qui va gérer l’ensemble des fonctions.

La méthode proxy est appelé dans $(function() .... et voici la syntaxe complète : $(".test").click( $.proxy( demo_proxy, "click" ) ) ; Concrètement le code s’interprète de la manière suivante. Les éléments du DOM de class .test ont une méthode click , cette méthode est contenu dans l’objet demo_proxy (il est appelé comme cela $.proxy( demo_proxy, "click" )). A l’intérieur de cet objet appelé moi la fonction click ( ici écrit entre guillements). Mais nous aurions pu appeler cette méthode totto , la fonction d’appel aurait été : $.proxy( demo_proxy, "totto" )).

$(’#element_proxy’).change ... et $(’#couleur_proxy’).change ... appelle 2 fonctions situées à l’intérieur de l’objet demo_proxy , à savoir , change_color : function(that) et change_id : function(that).

Alors que se passe-t-il ? Par défaut nous sommes dans le premier élément. Si nous changeons de couleur avec le menu déroulant nous allons avoir l’enchainement suivant :

 demo_proxy.change_color(that) : récupère la valeur sélectionné

 il appelle la méthode ( toutes les méthodes sont à l’intérieur de demo_proxy) set : function(name , value) , cette fonction est un ’setter’ qui va modifier l’attribut color de demo_proxy dans ce cas (this.set(’color’, val) ;)

 une fois cela fait on appelle la méthode background_color() ; dont l’unique ligne de code est : $(this.id).css(’background-color’,this.color) ; Et c’est la que le code est vraiment très intéressant car cette fonction utilise uniquement les propriétés de l’objet demo_proxy , a savoir demo_proxy.color et demo_proxy.id. Et vu que que nous sommes à l’intérieur de l’objet nous utilisons le ’this’.

L’intérêt d’utiliser jquery.proxy()

Concrètement cette méthode , jquery.proxy() apporte plusieurs éléments dont certains vont être essentiels pour vos développement un peu plus poussés :

 La raison principal qui a poussé les développeurs de jquery a créer cette fonction est de pouvoir avoir plusieurs méthodes et plusieurs variables liés à un sélecteur. Jusqu’à présent cela était relativement long et complexe a réalisé , et grosso modo , pour arriver à un tel résultat il fallait créer un plugin pour jquery.

 Comme nous le voyons dans cet exemple 3 événements différents (un clik et 2 change ) sur 3 sélecteurs différents utilise le même objet , ici demo_proxy , et chacun a accès aux variables , fonctions .... de cet objet. Ce partage est d’autant plus facile que nous utilisons l’opérateur ’this’ et que nous pouvons nous amuser à créer autant de méthodes que nous voulons comme le getter et le setter de cet exemple.

 Ici il s’agit d’un code encore très simple de démonstration. Mais en poussant un peu plus on peut imaginer qu’un évènement extérieur modifie une variable de demo_proxy. Par exemple en modifiant la couleur de fond par défaut. Nous aurions , pour faire fun , un : demo_proxy.set(’defaut’,’red’) ;

Conclusion

Cet article n’est qu’une introduction a jquery.proxy() et vous pouvez déjà sentir l’intérêt d’utiliser une tel méthode. Cet apport est d’autant plus important qu’il vous permet d’utiliser non seulement le plein potentiel de la librairie mais aussi d’utiliser l’incroyable légèreté et puissance du langage javascript, dont je me plait à rappelé , que jquery est issu.

Dans un prochain article je vous exposerai un autre exemple ou nous allons utiliser cette fonctionnalité de manière plus poussée, et vous allez voir , nous allons faire de véritables petits miracles. Merci de votre lecture , et ’Have fun’ !!!