Conversion code JS en POO

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 :D)

Merci !

Citation:

---

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:

---

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:

---

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é.

Hello,

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

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)..

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=

Citation:

---

Envoyé par Marco46

...

---

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

Citation:

---

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.

Citation:

---

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...

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:

---

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:

---

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');

---

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

Citation:

---

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 :mouarf:

---

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 ?

Citation:

---

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...

Citation:

---

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...

Citation:

---

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:

---

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:

---

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

---

Citation:

---

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: 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: 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: 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: 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...

Citation:

---

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.

Citation:

---

Envoyé par Marco46

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

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)

Citation:

---

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.

Citation:

---

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.

Bonjour,

Citation:

---

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:

---

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.

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

Citation:

---

Envoyé par Elztx

je suis un peu perdue... :?

---

C'est ça le vrai problème ! :P
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:

---

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:

---

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');

---

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 !"

Citation:

---

Envoyé par Loralina

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.

---

Effectivement const change la portée j'ai fait ça à l'arrache sans tester mais la structure générale est à revoir.

Cela dit utiliser des classes (ES6) sans const ça n'a vraiment aucun sens. Mais l'ensemble du code devrait être revu pour être ES6 compatible, et le point de départ c'est qu'il n'y a pas de modules. Il faut du coup aussi un Babel / TypeScript pour transpiler et un bundler pour charger tout ça proprement dans le browser.

On pourrait avoir le lien de l'exercice et du cours associé ?

Citation:

---

Envoyé par Loralina

C'est ça le vrai problème ! :P
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.

...

---

En effet, merci, j'avais quelque chose qui coinçait ailleurs, c'est résolu. Je vais tenter de remettre mes marqueurs à présent !
J'hésite à les mettre directement dans mon fichier map.js, je vais regarder ça.

Je commence à voir le bout ! Merci encore

Bon, j'en profite pour vous dire de ne pas vous battre aha,
Dans le cadre de ma formation on me demande de procéder ainsi. Après libre à moi par la suite d'approfondir dans un sens ou dans l'autre.

Une fois rédigé en class, le code ne me pose pas de souci de lecture, et j'en apprécie la structure. Par contre j'ai vraiment l'impression de me prendre la tête pour rien quand je dois modifier mon code pour le faire passer en POO avec des class. D'autant plus que la demande a été modifiée en cours de formation...

Par ailleurs, le canvas et le diapo ne m'avaient pas posé de souci du tout alors que certains ont eu plus de mal avec ça et plus de facilités avec la map... je ne dois pas réfléchir pareil aha..

Par exemple, je bloque encore sur mon fichier markers :aie: !

Je n'ai pas cette facilité à retranscrire dans les class et je perds vite patience quand je pars d'un code fonctionnel pour devoir tout refaire et que ça bloque..

JavaScript va de toute façon peu à peu évoluer et sortir de son modèle archaïque pour se rapprocher des autres langages beaucoup plus intuitifs et lisibles (le typage statique est prévu pour la prochaine version notamment), donc autant apprendre directement la bonne manière de faire ;)

Citation:

---

Envoyé par Elztx

je perds vite patience quand je pars d'un code fonctionnel pour devoir tout refaire et que ça bloque..

---

Ça s'appelle du refactoring. Tu vas littéralement passer ta carrière à en faire, autant t'y habituer :mrgreen:

En réalité cette formation est une passerelle pour moi, je ne compte pas faire que du dév, mais les compétences ajoutées m'intéressent pour mes projets persos, et la formation m'offre un titre bac +2 pour entamer autre chose derrière ! :)

Et puis mon poste actuel en alternance m'attire beaucoup et il ne correspond pas vraiment à un profil de Dév mais plus de DA / Gestion de Projet..

Je vais faire une petite pause je crois, ces satanés marqueurs m'énervent ahaha. :massacre:

Egalement, si vous avez des liens sur le sujet je veux bien..

Citation:

---

Envoyé par Sodium

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 !"

---

réfractaire au changement ? quelle drôle d'idée.

avec babel tu peux choisir la syntaxe que tu souhaites en entrée et le format JS en sortie que tu souhaites.

tu peux meme t'inventer un balisage ( jsx , tsx , h , <nouveau truc muche>...) pour plus de lisibilité .

tu peux modulariser ou , packager en morceaux les parties projet que tu souhaites .

tu peux inserer la vue , le controleur , le modele au meme endroit pour penser composant ou tout eclater pour definir une strategie de developpement

travailler avec un semblant de poo ou du lambda fonctionnel

en fait tu fais ce que tu veux réellement .

bref La liberté.:pingoin2:

Bonsoir,

Citation:

---

Envoyé par Marco46

Effectivement const change la portée

---

Plus ou moins un problème de portée :
A la limite, disons que oui si on considère qu'avec const/let, createMap n'a pas d'existence sur l'objet window (la constante/variable ainsi déclarée dans le contexte global n'est pas une propriété de cet objet).
Mais ce n'est pas un problème de contexte/bloc, comme si on avait mis des accolades et qu'on cherchait à y accéder en dehors.

Pour détailler un peu :
Si j'ai bien compris, la chaîne "createMap.initMap" est traitée sur le client par le js de google.
Elle est coupée sur le point et le script semble tenter un window["createMap"]["initMap"].

Voilà le fragment de code concerné :

Code:

---

for(var b=a.split("."),c=window,d=window,e=0;e<b.length;e++)if(d=c,c=c[b[e]],!c)throw _.Wc(a+" is not a function");

---

On peut tester ce code dans map.js :

Code:

---

1 2 3 4 5 6 7 8 9 10 11

//const createMap = new MapCreator('https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=67c4688df481c3a0da62ebfb2eb8619cca1a3542'); var createMap = new MapCreator('https://api.jcdecaux.com/vls/v1/stations?contract=Lyon&apiKey=67c4688df481c3a0da62ebfb2eb8619cca1a3542'); var a="createMap.initMap"; for(var b=a.split("."),c=window,d=window,e=0;e<b.length;e++) { if(d=c,c=c[b[e]],!c) { throw "is not a function"; } console.log(c); }

---

Si on écrit var, ça passe car window.createMap existe.
Avec const/let, ce n'est pas le cas.

Par contre, si on fait un script php comme ceci :
map.php

Code:

---

<?php echo $_GET['callback'].'();';?>

---

et un fichier html comme ceci :
test.html

Code:

---

1 2	<script src="map.js"></script> <script src="http://127.0.0.1/map.php?callback=createMap.initMap"></script>

---

alors là, on peut tout à faire écrire const createMap = ... dans map.js, le script généré par map.php y aura bien accès.

Citation:

---

Envoyé par Elztx

En réalité cette formation est une passerelle pour moi, je ne compte pas faire que du dév, mais les compétences ajoutées m'intéressent pour mes projets persos, et la formation m'offre un titre bac +2 pour entamer autre chose derrière ! :)

Et puis mon poste actuel en alternance m'attire beaucoup et il ne correspond pas vraiment à un profil de Dév mais plus de DA / Gestion de Projet.. .

---

Si ton objectif n'est pas particulièrement de faire du JS tu as tout intérêt à apprendre les patterns communs à la majorité des langages plutôt qu'approfondir ses bizarreries.

Citation:

---

Envoyé par Engiwip

réfractaire au changement ? quelle drôle d'idée.

avec babel tu peux choisir la syntaxe que tu souhaites en entrée et le format JS en sortie que tu souhaites.

tu peux meme t'inventer un balisage ( jsx , tsx , h , <nouveau truc muche>...) pour plus de lisibilité .

---

Et c'est censé être une qualité le fait que tout le monde puisse faire sa tambouille comme il le souhaite ? :weird:

Génial pour faire du recrutement et assurer une cohérence au sein d'une équipe en effet...

Citation:

---

Envoyé par Sodium

Et c'est censé être une qualité le fait que tout le monde puisse faire sa tambouille comme il le souhaite ? :weird:

Génial pour faire du recrutement et assurer une cohérence au sein d'une équipe en effet...

---

Mais de quoi on parle au juste ? tu mélanges tout. Je te repond par rapport au fait que les dev JS soient réfractaires au changement...

Tu peux tout faire en language Go aussi tu aura un maximum de coherence , c'est bien simple ils ont tout enlevé. Mais c'est chiant à mourrir.

il y en a qui aime .

Vous êtes réfractaires au fait que JavaScript devienne un langage normal. Vous considérez que la manière dont JavaScript est mieux parce qu'il est mieux. Jamais vous ne vous posez la question de ce qui justifie le fait que JavaScript fonctionne comme il fonctionne.

Citation:

---

Envoyé par Loralina

Il faudrait essayer var à la place de const

---

Mais du coup, on perd l’avantage de const. On peut utiliser Object.defineProperty() sur window pour arriver au même effet, mais bon c’est moins clair :aie:
Le mieux serait de revoir le reste du code pour ne plus avoir besoin d’une variable globale.

Citation:

---

Envoyé par Sodium

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 !"

---

Sodium, ah c’est dommage, j’ai pas envie de te contredire, parce que ton avatar est un violon, et moi j’aime les violons ^^
:arrow: Pour réagir à « réfractaires au changement » : JavaScript est un ilôt de prototypes dans un océan de classes et c’est nous qui refusons le changement ?
:arrow: Pour réagir à « on veut que ça reste tordu » : pas moi. En fait personne, il me semble, n’aime développer avec un langage tordu. Je l’ai déjà dit dans mon post précédent mais j’ai envie de reformuler : la schyzophénie objet de JS est un choix commercial, pas un choix technique, et c’est ça qui fout la merde (passez-moi l’expression) depuis des décennies. Il aurait fallu choisir un seul paradigme au départ, classe ou prototype, l’un ou l’autre m’aurait convenu. En attendant, c’est grâce à JS que j’ai appris le modèle prototype et je ne regrette pas.

Citation:

---

Envoyé par Sodium

Si ton objectif n'est pas particulièrement de faire du JS tu as tout intérêt à apprendre les patterns communs à la majorité des langages plutôt qu'approfondir ses bizarreries.

---

Tu marques un point. Mais je tiens à préciser que les prototypes ne sont pas propres à JS : Brendan Eich s’est inspiré du langage Self, et ils sont également utilisés par Lua, un langage de script employé pour faire de l’automation ou du modding.

Citation:

---

Envoyé par Sodium

Et c'est censé être une qualité le fait que tout le monde puisse faire sa tambouille comme il le souhaite ? :weird:

---

Là je suis d’accord avec toi, JavaScript donne un choix qu’il ne devrait pas donner sur la façon de faire de l’objet.

Citation:

---

Envoyé par Sodium

Jamais vous ne vous posez la question de ce qui justifie le fait que JavaScript fonctionne comme il fonctionne.

---

Si, tous les jours. JavaScript est bourré de défauts à cause de son histoire, et on est nombreuses et nombreux à en avoir conscience. C’est pour ça que certaines et certains font le choix d’utiliser un transpileur de « sur-langages » plus ou moins proches, tels que Babel, TypeScript ou encore CoffeeScript.

Hello,

Je reviens vers vous aujourd'hui car après moult tentatives, je ne parviens toujours pas à replacer mes markers lorsque je passe mon code en class... :calim2:
Si quelqu'un pouvait m'aider à les placer svp.. je maitrise correctement le gestionnaire d'évènements mais il doit y avoir quelque chose que je fais de travers au moment d'ajouter les marqueurs.:weird:

J'ai pourtant réussi à passer le reste en class sans souci...

Merci beaucoup,
Je relink mon site actualisé et je vais passer en Class mon fichier Ajax :lol:: http://velocdwj.eu3.biz/

Bonjour,
je vois l’erreur suivante, 9 fois sur 10, quand je fais un rechargement sans cache de ton site :

Citation:

---

TypeError: this.map_ is null — markerclusterer.js:163:3

---

Ça ressemble fort à une histoire de chargements concurrents.

Deux choses sont à l’origine de ce problème :

• createMap.initMap est passé à Google Maps comme fonction de rappel ;
• la balise qui déclare le script Google Maps a les attributs async et defer, ce qui fait qu’il est chargé de manière asynchrone.

Une brève explication des trois modes de chargement des scripts :
:arrow: Sans attribut, par défaut, un script est synchrone. Pendant qu’il est chargé et interprété, l’analyse du code HTML interrompue. C’est dû au fait qu’il peut y avoir des document.write() dans le script qui rajouteraient du code HTML à analyser. Les scripts suivants ne sont pas chargés, et donc pas exécutés, car l’analyseur HTML ne les a pas encore découverts.

:arrow: Avec async, le code source du script est chargé en parallèle et l’anayse du code HTML continue. Dès que le script a fini de charger, l’analyse HTML est interrompue et le script est exécuté. S’il y a d’autres scripts dans la page, l’ordre d’exécution n’est pas garanti.

:arrow: Avec defer, le code source du script est chargé en parallèle et son exécution est mise en attente jusqu’à la fin de l’analyse HTML. Si plusieurs scripts ont l’attribut defer, ils sont exécutés dans l’ordre où ils apparaissent dans le code HTML. (S’ils sont injectés dynamiquement, je ne sais pas comment ça se passe.)

Dans la spec il y a un joli schéma qui résume tout ça.

Quand les deux attributs async et defer sont présents, c’est async qui a priorité, et defer est là pour les anciens navigateurs qui ne connaissent pas async.
Ça signifie que dans ton cas, le script Google Maps est chargé en mode « async », et donc il y a une probabilité pour que tes scripts à toi s’exécutent avant que l’API soit prête.

Tu as deux solutions :

1. supprimer les attributs async et defer ;
2. supprimer seulement async, et ajouter des defer sur tes scripts qui dépendent de Google Maps.

Citation:

---

Envoyé par Watilin

Bonjour,
je vois l’erreur suivante, 9 fois sur 10, quand je fais un rechargement sans cache de ton site :

Citation:

---

TypeError: this.map_ is null — markerclusterer.js:163:3

---

---

Etrange, je n'ai pas été confrontée à ce message d'erreur.. je n'ai pas de souci actuellement même au rechargement de mon côté, mais dès que j'essaie de réécrire mon code du fichier markers.js avec des class je m'en sors pas, ils n'apparaissent pas sur la map...

Je vais tout de même me pencher sur ce que tu viens de remonter comme souci, merci ;)

Je ne sais pas ce que tu as essayé, donc je vais faire des suppositions.

Actuellement, MarkerManager est un objet littéral (var MarkerManager = { … }) qui te sert de prototype : tu en crées des objets dérivés avec Object.create(). Plus précisément, tu ne crées qu’un seul objet de ce que j’ai pu voir.

Je suppose que ce qui te pose problème est la propriété markers. Lorsqu’on définit une classe, on ne peut pas spécifier de membres (autres que des méthodes). Il faut donc ruser et initialiser ces membres dans le constructeur.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

class MarkerManager { constructor() { this.markers = []; }   add(location) { // “hire” ? ... }   pushMarker() { ... } }

---

L’instanciation devient donc :

Code:

---

1 2 3 4 5 6 7 8

class MapCreator { ...   setMarker() { const manager = new MarkerManager(); ... } }

---

Une petite remarque à propos de l’argument location : c’est un nom de variable déjà utilisé en JS (window.location). C’est pourquoi j’ai indiqué “hire” en commentaire, car c’est une traduction anglaise qui pourrait convenir pour « location », dans le contexte d’une location de vélo.

Merci beaucoup de prendre le temps de me répondre et de m'apporter toutes ces précisions !

Je n'ai pas encore tout ajouté du code d'avant, mais déjà ce que j'ai fait ne fonctionne pas.
(J'ai modifié le fichier map.js comme tu me l'as indiqué)

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

class MarkerManager { constructor() { this.markers = []; this.position = location.position; this.title = location.name; this.icon = "images/biker_green.png"; }   add(hire) { let marker = new google.maps.Markers({ map: createMap.map, position: this.position, title : this.name, icon : { url: this.icon, scaledSize : new google.maps.Size(47, 47), }   }); this.markers.push(marker); }   couleurIcon() { if (location.available_bikes <= 0) { marker.icon = 'images/biker_red.png'; } else if (location.available_bikes < 3) { marker.icon = 'images/biker_orange.png'; } else { marker.icon = 'images/biker_green.png'; } }; };   let marker = new MarkerManager(); marker.add(hire); marker.couleurIcon();

---

Tu n’utilises plus MapCreator ?
Attention, dans le contexte global, hire n’est pas définie. La ligne marker.add(hire); devrait lever une erreur.

Plus difficile à déceler : tu n’as pas de location dans le contexte du constructeur, du coup c’est l’objet location global qui est utilisé, et il n’a pas de propriétés name ni position. Ces lignes ne lèveront pas d’erreur malheureusement.

Attention également, tu sembles confondre les noms de propriété name et title.

Citation:

---

Envoyé par Watilin

Tu n’utilises plus MapCreator ?

---

Citation:

---

Attention également, tu sembles confondre les noms de propriété name et title.

---

Oups, en effet, je n'avais pas fait attention..

Voilà les lignes d'erreur que j'ai à présent :
Pièce jointe 486427