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 $.
(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.
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.
(function($){
//équivalent à window.confirm()
var r = this.confirm("Bienvenue dans mon cahier d'exercices 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.