Namespace Javascript
Javascript a souffert pendant très longtemps d'une image de "code bricolage" mal pensé. C'est encore une fois non pas à cause du langage lui même mais de l'utilisation qu'on en fait. Maintenant que je vous ai parlé de la création d'un raycaster en Javascript en utilisant la balise canvas, ou encore du classement de tableau d'objets, je vais vous montrer comment gérer un espace de nom ou "namespace".
Ce n'est pas du tout un bricolage (encore une fois) mais bel et bien une capacité du langage que nous allons utiliser.
Vous le savez, tout est objet en Javascript. Créer une classe revient à créer une fonction. Cette fonction a justement la particularité d'être une classe sitôt que vous lui assigner des propriétés et un prototype.
Jusque là, pas de namespace... et dans notre cas nous voudrions accéder à nos classes via un package. Cela permettra de protéger les noms de nos classes, et de facilement renommer le package en cas de conflit.
Prenons un exemple. Nous voulons créer un package "vehicules" qui contiendra deux classes:
- Car - les voitures
- Plane - les avions
Sans espace de nom, cela se passe comme cela:
//Class Car
function Car(){
this.mark = "";
this.color = "";
this.seats = 4;
}
//Car prototype
Car.prototype.move = function (){
//do some actions
}
Car.prototype.stop = function (){
//do some actions
}
//Planes
//Class Plane
function Plane(){
this.mark = "";
this.color = "";
this.reactors = 2;
this.weight = "400T"
}
//Plane prototype
Plane.prototype.fly = function (){
//do some actions
}
Nos objets sont instanciés de cette manière:
//Create cars
var car_1 = new Car();
car_1.color = "red"
car_1.move();
var car_2 = new Car();
car_2.color = "red"
car_2.move();
car_2.stop();
//Create Planes
var plane_1 = new Plane();
plane_1.mark = "boing"
plane_1.fly()
var plane_2 = new Plane();
plane_2.mark = "airbus"
plane_2.fly()
Problèemes:
- Il se peut que j'importe dans ma page un autre script qui définisse aussi "Plane" et/ou "Cars"
- Je ne sais pas vraiment si Plane et Cars proviennent de la même librairie...
- etc...
Le mieux serait de regrouper nos classes dans un espace de nom. C'est là qu'entre en jeux une écriture un peu spéciale:
var a = ( function (){
//some actions
return something
}(variable) )
Ici, "a" va récupérer le retour de la fonction anonyme qui est tout de suite exécutée. L'argument "variable" correspondra à "this" dans la fonction anonyme. Ce dernier n'est pas obligatoire.
En regardant donc de plus près le principe de cette notation, on comprend que nous pouvons retourner une structure (de type objet) qui contiendra des références vers des classes crées dans la fonction anonyme.
En clair:
var Vehicules = (function (){
//Class Car
function Car(){
this.mark = "";
this.color = "";
this.seats = 4;
}
//Car prototype
Car.prototype.move = function (){
//do some actions
}
Car.prototype.stop = function (){
//do some actions
}
//Planes
//Class Plane
function Plane(){
this.mark = "";
this.color = "";
this.reactors = 2;
this.weight = "400T"
}
//Plane prototype
Plane.prototype.fly = function (){
//do some actions
}
return {
Cars: Cars,
Plane: Plane
}
}());
Ce qu'il se passe est simple. "Vehicules" est une variable qui contient une structure retournée par la fonction anonyme directement exécutée. La variable retournée contient des références vers les classes "Cars" et "Plane" (pour simplifier, j'ai nommé les références avec le nom de la classe).
A partir de là, vous pouvez utiliser l'espace de nom de deux manières. Soit:
var car_1 = new Vehicules.Car()
car_1.color = "red";
//etc...
Soit en utilisant l'espace de nom déclaré par défaut dans un bloc:
with(Vehicules){
var car_1 = new Car()
car_1.color = "red";
//etc...
}
Dans le premier cas, il faut utiliser l'espace de nom en préfix du nom de la classe, dans le second cas il faut créer un bloc mais nous n'avons pas besoin de préfixer les noms de classe.
En bref, pour créer un espace de nom, il ne suffit que d'entourer les déclarations d'une ligne et de retourner une structure protant les références aux classes.
C'est simple, ça coûte rien, et ça rend le code plus clair. Abusez-en !
Pas de commentaire pour le moment
Trackbacks
Pour ajouter un trackback (retrolien) sur ce ticket, utilisez cette adresse: http://www.metal3d.org/index.php/trackback/default/tb?id=blog%2F192
