Bonnes pratiques pour la POO en Javascript

Version imprimable

03/10/2013, 10h53
piemur2000

Bonnes pratiques pour la POO en Javascript
Bonjour,

Je débute en javascript et tente de prendre de bonnes habitudes dès le début. Je suis habitué au C++ et Java et ait donc l'habitude d’écrire des interfaces et des classes séparées dans des fichiers différents en important les différences dépendances.

J'ai donc deux questions:
1. Quelle syntaxe préférer pour l'écriture de "classes" en Javascript?
2. Comment organiser ses différents fichiers sources et gérer les dépendances entre ces derniers?
J'ai trouvé des personnes conseillant d'utiliser minimize pour faire un seul fichier avec les différents fichiers sources. D'autres conseillent d'utiliser des modules avec require.js...

Pour être plus concret je suis en train de m'amuser avec processing.js pour faire du rendu dans un canvas. En programmeur habitué a la POO traditionnelle je pensais faire une interface commune pour toutes mes entitées Drawable, puis définir des entités de bases genre Circle, Square, Polygon... Comment feriez-vous cela en Javascript?
03/10/2013, 13h48
SylvainPV

Il faut éviter d'écrire du Javascript de la même manière qu'on voudrait l'écrire en Java. La programmation objet orientée prototype est différente de la programmation objet par classes. Même si on peut parvenir à retrouver une syntaxe et un mode de pensée plus proche des classes, c'est selon moi dénaturer le langage et passer à côté d'autres spécificités. Comme quand on traduit de l'anglais en chinois traditionnel, on peut se faire comprendre mais on perd énormément de nuances et de subtilités dans le propos.

Par rapport aux conseils que tu as entendu : ils sont bons, mais je te conseillerais d'apprendre à marcher avant d'apprendre à courir :) requireJS est un outil très pratique pour gérer de nombreuses dépendances, pour les projets assez importants, mais qui requiert une certaine discipline dans le code. Et les concaténeurs/minifieurs tels que minimize interviennent après, quand il s'agit de booster les performances de ton site en compressant tout ce que tu peux. Je pense que tu n'en es pas encore là, inutile d'anticiper trop sous peine de t'y perdre.

Les interfaces n'ont en effet rien à faire en Javascript.
Pour compléter les propos de Sylvain :

En JavaScript, on ne teste pas qu'un objet appartient à telle classe ou implémente telle interface. Cela n'a pas de sens car un objet JavaScript n'entre dans aucun moule préalablement défini

En gros, en JavaScript, tu ne crées pas un objet à partir d'un moule (classe) qui doit implémenter telle interface, mais tu crées un objet A à partir d'un autre objet B. B devient alors le prototype de A. Le prototype "racine" étant Object.
Le nouvel objet B ainsi créé à partir de A aura ses propres méthodes/attributs et aura également accès à celles de A, puis ensuite à celles du prototype de A, etc. On parle de chaîne de prototype. Si la propriété/méthode n'est pas dans B, on check dans son prototype A, puis dans le prototype du prototype A, etc, jusqu'à remonter la pile jusqu'à Object.

Un "équivalent" de l'interface serait plutôt de tester la présence d'attributs ou de méthodes.

En effet, JavaScript répond au style "duck typing". Si mon objet à la méthode "coincoin()" et qu'il a un bec, alors cet objet est un canard. Sinon ce n'en est pas un.

Voici un cas ultra basique pour simuler une notion "d'interface". On check si l'objet courant possède les propriétés imposées par l'interface qui est en réalité un objet classique recensant les types de propriétés attendues. Attention, si l'objet courant contient plus de propriétés, ce bout de code ne le détecte pas. Bref, c'est simplement pour imager la chose :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 // l'objet implémente - t - il l'interface ? Object.prototype.implemente = function(interface){ for(var prop in interface) if (interface.hasOwnProperty(prop)) { if(typeof this[prop] !== interface[prop] || this[prop] === undefined) return false; } return true; }; var interfaceCochon = { hasGroin: "boolean", groingroin: "function", couleur: "string" }; var interfaceCanard = { hasBec: "boolean", coincoin: "function" }; var objetCanard = { hasBec: true, coincoin: function() { console.log('coin coin'); } } console.log(objetCanard.implemente(interfaceCochon)); // false console.log(objetCanard.implemente(interfaceCanard)); // true
Mais ça n'a pas de sens car c'est un langage dynamique. A la création de l'objet, peut-être que objetCanard se pliera aux exigences d'une interface quelconque. Mais quid de modifier ensuite l'interface ? Ou l'objet sans revérifier si l'implémentation est donne ?

Merci pour vos réponses. Je vais abandonner l'utilisation d'un framework pour l'instant afin de bien comprendre ce que je fais.

Si j'ai bien compris, mon exemple de formes à dessiner donnerai le code suivant:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function Square(size) { this.size = size; } Square.prototype.draw = function() { return "Square of size: " + this.size; } function Circle(radius) { this.radius = radius; } Circle.prototype.draw = function() { return "Circle of radius: " + this.radius; } var entities = []; entities.push(new Square(10)); entities.push(new Square(20)); entities.push(new Circle(30)); for ( var i = 0; i < entities.length; i++ ) { console.log( entities[i].draw() ); }
Est-ce que cela vous parait correct?
Pour l'organisation du code source comment procéderiez-vous?

1 fichier circle.js, 1 fichier square.js et un fichier main.js inclus dans cet ordre la dans le code html?
Code:

1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <html> <head>...</head> <body> ... <script src="js/circle.js"></script> <script src="js/square.js"></script> <script src="js/main.js"></script> </body> </html>

Citation:

Est-ce que cela vous parait correct?

C'est une possibilité, personnellement je n'y adhère pas.

Pour illustrer ce que j'ai dit ci-dessus et pour répondre à ta question.

Citation:

Quelle syntaxe préférer pour l'écriture de "classes" en Javascript?

Il n'y a donc pas de classe comme tu l'entends. Juste des objets qui contiennent des attributs et de méthodes et qui peuvent être "parents" (prototype) d'autres objets.

La magie des prototypes chaînés fait le reste :ccool:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/* Pour les navigateurs n'implémentant pas ES5 */
if (!Object.create) {
  Object.create = function(o) {
    function F() {}
    F.prototype = o;
    return new F();
  };
}
 
// Voici un objet, nommé Animal. Implicitement, son prototype est Object
var Animal = {
  init: function(type, nom) {
    this.type = type;
    this.nom = nom;
  },
  presenter: function() {
    return "Je suis un " + this.type + " et je me prénomine " + this.nom + " ! ";
  }
};
 
// Voici un autre objet, Canard. Explicitement, on le créé à partir de Animal. Le prototype de Canard est donc Animal.
var Canard = Object.create(Animal);
// cette méthode ne sera disponible que pour cet objet Canard et les objets susceptibles d'être créés à partir de lui
Canard.crier = function() {
  return "coin coin !";
};
 
// Voici un autre objet, Cochon. Explicitement, on le créé à partir de Animal. Le prototype de Cochon est donc Animal.
var Cochon = Object.create(Animal);
// cette méthode ne sera disponible que pour cet objet Cochon et les objets susceptibles d'être créés à partir de lui
Cochon.crier = function() {
  return "groin groin !";
};
 
// création d'un objet canard1, créé à partir de Canard.
// chaine de prototype : canard1 > Canard > Animal > Object
var canard1 = Object.create(Canard);
canard1.init("canard célèbre", "Donald"); // canard1 n'a pas de méthode init(), on check dans le prototype direct, de Canard donc puis Animal.
console.log(canard1.presenter()); // méthode de Animal
console.log(canard1.crier()); // méthode de Canard
 
// chaine de prototype : cochon1 > Cochon > Animal > Object
var cochon1 = Object.create(Cochon);
cochon1.init("cochon grimpeur", "Super cochon"); // On check dans cochon1, la méthode init n'existe pas. Du coup, on descend la chaine de prototype, et on check dans Cochon, etc .... jusqu'à Animal
console.log(cochon1.presenter()); // méthode de Animal
console.log(cochon1.crier()); // méthode de Cochon
 
// Pour checker les prototypes
console.log(Animal.isPrototypeOf(cochon1)); // true
console.log(Animal.isPrototypeOf(canard1)); // true
console.log(Animal.isPrototypeOf(Canard)); // true
console.log(Canard.isPrototypeOf(canard1)); // true
console.log(Canard.isPrototypeOf(cochon1)); // false

Ouputs :

Code:

1
2
3
4
5
6
7
8
9
Je suis un canard célèbre et je me prénomine Donald ! 
coin coin !
Je suis un cochon grimpeur et je me prénomine Super cochon ! 
groin groin !
true
true
true
true
false

05/10/2013, 15h33
sekaijin
Citation:
Envoyé par piemur2000

Bonjour,

Je débute en javascript et tente de prendre de bonnes habitudes dès le début. Je suis habitué au C++ et Java et ait donc l'habitude d’écrire des interfaces et des classes séparées dans des fichiers différents en important les différences dépendances.

J'ai donc deux questions:

Quelle syntaxe préférer pour l'écriture de "classes" en Javascript?
1. ben la première règle est d'oublier les classes.
  qui dit pas de classe dit pas de question sur le sujet.
  JS est un langage à base de prototype donc il suffit d'écrire des prototypes.
  
  Citation:
  
  Envoyé par piemur2000
2. Comment organiser ses différents fichiers sources et gérer les dépendances entre ces derniers?