Les namespace en javascript

maven_archetype

 

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.

Cependant javascript vous permet de créer vos propres espaces de nommage afin d’éviter ce genre d’écueil 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

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

monJeu = {}

Avec variables :

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

Avec fonctions :

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

Avec variables et fonctions :

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.

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.

 

3 commentaires pour Les namespace en javascript

  • Refactoring html5 javascript  dit:

    […] Les namespace en javascript […]

  • Créer une librairie node.js  dit:

    […] Les namespace en javascript […]

  • How to create node.js library  dit:

    […] – mysql server installed; – know what node.js is (see blog post Comprendre node.js) – node.js installed (see blog post on Installer node.js sous Windows); – read post mysql access from node.js; – read post Les namespace javascript. […]

Laisser une réponse

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>