Les namespace en javascript

Les namespaces en javascript

Dans cet article, un bref aperçu de ce qu’est un namespace en javascript, pourquoi les utiliser et comment les utiliser ?

Les espaces de nom (namespace)

Si vous définissez une variable i dans un script de votre cru et que vous l’intégrez à une page html existante qui contient un autre script utilisant aussi une variable i. Les deux variables bien qu’utilisées à des fins différentes sont considérées par l’interpréteur javascript comme une seule et même variable.

Il est fort probable que le script existant modifie la valeur de la variable de votre script et inversement. Au final, des comportements inattendus, des effets de bord.

Tout ceci est du au fait que, sans le savoir, vous travaillez dans un même espace de nommage ou avec un même objet en l’occurrence le javascript window : tout ce que vous définirez dans un script javascript en fera partie.

Tout code javascript appartient de fait à cet objet ou espace de nommage.

L’usage du terme espace de nommage ou namespace est abusif en javascript : cela n’existe pas.

Le namespace javascript dont on parle est l’objet global.

Javascript permet de simuler vos propres espaces de nommage afin d’éviter l’écueil des collisions de variables en rendant étanche votre code javascript à tout code existant.

Mais les namespace ne servent pas qu’à cela. Par le biais de sous namespace (namespace intégré à un namespace), ils permettent d’organiser votre code javascript en unités logiques.

Ainsi dans le cadre du jeu Pong, vous pouvez avoir une sous namespace dédié à la gestion du chronomètre.

Définition d’un namespace

Comme dit précédemment, les espaces de nommages n’existent pas en javascript. Il faut donc les simuler en créant un objet litéral qui encasulera votre code spécifique.

Pour définir un namespace, il suffit de déclarer une structure de données (un objet) au format JSON :

const monJeu = {
}

Avec variables :

const monJeu = {
 nomVariable1 : valeurVariable1,
 .....
 nomVariableN : valeurVariableN
}

Avec fonctions :

const monJeu = {
 nomFonction1 : function() {
  ....
 },
 .....
 nomFonctionN : function() {
  ....
 }
}

Avec variables et fonctions :

const monJeu = {
 nomVariable1 : valeurVariable1,
 .....
 nomVariableN : valeurVariableN,
 
 nomFonction1 : function() {
  this.nomVariable1 = nouvelleValeurVariable1;
 },
 .....
 nomFonctionN : function() {
  ....
 }
}

Au sein de la structure JSON, les variables sont utilisées en les préfixant par le mot clé this : this.nomVariable1.
En dehors de la structure JSON, les variables sont utilisées en les préfixant par le nom du namespace : monJeu.nomVariable1.

Définition d’un sous namespace

Il suffit de définir une nouvelle structure de données en la préfixant par le nom du namespace parent :

monJeu.sousNamespace = {
 nomVariableSousNamespace1 : valeur
}

Pour la définition des variables et des fonctions, cela reste identique.

Au sein de la structure JSON, les variables sont utilisées en les préfixant toujours par le mot clé this : this.nomVariableSousNamespace1.
En dehors de la structure JSON, les variables sont utilisées en les préfixant toujours par le nom du namespace : monJeu.sousNamespace.nomVariableSousNamespace1.

Conseil

Pour plus de clarté :
– utilisez un fichier par namespace et sous namespace;
– nommez chacun des fichiers comme le namespace en le suffixant par l’extension .js.

Remarques

Si vous lisez l’article 5 manières de créer des objets en javascript, remarquez que cela ressemble fort à des objets statiques.

Objet statique ou namespace, la différence est faible voire inexistante. C’est la lecture et l’utilisation que vous en faites qui les différencient.

Il est rare de voir des namespace sans sous namespace sans quoi c’est un mauvais usage.

Au final, c’est vous en tant que développeur qui décidez de qui est quoi.