Clôturez jQuery !

"Auteur : Hagnoul Daniel"

Texte : v1.0.0 2009-06-18

Non, il n'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.

Pour un code évolutif

Avec un Javascript omniprésent et des codes de plus en plus complexes, le programmeur se doit de maîtriser les bases du langage, la structuration et la modularisation du code, il se doit d'écrire un code gérable, réutilisable et facilement évolutif.

Dans cet esprit, je vous propose de généraliser l'usage de la "closure jQuery".

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);.

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.

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 maitrise du symbole $.

Voir l'exemple n° 1.

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

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

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

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 pour déclarer vos variables et objets, car vous n'êtes pas sans ignorer qu'un programme qui utilise des variables globales est généralement mal conçu.

Voir l'exemple n° 2.

(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 !");

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.

Voir l'exemple n° 3.

(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).load()
	$(this).load(function(){
			
		alert("Dans $(window).load(), 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);

Mais alors, comment ?

"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. Nous aborderons ce point essentiel dans : "Utilisez la fonction globale !" et nous peaufinerons notre technique par "Utilisez un espace de noms !"

À bientôt !

Veuillez poser vos questions
techniques sur les forums DVP,
s'il vous plait.

Vous n'aurez jamais fini d'apprendre la programmation, aussi apprenez à apprendre en vous amusant.