Outils pour construire un code jQuery évolutif

Nous avons vu que la clôture offre un espace privé où le symbole $ est exclusivement attribué à jQuery.

Nous avons vu que la fonction globale permet d'obtenir un point d'entrée dans la clôture jQuery, mais au prix d'une pollution de l'espace de noms.

(4) Je cite^4 :
« Un espace de noms est une notion permettant de lever une ambiguïté sur des termes qui pourraient être homonymes sans cela. Il est matérialisé par un préfixe identifiant de manière unique la signification d'un terme. Au sein d'un même espace de noms, il n'y a pas d'homonymes. Les espaces de noms aident à la construction de programmes modulaires ».
Fin de la citation⁴

(5) Je vous invite à lire, au minimum, les pages 3 à 6 de l'excellent tutoriel de Nourdine Falola : Espaces de noms (ou namespace) en JavaScript. Ces pages constituent l'introduction indispensable à la suite de cet article.

Idéalement, votre code ne doit être accessible qu'au travers d'un et d'un seul objet global.

Comme notre espace de noms contiendra du code jQuery, nous devons utiliser la clôture jQuery.

La première solution qui vient à l'esprit est de construire un objet global dans l'espace de noms window à l'intérieur d'une clôture jQuery.

On peut également construire un objet global dans l'espace de noms jQuery :

(fonction($){
    $.monObjet = { ... } ;
})(jQuery);

à l'intérieur d'une clôture jQuery.

Après avoir testé ces deux approches, une troisième solution a ma préférence.

Il s'agit toujours de construire un objet global dans l'espace de noms window, mais c'est la clôture jQuery qui génère l'objet grâce à l'écriture JSON.

Suivant votre degré d'expérience dans l'écriture de code JSON cette solution peut vous paraître complexe, mais il me semble qu'elle est d'un usage plus simple que les deux approches évoquées ci-dessus. De même, la gestion des exceptions et la création des sous-espaces de noms me semblent plus faciles et plus fiables.

JavaScript est très efficace pour résoudre une expression d'appel complexe, vous ne devez pas craindre la très légère diminution des performances qui en résulte, car elle est compensée largement par l'aspect auto documentaire et la fiabilité de votre code.

En notation JSON, l'objet global dvjh peut s'écrire comme suit :

try {
  var dvjh = {
    isdvjh: "dvjh/danielhagnoul",
    isMe: function(){
      return this.isdvjh;
    },
    infos: function(){
      return "Espace de noms dvjh.";
    }
  };
}
catch(err){
  alert(err);
}

Avec la génération par la clôture jQuery :

try {
  var dvjh = (function($) {
    //notre clôture peut toujours contenir variables,
    //fonctions et objets privés.
    
    var isdvjh = "dvjh/danielhagnoul";
        
    return {
      isMe: function(){
        return isdvjh;
      },
      infos: function(){
        return "Espace de noms dvjh";
      }
    };
  })(jQuery);
}
catch(err){
  alert(err);
}

Et le sous-espace de noms dvjh.math :

try {
  dvjh.math = (function($) {
    var isdvjh = "dvjh_math/danielhagnoul";
    
    if (dvjh.isMe() != "dvjh/danielhagnoul/") return null;
            
    return {
      isMe: function(){
        return isdvjh;
      },
      infos: function(){
        return "Espace de noms dvjh.math";
      }
    };
  })(jQuery);
}
catch(err){
  alert(err);
}

La gestion des exceptions et le test sur isMe nous assurent de l'existence d'un objet dvjh et que cet objet dvjh est bien le nôtre.

L'espace de noms dvjh doit être vu comme un « proof of concept » (une démonstration de faisabilité), il vous montre comment réaliser un espace de noms en jQuery, il ne s'agit pas d'un espace de noms de référence.

J'ai toutefois pris soin de le remplir soit avec des codes utiles pour jQuery soit avec des exemples de code intéressants.

Ci-dessous, le contenu de l'interface de l'espace de noms dvjh et de ses sous-espaces.

III-F-1. dvjh▲

III-F-2. dvjh.math▲

III-F-3. dvjh.math.statistic▲

III-F-4. dvjh.calendar▲

III-F-5. dvjh.effects▲

dvjh.effects.byOrder($('.image_menu_on'), {width:400, height:300}, 1000, 'easeInSine', function(){alert('wow!')} );

III-F-6. dvjh.utilities▲

III-F-7. dvjh.utilities.contentTable()▲

dvjh.utilities.contentTable('conteneur', 'tdm', 6, {tdmTitre:'Sommaire'});

Le code de l'espace de noms dvjh et de ses sous-espaces est trop long pour être reproduit ici.

Je vous invite à copier et examiner les fichiers composant l'espace de noms et à regarder les tests.

Miroir 1 : dvjh-v1.0.2.zip

Miroir 2 : dvjh-v1.0.2.zip

Test n° 1 : dvjh.math et dvjh.statistic

Test n° 2 : dvjh.calendar

Test n° 3 : dvjh.effects

Test n° 4 : dvjh.utilities.contentTable()

Lorsque vous construirez votre propre espace de noms, pensez à lui donner un nom suffisamment long pour que le risque de collision avec un autre espace de noms soit réduit, il eut été préférable de nommer mon espace de noms danielhagnoul plutôt que dvjh, mais on se défait difficilement d'une mauvaise habitude.