Les namespace en javascript (mise à jour 06/10/2015)




 

Dans cet article, un bref aperçu de ce qu’est un namespace, 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égriez à 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 pourriez 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 :

var monJeu = {}

Avec variables :

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

Avec fonctions :

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

Avec variables et fonctions :

var 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 avez lu 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.

[important]Des remarques, des améliorations, des idées, des coquilles : faites le savoir. Faites savoir si cet article vous a été utile par un commentaire ou les réseaux sociaux.[/important]

 

Posté dans html5Taggé javascript objet, namespace javascript  |  6 commentaires

6 réponses à "Les namespace en javascript (mise à jour 06/10/2015)"

Répondre

*