IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Outils pour construire un code jQuery évolutif


précédentsommairesuivant

I. La clôture jQuery

I-A. Introduction

Non, il ne s'agit pas de clôturer le compte bancaire de jQuery ! Il s'agit simplement de protéger votre code.

En anglais on parle de "closure" et ce mot peut se traduire par fermeture, mais aussi par clôture que je trouve plus parlant.

I-B. C'est quoi ?

Il s'agit d'une fonction anonyme function(){...}

entourée d'une clôture (function(){...})();

et dédiée à jQuery : (function($){...})(jQuery);

I-C. Un espace privé

La clôture (function(){...})(); est un espace privé. Elle s'exécutera automatiquement.

La clôture jQuery (function($){...})(jQuery); est un espace privé, dans lequel le symbole $ est clairement et exclusivement attribué à jQuery. Elle s'exécutera automatiquement.

I-D. Plus de conflits pour le $

Si vous utilisez une autre bibliothèque ("framework"), la clôture vous assure qu'il n'y aura pas de conflit pour la maîtrise du symbole $.

Exemple n° 1Exemple n° 1

 
Sélectionnez
(function($){
	//jQuery
	$("#conteneur").css("backgroundColor","#FFCC66");
})(jQuery);

//Prototype
$('affiche').addClassName('active').show();

//jQuery
//erreur : $("#conteneur") is null !
$("#conteneur").css("color","red");

I-E. Objets, fonctions et variables locales

Tout ce qui est déclaré à l'intérieur de la clôture est inconnu en dehors à la seule condition que vous utilisiez le mot clé "var" comme il se doit.

(1) L'utilisation de l'espace de noms de l'objet global "window" par votre code est source d'inexactitude, d'instabilité et d'insécurité.

Ce qui était tolérable à l'époque de scripts de quelques lignes est rigoureusement à proscrire à l'époque du "web 2.0" où nous mélangeons des centaines de lignes de scripts d'auteurs différents. Le risque de collisions dans l'espace de noms de l'objet global "window" devient une certitude.

La qualité de votre code est inversement proportionnelle aux nombres d'objets, de fonctions et de variables que vous avez introduits dans l'espace de noms de l'objet global "window".

Idéalement votre code ne doit dépendre que d'un seul objet global.

Exemple n° 2Exemple n° 2

 
Sélectionnez
(function($){
	a = "je suis a";
	var b = "je suis b";
	
	function mafunc(message){
		alert(message);
	}
})(jQuery);

alert(a);

//erreur : "b is not defined !"
alert(b);

//erreur : "mafunc() is not defined !"
mafunc("Hello world !");

I-F. L'opérateur this

Dès la clôture créée, le mot clé "this" représentant l'objet "window" sera disponible tant que vous ne modifierez pas sa valeur.

(2) Je cite2 :
"Le mot-clé this fait référence à l'objet de contexte (ou objet courant). En général, dans une méthode, this fait référence à l'objet appelant."

"Du fait du « passage » de this aux fonctions, this n'a pas de valeur fixe pour une fonction. Cela signifie qu'une fonction n'a pas de « propriétaire » ou de « parent », même s'il s'agit d'une méthode. En d'autres mots, une méthode n'est pas liée à l'objet dont elle est une méthode."

"La distinction entre méthodes et fonctions se fait uniquement au moment de l'appel : les appels de méthode passent l'« objet parent » comme valeur de this, tandis que les appels de fonctions passent l'objet global en tant que this."
Fin de la citation2.

Exemple n° 3Exemple n° 3

 
Sélectionnez
(function($){		
	//équivalent à window.confirm()
	var r = this.confirm("Bienvenue dans mon cahier d'excercices sur jQuery & Co.");
	
	if (r == true){
		//équivalent à window.alert()
		this.alert("You pressed OK!")
	} else {
		this.alert("You pressed Cancel!")
	}
	
	//Une fonction anonyme entourée d'une clôture. Elle s'exécutera automatiquement. 
	(function(){
		this.alert("La valeur de this n'ayant pas été modifiée, sa valeur est : " + this);
	})();

	//https://james.padolsey.com/javascript/jquery-delay-plugin/
	$.fn.delay = function(time, callback){
		jQuery.fx.step.delay = function(){};
		return this.animate({delay:1}, time, callback);
	}
	
	//On peut conserver la valeur actuelle de this en l'affectant à une variable, par exemple that
	var that = this;
	
	//équivalent à $(window).ready()
	$(this).ready(function(){
	
		alert("Dans $(window).ready(), that = " + that + ", et this = " + this);
		
		$("#conteneur h1").delay(2000, function(){
			$(this).css("color","#339900");
			
			alert("Dans cette fonction anonyme, that = " + that + ", et this = " + this);
		});
	});
})(jQuery);

Avec Internet Explorer 8 vous devrez actualiser la page pour obtenir l'affichage de toutes les boites de dialogues.

Avec Firefox, voici le contenu des trois dernières boites de dialogue :

  • La valeur de this n'ayant pas été modifiée, sa valeur est : [object Window]
  • Dans $(window).ready(), that = [object Window], et this = [object HTMLDocument]
  • Dans cette fonction anonyme, that = [object Window], et this = [object HTMLHeadingElement]

I-G. Mais alors, comment ?

Je vous entends : "Si j'adopte son système, si je clôture tous mes programmes, comment appeler mon code ?"

Il faut conserver, au niveau global, un point d'entrée qui sera un objet ou une fonction. Mais pas n'importe comment.


précédentsommairesuivant