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'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.


précédentsommairesuivant