Javascript est un formidable langage devenu incontournable dans le développement front-end. Pourtant, ce n’est pas le langage de programmation le plus élaboré qui soit, du moins si on le compare à des langages fortement typés comme Java ou C#. Ainsi, la POO en Javascript est plutôt triviale et … très singulière ! A l’instar des classes qui n’existent pas en tant que telles, il n’existe pas non plus de vrai système de namespace en Javascript. Malgré cela, la grande souplesse de ce langage permet de simuler plutôt simplement un namespace. Voici la marche à suivre.
Cet article est destiné aux développeurs ayant déjà quelques bases en Javascript et qui sont amenés à utiliser ce langage de manière conséquente.
Un namespace, c’est quoi ?
Pour rappel, un namespace, espace de nom en français, sert principalement à isoler la portée des fonctions déclarées en son sein. En délimitant le scope on peut ainsi utiliser les mêmes noms de fonctions à travers tout notre code applicatif, ce qui serait impossible sans namespace. Par exemple, il peut arriver que deux ou plusieurs fonctions portent le même nom et la même signature, et il devient alors impossible pour l’interpêteur Javascript de savoir à quelle fonction on veut faire référence.
Comme je le disais ci-dessus, Javascript ne propose pas de véritable système de namespace et il faut donc ruser un peu pour obtenir l’effet désiré.
Imaginons que nous voulions regrouper une série de fonctions destinées aux traitements des formulaires, et cela dans un espace de nom que nous appelerons myNamespace.
Avant de créer un namespace, la première chose à faire est de vérifier s’il n’existe pas déjà :
if(typeof myNamespace === 'undefined') {
// Code à insérer dans le namespace
} else {
console.log('Ce namespace existe déjà !');
}Cela fait, nous allons pouvoir nous attaquer à la déclaration du namespace. Pour cela, nous allons utiliser une particularité de Javascript qui permet de créer des objets dits “littéraux” en utilisant la notation JSON. Nous stockerons nos membres dans une simple variable Javascript.
var myNamespace = {
// Propriétés
property1: 'Value 1',
property2: 'Value 2',
// Méthode d'initialisation
init: function() {},
// Sous-namespace 1
fields: {
checkEmail: function() {},
checkURL: function() {}
},
// Sous-namespace 2
forms: {
checkContact: function() {}
}
};Il y a plusieurs remarques à faire à propos de l’extrait de code qui précède.
A propos de la notation JSON. D’abord, les membres du namespace, propriétés et méthodes, sont déclarés et assignés directement. Chaque assignation est suivie d’une virgule, sauf la dernière. Le signe “=” n’est pas utilisé pour l’assignation, on utilise ici le double-point (“:”). L’ordre de la déclaration est identique quand il s’agit des propriétés : nom de la propriété : valeur de la propriété. Par contre, les choses diffèrent lorsqu’il s’agit d’une méthode : le mot-clef function n’est pas utilisé pour la déclaration, on nomme directement la méthode et on lui assigne … une fonction anonyme. Pour plus d’informations sur ce sujet, je vous invite à consulter l’article dédié aux fonctions anonymes en Javascript.
Une autre singularité réside dans l’utilisation de sous-namespaces afin de structurer plus encore notre code. Attention à l’emploi de this dans les sous-namespaces ! this pointera vers le sous-namespace, et non vers le namespace parent. Pour accéder à une propriété/méthode d\’un namespace parent, il faut passer par namespaceParent.Propriete.
Voilà, c’est tout ce qu’il y a à faire, nous pouvons dès à présent utiliser notre namespace pour accéder à nos propriétés et utiliser nos méthodes tout en étant assurés qu’elles n’entreront pas en conflit avec d’autres fonctions portant le même nom. Pour cela, il suffit de recourir à la syntaxe pointée suivante : nomDuNamespace.attribut/method.
Ainsi, si nous voulons tester si une chaîne de caractère est bien une adresse email correctement formée, nous écrivons :
myNamespace.checkEmail();Voilà, très simplement nous sommes parvenus à créer un pseudo namespace en nous basant sur la grande souplesse de Javascript !
Une discussion intéressante sur le sujet: How do I declare a namespace in Javascript ?
