Mon cahier d’exercices

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.

Avertissement solennel

Autodidacte en informatique, l’auteur a tous les défauts de sa qualité. Si vous vous inspirez, copiez ou pire utilisez le contenu de cette page, vous êtes téméraire, inconscient du danger !

Reconnaissant avoir été dûment informé, vous déchargez l’auteur et à fortiori l’hébergeur du site de toute responsabilité dans les graves dégâts que vous causerez sûrement !

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

Tutoriel du 03/09/2009

Je vous signale que les trois premières fondations sont reprises dans un tutoriel : Outils pour construire un code jQuery évolutif.

Creative Commons License Attribution-Share Alike 2.0 Belgium Except where otherwise noted, content on this site is licensed under a Creative Commons License : Attribution-Share Alike 2.0 Belgium

Mention obligatoire : "Auteur : Hagnoul Daniel (https://www.developpez.net/forums/u285162/danielhagnoul/)"