Les namespaces et les objets javascript

 

Je vous ai présenté succinctement (trop peut-être) les namespaces javascript dans l’article Les namespace en javascript ainsi que diverses manières de créer des objets javascript dans l’article 5 manières de créer des objets en javascript.

Je vais aller un peu plus loin sur l’organisation du code en introduisant les objets dans les namespaces javascript.

 

Un namespace javascript est un objet littéral

Il n’existe pas de namespace en javascript à proprement parler, toutefois on les simule avec des objets littéraux comme ceci :

var monNamespace = {
}

L’idéal est d’avoir un fichier par namespace javascript, sans quoi vous allez vous retrouver avec un super gros fichier dans lequel il va être difficile de naviguer et donc de s’y retrouver.

Dans le cas présent, je conseille de nommer le fichier monNamespace.js. Simple non ?

 

Intégrer un ou plusieurs objets javascript dans un namespace javascript

D’emblée, oubliez le modèle objet par classe utilisé par des langages tels que java, C# ou C++.

Ce qui engendre la confusion est la création d’objets via l’opérateur new que l’on voit parfois en javascript. De mon point de vue, c’est à proscrire pour sanctifier le modèle objet javascript.

Il n’y a pas de classe en javascript, javascript utilise un modèle objet par prototype. En d’autres termes, cela veut dire que tout passe par un objet prototype qu’il est possible de cloner. Le prototype est un objet comme un autre.

Ce qui est intéressant est que l’on peut modifier un clone sans que cela n’affecte les autres (dont le prototype).

De plus, tout objet peut être le prototype d’un autre.

Après ce petit rappel, pour intégrer un ou plusieurs objets dans un namespace, il suffit de les déclarer comme suit :

var monNamespace = {
 objetADuNamespace : {
  prA1 : null,
  prA2 : null,
  ...
  PrAn : null
 },

 objetBDuNamespace : {
  prB1 : null,
  prB2 : null,
  ...
  PrBn : null
 }
}

Dans l’exemple ci-dessus, j’ai 2 objets objetADuNamespace et objetBDuNamespace rattachés au namespace javascript monNamespace.

Vous allez me dire, c’est bien beau tout ça, mais comment on crée des clones de objetADuNamespace et objetBDuNamespace.

 

Cloner des objets d’un namespace javascript

Je choisis volontairement le mot cloner et non pas instancier : le terme instance est plus adapté au modèle objet par classe.

La solution est simple : il suffit d’intégrer dans le namespace javascript une fabrique (factory) pour chaque objet. Cette factory est une fonction qui clone l’objet et le renvoie.

var monNamespace = {
 objetADuNamespace : {
  prA1 : null,
  prA2 : null,
  ...
  prAn : null
 },

 createObjetADuNamespace : function() {
  var objetADuNamespaceTmp = Object.create(this.objetADuNamespace);
  return objetADuNamespaceTmp;
 },

 objetBDuNamespace : {
  prB1 : null,
  prB2 : null,
  ...
  prBn : null
 },

 createObjetBDuNamespace : function() {
  var objetBDuNamespaceTmp = Object.create(this.objetBDuNamespace );
  return objetBDuNamespaceTmp;
 }
}

L’exemple est ici simpliste. Il est tout à fait possible d’ajouter des paramètres permettant d’initialiser les propriétés du clone.

 

Ajouter des méthodes aux objets du namespace javascript

Classique, il suffit de les déclarer dans l’objet :

 objetADuNamespace : {
  prA1 : null,
  prA2 : null,
  ...
  prAn : null,

  methodeA1 : function() {
  },

  methodeA2 : function() {
  },
  ....
  methodeAn : function() {
  },

 },

 

Utiliser le namespace javascript

Plusieurs options selon l’utilité : besoin ou pas de plusieurs clones.

Vous avez besoin de plusieurs clones, vous les créez comme suit :

var clone1ObjetA = monNamespace.createObjetADuNamespace();
var clone2ObjetA = monNamespace.createObjetADuNamespace();
var clone1ObjetB = monNamespace.createObjetBDuNamespace();
var clone2ObjetB = monNamespace.createObjetBDuNamespace();

Et vous utilisez l’objet avec ses méthodes :

var clone1ObjetA = monNamespace.createObjetADuNamespace();
clone1ObjetA.methodeA1();
var clone1ObjetB = monNamespace.createObjetBDuNamespace();
clone1ObjetB .methodeB1();

 

Et les sous namespace javascript

Un namespace javascript est un objet littéral, pour un sous namespace c’est la même chose, c’est aussi un objet littéral.

En terme objet, un namespace est un objet littéral et un sous namespace est un sous-objet littéral : une structure de données propriété de l’objet littéral parent.

Pour une meilleure lisibilité, je vous conseille de créer un fichier javascript par sous namepace.

Donc un premier fichier monNamespace.js et un fichier par sous namespace sousNamespace1.js, sousNamespace2.js, … sousNamespacen.js.

Le code d’un sous namespace :

monNamespace.sousNamespace1 = {
 objetADuSousNamespace1 : {
  prA1 : null,
  prA2 : null,
  ...
  prAn : null
 },

 createObjetADuSousNamespace : function() {
  var objetADuNamespaceTmp = var layer = Object.create(this.objetADuNamespace);
  return objetADuNamespaceTmp;
 },

 objetBDuSousNamespace1 : {
  prB1 : null,
  prB2 : null,
  ...
  prBn : null
 },

 createObjetBDuNamespace : function() {
  var objetBDuNamespaceTmp = var layer = Object.create(this.objetBDuNamespace );
  return objetBDuNamespaceTmp;
 }
}

Notez bien l’absence du mot clé var qui indique bien qu’on ajoute une structure de donnée à un objet littéral.

Pour en voir une illustration pratique pour le jeu vidéo html5, je vous renvoie vers l’article consacré à La création d’un objet Sprite en javascript

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.

Posté dans html5Taggé namespace javascript, objet littéral javascript  |  1 commentaire

Une réponse à "Les namespaces et les objets javascript"

Répondre