Utilisez un espace de noms !

"Auteur : Hagnoul Daniel"

Texte : v1.1.0 2009-08-12
Texte : v1.0.0 2009-07-15

Introduction

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 aux prix d'une pollution de l'espace de noms.

Namespacing (espace de noms)

Je cite³ : "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³

Je vous invite à lire, au minimum, les pages 3 à 6 de l’excellent tutoriel de Nourdine Falola : Espace de noms 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.

Comment ?

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 : $.monObjet = {...} ; à l’intérieur d’une clôture jQuery.

Solution

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

Espace de noms dvjh

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.

Composition de l'espace de noms dvjh le 15 juillet 2009

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.

dvjh

Exception type dvjh : dvjh.exception(message, args);
alert(contenu de l'exception) : dvjh.displayException(exc);
Séparateur de texte : dvjh.separateur(s);
Interface de dvjh : dvjh.infos();

Le fichier dvjh.js contient également (dans une clôture annexe) des fonctions utiles pour jQuery (delay, regex et contains) et Function.prototype.memoize qui est utilisé dans dvjh.math et dvjh.math.statistic.

dvjh.math

Modulo informatique : dvjh.modulo(a, b);
Nombre de Fibonacci : dvjh.fib(n);
Nombre d'or à la puissance n : dvjh.phi(n);
Interface de dvjh.math : dvjh.math.infos();

dvjh.math montre comment créer un sous-espace de noms. En dehors du modulo informatique, dvjh.math donne un exemple d'application de la mémoization pour le calcul du Nombre de Fibonacci.

dvjh.math.statistic

Factorielle de n : dvjh.math.statistic.fact(n);
Nombre d'arrangements à k éléments : dvjh.math.statistic.arran(n,k);
Nombre de combinaisons à k éléments : dvjh.math.statistic.combi(n,k);
Interface de dvjh.math.statistic : dvjh.math.statistic.infos();

dvjh.math.statistic montre comment créer un sous-sous-espace de noms et donne un exemple d'application de la mémoization pour le calcul de la Factorielle.

dvjh.calendar

Date vers jour julien : dvjh.calendar.date_to_jj(an,mois,jours,heures,minutes,secondes);
Jour julien vers date : dvjh.calendar.jj_to_date(jj);
Jour de la semaine : dvjh.calendar.joursemaine(jj);
Jour julien vers jour julien modifié : dvjh.calendar.jj_to_mjd(jj);
Jour julien modifié vers jour julien : dvjh.calendar.mjd_to_jj(mjd);
Interface de dvjh.calendar : dvjh.calendar.infos();

Les astronomes amateurs et les historiens amateurs ne se poseront pas la question de l'utilité des Jours Juliens. Pour les autres je signale que la manipulation de dates par l'intermédiaire des JJ est beaucoup plus simple qu'il n'y parait.

dvjh.effects

Animer en suivant l'ordre : dvjh.effects.byOrder(jQueryObjets,params,duration,easing,callback);
Interface de dvjh.effects : dvjh.effects.infos();

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

La fonction byOrdrer() appelle la fonction animate() pour une série d'objets jQuery en respectant un délai entre chaque animation (la même pour tous les objets jQuery).

dvjh.utilities

Regroupement de fonctions globales.
Interface de dvjh.utilities : dvjh.utilities.infos();

Sers de point d'ancrage pour les fonctions globales (objets globaux).

dvjh.utilities.contentTable()

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

Cette fonction globale (idée et code originaux de Giminik, version jQuery de Daniel Hagnoul) permet de construire une table des matières.

Fichiers

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.

Nota bene

Lorsque vous construirez votre propre espace de noms, pensez à lui donner un nom suffisamment long pour que le risque de collision avec l'espace de noms d'autres personnes soit réduit, il eût é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.

À bientôt !

1

Clôturez jQuery !

2

Utilisez la fonction globale !

3

Espace de noms

 

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.