Bonjour,

Comme l'intitulé du sujet l'indique j'ai un problème au niveau de l'appel de ma classe dans un fichier différent contenant un main dans ce cas-ci.

voila mon code pour la classe contenu dans un fichier Vaisseau.js:

// Classe représentant le vaisseau 
class Vaisseau{

    // Constructeur
    constructor(img){
        
        if((window.innerWidth/2)-460<0){
            this.posX=40;
        }
        else{
            this.posX = ((window.innerWidth)/2)-460;    
        }
        
        this.posY = 200;
        
        // A compléter
    }
    

    get posY(){
        return this._posY;
    }

    set posY(value){
        this._posY = value;
    }

    get posX(){
        return this._posX;
    }

    set posX(value){
        this._posX = value;
    }

    // Initialise le vaisseau dans le html
    initHtml(){
        var vaisseau = document.getElementById('vaisseau');
        vaisseau.src = this.img;
        vaisseau.style.position = "absolute";
        vaisseau.style.top = this.posY+"px";
        vaisseau.style.left = this.posX+"px";
    }
    
    toLocaleString(){
        return 'voici mon vaisseau'; //méthode pour tester si l'appel de ma classe s'est bien dérouler
    }
}

et dans mon fichier main.js:

import "/Vaisseau.js";

let instance = require("Vaisseau");
console.log(instance.toLocaleString());

cela cause une erreur.. Merci d'avance pour les conseils.

 ps: Ce serait nickel un exemple concret.. se basant sur le code.

Tu utilises un module bundler ou autre chose avec ça ?

Quoiqu'il en soit ton code a peu de chance de marcher, tu n'exportes pas la classe vaisseau, et le mix import et require dans le main est pour le moins étrange.

Fichier Vaisseau.js :

// Classe représentant le vaisseau
export default class Vaisseau{
  ...
}

Fichier main.js (au même niveau que Vaisseau.js on va dire) :

import Vaisseau from "./Vaisseau.js";

let instance = new Vaisseau(); // enfin il faudrait passer une variable img d'après ta classe mais je fais simple.
console.log(instance.toLocaleString());

Plus d'infos ici :

https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Instructions/import

EDIT : si tu n'utilises aucun module bundler et balance ça directement au navigateur, cela risque de ne pas fonctionner selon le navigateur.

Quoiqu'il en soit, si tu veux vraiment la jouer comme ça, il faut écrire ceci dans ton fichier html lorsque tu références le main.js :

<script type=module src=main.js></script>

Tu dois aussi avoir un serveur, sinon tu auras des soucis de CORS.

-
Edité par SpaceIn 19 avril 2018 à 10:27:15

ok merci pour les conseils mais j'ai réglé le soucis. Je devais juste inclure mes deux fichier javascript (Vaisseau.js et main.js dans le bonne ordre) dans mon fichier html et instancier mon objet comme d'habitude et voila.. Pas besoin d'import.

Bonne continuation.

-
Edité par ElsonGesteur 22 avril 2018 à 17:02:44