Coder des namespaces et des objets en javascript
Je vous ai présenté les namespaces javascript succinctement (trop peut-être), 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.
Par conséquent, 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 :
const 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 vous 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. Aussi le prototype est un objet comme un autre.
Ce qui est intéressant c’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 :
const 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 puisque le terme instance est plus adapté au modèle objet par classe.
La solution est simple, ainsi 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.
const 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;
}
}Par contre, 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 les namespaces javascript
Plusieurs options selon l’utilité d’avoir besoin ou pas de plusieurs clones. Vous avez besoin de plusieurs clones, vous les créez comme suit :
const clone1ObjetA = monNamespace.createObjetADuNamespace();
const clone2ObjetA = monNamespace.createObjetADuNamespace();
const clone1ObjetB = monNamespace.createObjetBDuNamespace();
const clone2ObjetB = monNamespace.createObjetBDuNamespace();Et vous utilisez l’objet avec ses méthodes :
const clone1ObjetA = monNamespace.createObjetADuNamespace();
clone1ObjetA.methodeA1();
const clone1ObjetB = monNamespace.createObjetBDuNamespace();
clone1ObjetB .methodeB1();Et les sous namespaces 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 namespace.
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() {
const objetADuNamespaceTmp = const layer = Object.create(this.objetADuNamespace);
return objetADuNamespaceTmp;
},
objetBDuSousNamespace1 : {
prB1 : null,
prB2 : null,
...
prBn : null
},
createObjetBDuNamespace : function() {
const objetBDuNamespaceTmp = const layer = Object.create(this.objetBDuNamespace );
return objetBDuNamespaceTmp;
}
}