Conversion code JS en POO

**Elztx** · 17/06/2019, 11h24

Bonjour bonjour,

Je suis en train de convertir mon code en POO avec des class.
Seulement voilà, pour certains fichiers je m'en sors pas trop.

J'ai une map google intégrée à mon site. (La fonction n'est pas lancée dans le JS mais je passe dans l'url le "callback=createMap.initMap".)
Seulement voilà, après moult tentatives, je ne parviens pas à faire apparaitre ma carte lorsque je tente de passer mon code en class.. Si quelqu'un peut m'aider..

Mon code est dispo à cette adresse : http://velocdwj.eu3.biz
Il s'agit du fichier map.js

(J'espère réussir à passer le fichier markers.js en class une fois que la map le sera

)

Merci !

**Marco46** · 17/06/2019, 12h27

Envoyé par Elztx

Je suis en train de convertir mon code en POO avec des class.

Ne fait pas ça, ça n'a absolument aucun intérêt. Rien de rien. Tu ne vas seulement te faire des noeuds dans le cerveau.

Les classes peuvent être utiles pour définir des modèles de données, et si tu rentres dans ce genre de choses autant utiliser TypeScript.

En JS vanilla ça n'a pas le moindre intérêt, les classes ne sont pas des types et n'ont aucune espèce d'existence sous cette forme.

Il n'y a aucune différence entre :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
class Rectangle {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }
}
 
const monRectangle = new Rectangle(100, 200);

et

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
function creerRectangle(hauteur, largeur) {
  return {
    hauteur,
    largeur
  };
}
 
const monRectangle = creerRectangle(100, 200);

Le deuxième code est d'ailleurs meilleur, il évite d'utiliser l'opérateur new qui a le sale défaut d'être oublié.

**Elztx** · 17/06/2019, 12h48

Hello,

Merci pour ta réponse,
En effet je suis plus que d'accord pour les noeuds dans le cerveau ahahah.

Mais voilà, le projet étant réalisé dans le cadre d'une formation, on nous l'impose désormais (ce qui n'était pas le cas avant)..

**Engiwip** · 17/06/2019, 13h06

Vite fait

tu peux utiliser le playground de babel on line.

en testant à gauche la poo class et a droite voir le resultat ( function) avec l'option es2015-loose. ( c'est pas exactement ce que tu veux mais tu peux tester ton refractoring)

https://babeljs.io/repl#?babili=fals...ternalPlugins=

**Sodium** · 17/06/2019, 13h59

Envoyé par Marco46

...

Euh si si, la version un est propre et élégante

**Marco46** · 17/06/2019, 14h11

Envoyé par Elztx

Mais voilà, le projet étant réalisé dans le cadre d'une formation, on nous l'impose désormais (ce qui n'était pas le cas avant)..

Histoire d'être certain d'avoir bien compris : Dans une formation avec du JavaScript on vous impose de faire de la POO avec des classes en JavaScript ? J'ai bon ?

On peut connaitre le nom de cette formation ?

EDIT : Pour ton problème tu as la solution dans mon premier message.

Ton objet createMap doit provenir d'une classe qui va avoir comme propriété url et map et une fonction initMap et une fonction setMarker.

Tu instancies ton objet et c'est bon.

**Elztx** · 17/06/2019, 14h18

Envoyé par Marco46

Histoire d'être certain d'avoir bien compris : Dans une formation avec du JavaScript on vous impose de faire de la POO avec des classes en JavaScript ? J'ai bon ?

On peut connaitre le nom de cette formation ?

C'est ça.. Ils imposent des class désormais. Mon code est actuellement fonctionnel et j'en suis au résultat demandé dans le projet.. mais du coup je dois modifier une partie de mon projet afin de rentrer dans les critères de class et je bloque totalement là, je m'arrache un peu les cheveux, dès que je touche un truc y a plus rien qui marche...

**Marco46** · 17/06/2019, 15h13

Très mauvaise formation.

Je comprends mieux.

Bref, comme je te disais il suffit de faire comme dans mon exemple initial.

Donc par exemple ça :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
var createMap = {
    url: "https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=67c4688df481c3a0da62ebfb2eb8619cca1a3542",
    map: null,
    initMap: function () { // Creation Map
        "use strict";
        this.map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 45.750000, lng: 4.850000},
            zoom: 15
        });
    },
 
    setMarker: function () {                             // Creation marqeurs
        var manager = Object.create(MarkerManager);     // Creation objet avec MarkerManager prototype
 
        ajaxGet(this.url, function (reply) {
            var locations = JSON.parse(reply);          // Creation array avec la réponse de l'API
            locations.forEach(function (location) {      // For each "location" de l'array "locations"
                manager.add(location);                 // Creation d'un nouveau marqueur
            //manager.showDetails(location);        // Montrer les détails du marqueur au clic
            });
            manager.pushMarker();                       // Creation du MarkerClusterer
        });
    }
 
};

devient quelque chose comme ça :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
class MapCreator {
	constructor(url) {
		this.url = url;
		this.map = null;
	}	
 
	initMap() { // Creation Map
		this.map = new google.maps.Map(document.getElementById('map'), {
			center: {lat: 45.750000, lng: 4.850000},
			zoom: 15
		});
	}
 
	setMarker() {
		var manager = Object.create(MarkerManager);     // Creation objet avec MarkerManager prototype
 
        ajaxGet(this.url, function (reply) {
            var locations = JSON.parse(reply);          // Creation array avec la réponse de l'API
            locations.forEach(function (location) {      // For each "location" de l'array "locations"
                manager.add(location);                 // Creation d'un nouveau marqueur
            //manager.showDetails(location);        // Montrer les détails du marqueur au clic
            });
            manager.pushMarker();                       // Creation du MarkerClusterer
        });
	}
}
 
const createMap = new MapCreator('https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=67c4688df481c3a0da62ebfb2eb8619cca1a3542');

**Sodium** · 17/06/2019, 16h19

C'est très positif au contraire que l'on commence à former les développeurs JavaScript à travailler comme des gens normaux

**Watilin** · 17/06/2019, 18h40

Envoyé par Sodium

C'est très positif au contraire que l'on commence à former les développeurs JavaScript à se prendre les pieds dans le tapis

Fixed That For You

Le problème est que les classes en JS sont une illusion. Écris class A {} puis typeof A, tu verras que ça renvoie "function".
Écris class B { uneMethode() {} }, tu verras que tu peux accéder à uneMethode via B.prototype. Le vrai mécanisme sous-jacent, c’est un couple constructeur + prototype, une mécanique bancale qui existe uniquement parce que les responsables techniques de Netscape ont exigé de Brendan Eich qu’il incorpore le mot-clé new dans le langage qu’ils lui avaient demandé de créer, alors qu’il avait déjà un modèle à prototypes opérationnel.

La syntaxe class cache cet aspect de la chose aux débutantes et débutants. On devrait au contraire leur apprendre à utiliser Object.create() et les concepts associés, qui sont bien plus intuitifs.

Edit : je mets ça ici, ça commence à dater mais c’est toujours d’actualité

L’Opérateur new, bonne ou mauvaise pratique ?

**Beginner.** · 17/06/2019, 22h19

Envoyé par Marco46

Le deuxième code est d'ailleurs meilleur, il évite d'utiliser l'opérateur new qui a le sale défaut d'être oublié.

J'avoue que je suis un peu d'accord avec Sodium sur ce coup-là, on est d'accord que les class c'est juste du sucre syntaxique mais en fait ça aide car c'est plus lisible, c'est plus proche de ce que l'on fait ailleurs (en java par exemple) et ça peut permettre de passer à typescript plus facilement si c'est ce qu'on souhaite.

Là tu as pris un exemple simple mais si par exemple on commence à faire des class dérivées, cela devient encore plus lisible avec les class...
Et même au niveau du débogage je trouve que cela aide...

Et aussi au début cela peut paraitre étrange d’utiliser des fonctions de cette manière (pour construire des objets) d’ailleurs quand une fonction est utilisée comme constructeur (ce qui n'est pas le cas de ton deuxième exemple) on convient de mettre la première lettre de son nom en majuscule... Et avec une fonction constructeur aussi on peut utiliser l’opérateur new...

Sinon petite parenthèse il me semble que les deux exemples ne sont pas équivalents, le deuxième (qu'on appelle fonction usine je crois...) risque de consommer plus de mémoire si on ajoute des données, des méthodes...
Oui car la fonction creerRectangle renvoi un objet et à chaque appel un nouvel objet est crée alors avec le premier exemple aussi sauf que si j'ajoute des méthodes par exemple eh bien dans le premier elles seront ajoutées au prototype et seront donc communes/partagées avec toutes les instances alors que la fonction creerRectangle crée un nouvel objet à chaque fois avec ses propres méthodes.

Je pense que ce qui est plus proche du premier cas c'est la fonction constructeur il me semble... Et alors soit on utilise l’opérateur new soit Object.create() soit... Mais dans ces cas je ne suis pas sûr que ce soit plus lisible...

Au sujet de l'oubli de new : Avec les class le navigateur nous averti sur Chrome on a : Uncaught TypeError: Class constructor Rectangle cannot be invoked without 'new' donc pas moyen de se retrouver avec un bogue difficile à repèrer... Ce n'est pas le cas je crois avec les fonctions constructeurs...

Bon c'est juste un avis, c'est aussi une question de goût et d'habitude et l’influence de certains langages...

Envoyé par Watilin

Edit : je mets ça ici, ça commence à dater mais c’est toujours d’actualité :) L’Opérateur new, bonne ou mauvaise pratique ?

Ah cela me rappelle des souvenirs...

**Watilin** · 17/06/2019, 23h33

Envoyé par Beginner.

Au sujet de l'oubli de new : Avec les class le navigateur nous averti sur Chrome on a : Uncaught TypeError: Class constructor Rectangle cannot be invoked without 'new' donc pas moyen de se retrouver avec un bogue difficile à repèrer... Ce n'est pas le cas je crois avec les fonctions constructeurs...

Avec new.target on peut imiter ce comportement. Mais du coup, on peut se demander quel intérêt on a d’utiliser ça plutôt que class. Personnellement, la syntaxe new.target me déplaît fortement.

Pour l’anecdote, on peut aussi faire l’inverse :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function machin() {
  if (new.target) throw Error("Don’t use new");
}

Dans la même idée, les fonctions lambdas ne peuvent pas être utilisées comme des constructeurs.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
const chose = () => {};
new chose(); // TypeError: chose is not a constructor

**Beginner.** · 17/06/2019, 23h35

Envoyé par Engiwip

Vite fait

tu peux utiliser le playground de babel on line.

en testant à gauche la poo class et a droite voir le resultat ( function) avec l'option es2015-loose. ( c'est pas exactement ce que tu veux mais tu peux tester ton refractoring)

https://babeljs.io/repl#?babili=fals...ternalPlugins=

Ah ben lui il utilise bien une fonction constructeur... Et là cela se ressemble plus :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
class Rectangle {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }
}
 
const monRectangle = new Rectangle(100, 200);

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
var Rectangle = function Rectangle(hauteur, largeur) {
  "use strict";
 
  this.hauteur = hauteur;
  this.largeur = largeur;
};
 
var monRectangle = new Rectangle(100, 200);

Après si on fait d'autres choses héritage ou autre, avec les class ça reste lisible et la syntaxe est plus facile à retenir...

Exemple :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Rectangle {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }
}
 
const monRectangle = new Rectangle(100, 200);
 
class derive extends Rectangle {
  constructor(hauteur, largeur) {
    super (hauteur, largeur);
  }
}

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
function _inheritsLoose(subClass, superClass) {
  subClass.prototype = Object.create(superClass.prototype);
  subClass.prototype.constructor = subClass;
  subClass.__proto__ = superClass;
}
 
var Rectangle = function Rectangle(hauteur, largeur) {
  "use strict";
 
  this.hauteur = hauteur;
  this.largeur = largeur;
};
 
var monRectangle = new Rectangle(100, 200);
 
var derive =
  /*#__PURE__*/
  (function(_Rectangle) {
    "use strict";
 
    _inheritsLoose(derive, _Rectangle);
 
    function derive(hauteur, largeur) {
      return _Rectangle.call(this, hauteur, largeur) || this;
    }
 
    return derive;
  })(Rectangle);

Un simple héritage et déjà la différence de lisibilité se voit... Bon c'est vrai que c'est fait automatiquement, un humain ferait plus lisible mais bon peut-être pas aussi lisible qu'avec les class et encore une fois c'est une syntaxe plus simple et donc plus facile à retenir et donc moins de risque d'erreur...

**Beginner.** · 17/06/2019, 23h39

Envoyé par Watilin

Avec new.target on peut imiter ce comportement. Mais du coup, on peut se demander quel intérêt on a d’utiliser ça plutôt que class. Personnellement, la syntaxe new.target me déplaît fortement.

Ah je ne connaissais pas, je vais regarder ça... Merci.

**Elztx** · 18/06/2019, 10h04

Envoyé par Marco46

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
class MapCreator {
	constructor(url) {
		this.url = url;
		this.map = null;
	}	
 
	initMap() { // Creation Map
		this.map = new google.maps.Map(document.getElementById('map'), {
			center: {lat: 45.750000, lng: 4.850000},
			zoom: 15
		});
	}
 
	setMarker() {
		var manager = Object.create(MarkerManager);     // Creation objet avec MarkerManager prototype
 
        ajaxGet(this.url, function (reply) {
            var locations = JSON.parse(reply);          // Creation array avec la réponse de l'API
            locations.forEach(function (location) {      // For each "location" de l'array "locations"
                manager.add(location);                 // Creation d'un nouveau marqueur
            //manager.showDetails(location);        // Montrer les détails du marqueur au clic
            });
            manager.pushMarker();                       // Creation du MarkerClusterer
        });
	}
}
 
const createMap = new MapCreator('https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=67c4688df481c3a0da62ebfb2eb8619cca1a3542');

Merci, j'avais essayé quelque chose de similaire mais ça ne fonctionne toujours pas.. j'avais eu un problème similaire au début du projet, un camarade m'avait conseillé de passer l'url dans le callback au lieu d'appeler la fonction dans mon fichier js pour pallier au problème de "carte grise" qui ne s'affiche donc pas..
Peut-être est-ce un problème d'ordre de fichiers au chargement ?

(j'ai retiré mon fichier markers.js + markerclusterer.js qui entraient en conflit avec le fichier maps pour essayer; mais rien.. pas d'erreur dans la console non plus.. juste un rectangle gris au lieu de la map google)

**Marco46** · 18/06/2019, 10h15

Envoyé par Beginner.

on est d'accord que les class c'est juste du sucre syntaxique mais en fait ça aide car c'est plus lisible, c'est plus proche de ce que l'on fait ailleurs (en java par exemple)

Du coup c'est pas que c'est plus lisible, c'est juste que t'es habitué à Java alors tu te sers des classes pour définir des modèles comme pour structurer ton code à la place d'utiliser des modules. En bref tu voudrais faire du Java en JS. C'est une erreur qui te fait entrer dans un monde de confusion et de quiproquo, tout ce que les informaticiens doivent détester viscéralement pour être efficaces.

En JavaScript faire ça n'a aucun sens :

- Les classes ne sont pas des types, il n'y a pas de plus-value à utiliser des classes au lieu de factory functions ou mieux Object.create.
- En JS on a des modules pour structurer le code, les classes sont inutiles pour ça, pire elles nuisent à la lisibilité, tu vas avoir un module qui contient une classe qui contient un ensemble de fonctions.

L'argument qui consiste à dire "je suis habitué à Java donc je veux que tous les langages que j'utilise ressemblent à Java" est un très mauvais argument.

Pour en revenir au tuto, la demande des formateurs est idiote. Ça ne sert absolument à rien de demander une classe dans ce contexte le fichier map.js doit être un module. C'est ça la bonne abstraction en JS pour structurer du code.

Envoyé par Beginner.

c'est plus proche de ce que l'on fait ailleurs (en java par exemple) et ça peut permettre de passer à typescript plus facilement si c'est ce qu'on souhaite.

TypeScript n'a pratiquement aucun rapport avec Java c'est même quasiment l'inverse, l'un est uniquement statique l'autre est statique et dynamique, et l'un est structurel alors que l'autre est nominal. C'est juste le grand écart. Quand un dev te dit que c'est facile de passer de Java à TS il faut prendre ça comme une preuve qu'il n'a pas pris le temps d'étudier le langage. C'est au contraire une source de confusion majeure.

**Loralina** · 18/06/2019, 11h48

Bonjour,

Envoyé par Elztx

Merci, j'avais essayé quelque chose de similaire mais ça ne fonctionne toujours pas..

De ce que je vois, google cherche quelque chose sur window.
Il faudrait essayer var à la place de const :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var createMap = new MapCreator('https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=67c4688df481c3a0da62ebfb2eb8619cca1a3542');

Avec var, window.createMap sera défini, contrairement à si on utilise let ou const.

**Elztx** · 18/06/2019, 12h04

Hello,
Merci pour ta réponse, mais ça ne fonctionne toujours pas.. je suis un peu perdue...

**Loralina** · 18/06/2019, 12h57

Envoyé par Elztx

je suis un peu perdue...

C'est ça le vrai problème !

Il faut penser à faire des affichages un peu partout, désactiver du code, tester dans des fichiers simplifiés etc.
Même en étant débutant, on arrive ainsi à cerner la plupart des problèmes.

Ici, je conseille de partir d'un exemple simplifié.
Si je reprends les balises de script du site et l'exemple de Marco46, en remplaçant const par var, j'ai bien la fonction qui est appelée et une carte qui s'affiche.

test.html

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<div id="map" style="width:500px;height:300px;"></div>
<script type="text/javascript" src="map.js"></script>
<script async="" defer="" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBUsRAUURmSMoNGrVVABrRFWUQtcu-GSgQ&amp;callback=createMap.initMap"></script>

map.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
class MapCreator {
	constructor(url) {
		this.url = url;
		this.map = null;
	}	
 
	initMap() { // Creation Map
		this.map = new google.maps.Map(document.getElementById('map'), {
			center: {lat: 45.750000, lng: 4.850000},
			zoom: 15
		});
	}
 
	setMarker() {
		var manager = Object.create(MarkerManager);     // Creation objet avec MarkerManager prototype
 
        ajaxGet(this.url, function (reply) {
            var locations = JSON.parse(reply);          // Creation array avec la réponse de l'API
            locations.forEach(function (location) {      // For each "location" de l'array "locations"
                manager.add(location);                 // Creation d'un nouveau marqueur
            //manager.showDetails(location);        // Montrer les détails du marqueur au clic
            });
            manager.pushMarker();                       // Creation du MarkerClusterer
        });
	}
}
 
var createMap = new MapCreator('https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=67c4688df481c3a0da62ebfb2eb8619cca1a3542');

**Sodium** · 18/06/2019, 13h13

Il y a vraiment une forme d'ego disproportionné et réfractaire aux changements chez les développeurs JS en fait.

"NON, on ne veut pas que JavaScript ait des classes, du typage et ressemble à n'importe quel langage normal. On veut que ça reste tordu et qu'il faille un long apprentissage pour maîtriser ses particularités (absurdités ?) pour pour pouvoir continuer à dire aux autres développeurs qu'ils n'ont rien compris !"

Conversion code JS en POO

JavaScript

Discussions similaires

Partager

Partager