Comment importer et exporter des classes javascript ES6

Question

Je suis novice en javascript et nodejs et j'utilise ce projet pour développer mes compétences et apprendre les nouvelles technologies. Actuellement, mon projet utilise plusieurs classes qui dépendent les unes des autres. Les fichiers de classe se trouvent dans des répertoires différents et j'essaie actuellement d'utiliser export et d'exiger des instructions pour permettre aux classes d'être référencées dans d'autres fichiers. J'utilise aussi browserify et watchify pour regrouper tous les fichiers ensemble, pour simplifier le tag de script html.

Voilà la mise en page du projet (JavaScript dossier)

-Base (Folder) 
--Game.js (Class) 
--Player.js (Class) 
--Ball.js (Class) 
-Helpers (Folder) 
--Draw.js (Class) 
--Helper.js (Class) 
-GameType (Folder) 
--Game1.js (Class) 

Les classes qui dépendent les uns des autres sont les suivantes. Le projet se charge avec dans un fichier app.js et nécessite le fichier game1. En ce moment, j'essaie de tester et de faire fonctionner toutes les exigences et les déclarations d'exportation. Actuellement avec dans le fichier app.js je suis capable de créer un objet game1 mais je suis incapable d'y accéder avec les variables et les méthodes. Je peux consigner la console l'objet et il a toutes les variables correctes et les méthodes, donc il crée l'objet game1 correctement, mais je ne peux pas accéder à une partie de celui-ci. Je ne suis pas sûr si j'utilise incorrectement les instructions require et export pour la notation de classe ES6, ou s'il y a un autre problème avec mon code. Est-ce que j'utilise correctement les déclarations de besoin et d'exportation?

Voici les extraits des classes et du fichier app.js. Certaines des méthodes dans quelques classes doivent être terminées, mais j'essaie d'ajouter dans la fonctionnalité require and export pour améliorer la navigation de mon code. J'espère que vous pourrez m'aider à trouver la solution à mon problème.

app.js

const Game1 = require('./GameType/game1.js'); 

window.onload = function(){ 
    console.log("Test Started"); 

    console.log(); 

    var canvasLocator = document.querySelector("#gameCanvas"); 
    var canvasContext = canvasLocator.getContext("2d"); 

    var game1 = new Game1(); 

    //Prints out the correct object in the console 
    console.log(game1); 

    game1.draw(); 
    //Returns an empty array of objects 
    //In my test is should return a draw obj 
} 

Game1.js

const Game = require('../Base/Game.js'); 
const Ball = require('../Base/Ball.js'); 
const Player = require('../Base/Player.js'); 

class Game1 extends Game{ 
    constructor(){ 
     super(); 
     this.ball = new Ball(400, 300); 
     this.player1 = new Player("User", 15, 275, "blue"); 
     this.player2 = new Player("AI", 775, 275, "blue"); 
     this.mouseYPos; 
    } 

    refresh(){ 
     //Needs to be implemented 
    } 


    draw(){ 
     console.log("Super Draw: " + this.ball); 
    } 


    moveEverything(){ 
     //Needs to be implemented 
    } 
} 

module.exports = Pong; 

Game.js fonctionne comme une interface et a aussi des variables nécessaires à tous les jeux

'use strict'; 

const Helper = require('../Helpers/Helper.js'); 
const Draw = require('../Helpers/Draw.js'); 

class Game{ 
    constructor(){ 
     this.interval; 
     this.started = false; 
     this.framesPerSecond = 30; 
     this.drawObj = new Draw(); 
     this.helper = new Helper(); 
    } 

    //Each game needs to implement 
    draw(){ 
     console.log("draw() not implemented in child class!"); 
    } 

    moveEverything(){ 
     console.log("moveEverything() not implemented in child class!"); 
    } 

    refresh(){ 
     console.log("refresh() not implemented in child class!"); 
    } 
}; 

module.exports = Game 

balle

const Helper = require('../Helpers/Helper.js') 

class Ball{ 
    constructor(x, y){ 
     this.ballX = x; 
     this.ballY = y; 
     this.ballSpeedX; 
     this.ballSpeedY; 
     this.ballSpeedXChange; 
     this.ballSpeedYChange; 
     this.helper = new Helper(); 
    } 

    move(x,y){ 
     this.ballX = this.ballX + x; 
     this.ballY = this.ballY + y; 
    } 

    increaseSpeed(speedX, speedY){ 
     this.ballSpeedX = this.ballSpeedX + speedX; 
     this.ballSpeedY = this.ballSpeedY + speedY; 
    } 

    reflectBall(player, drawObj){ 

    } 

    reflect(ptOfContact, paddleSpeed){ 

    } 

    setBallDifficulty(difficulty){ 
     switch(difficulty){ 
      case "Easy": 
       this.ballSpeedXChange = -1; 
       this.ballSpeedYChange = 1; 
       break; 
      case "Medium": 
       this.ballSpeedXChange = -1.5; 
       this.ballSpeedYChange = 1.5; 
       break;  
      case "Hard": 
       this.ballSpeedXChange = -2; 
       this.ballSpeedYChange = 2; 
       break; 
      default: 
       console.log("No difficulty Found"); 
     } 
    } 
} 

module.exports = Ball 

Joueur

const Helper = require('../Helpers/Helper.js'); 

class Player{ 
    constructor(input, x, y, color){ 
     //Boolean value for AI or Actual Player 
     this.inputType = this.inputType(input); 
     this.playerX = x; 
     this.playerY = y; 
     this.playerSpeed; 
     this.playerScore = 0; 
     this.paddleWidth = 10; 
     this.paddleHeight = 50; 
     this.color = color; 
     this.helper = new Helper(); 
    } 

    move(drawObj){ 
     //True: User Input 
     //False: AI Input 
     if(this.inputType){ 
      this.movePlayerInYDir(drawObj); 
     } 
     else{ 
      this.movePlayerAIInYDir(drawObj); 
     } 
    } 

    movePlayerInYDir(drawObj){ 
     let before = this.playerY; 
     this.playerY = this.helper.playerInput(drawObj); 
     this.playerSpeed = this.playerY - before; 
     if((this.playerY + this.paddleHeight) >= (drawObj.getBaseHeight())){ 
      this.playerY = (drawObj.getBaseHeight() - this.paddleHeight); 
     } 
    } 

    movePlayerAIInYDir(drawObj){ 
     this.playerSpeed = this.setBotDifficulty("Easy"); 
     this.playerY = this.playerY + this.playerSpeed; 
     if(this.playe2Y <= 0){ 
      //Hits Top 
      this.playerSpeed = (this.playerSpeed) * -1; 
     } 
     else if((this.playerY + this.paddleHeight) >= drawObj.getBaseHeight()){ 
      //Hits Bottom 
      this.playerSpeed = (this.playerSpeed) * -1; 
     } 
    } 

    setAIDifficulty(difficulty){ 
     switch(difficulty){ 
      case "Easy": 
       //TODO 
       break; 
      case "Medium": 
       //TODO 
       break; 
      case "Hard": 
       //TODO 
       break; 
      case "Practice": 
       //Unbeatable Mode 
       break; 
      default: 
       console.log("No difficulty Found"); 
     } 
    } 

    //Helper 
    inputType(type){ 
     //True: Real Input 
     //False: AI 
     switch(type){ 
      case "User": 
       return true; 
      case "AI": 
       return false; 
      default: 
       console.log("Type not recognized"); 
     } 
    } 

} 

module.exports = Player 

Aide

class Helper{ 
    constructor(){ 
     this.gameType; 
     this.canvasLocator = document.querySelector("#gameCanvas"); 
     this.canvasContext = this.canvasLocator.getContext("2d"); 
     this.mouseXPos; 
     this.mouseYPos; 
    } 

    getMouseYPos(canvas, evt) { 
     var rect = canvas.getBoundingClientRect(); 
     return (evt.clientY - rect.top); 

    } 

    playerInput(drawObj){ 
     let c = this.canvasLocator; 
     let helper = this; 
     //let game = this; 
     //let mouseYPos; 
     //console.log(game); 
     c.addEventListener("mousemove", function(evt){ 
              helper.mouseYPos = helper.getMouseYPos(c, evt);         
             } 
             , false); 
     //console.log(game.mouseYPos); 
     return helper.mouseYPos;  
    } 

    change(speed){ 
     //Ball Function for reflection 
     if(speed > 8 || speed < -8){ 
      return 2; 
     } 
     return (Math.abs(1/8 * speed) + 1); 
    } 

    randomIntNumber(min, max){ 
     min = Math.ceil(min); 
     max = Math.floor(max); 
     return Math.floor(Math.random() * (max - min)) + min; 
    } 

    randomSpeed(){ 
     if(this.randomIntNumber(0, 100) % 2 == 0){ 
      return this.randomIntNumber(-7, -9); 
     } 
     else{ 
      return this.randomIntNumber(7, 9); 
     } 
    } 

    randomNumber(min, max){ 
     return (Math.random() * (max - min)) + min; 
    } 
} 

module.exports = Helper 

Nous vous remercions de l'aide.

Answer 1

Pour commencer, vous avez demandé comment importer et exporter dans ES6. Avant d'aborder cela, il est important de noter que la syntaxe du module ES6 n'est pas la même chose que la manière dont Node.JS importe les modules. Vos exemples utilisent le chargement du module de style Node.JS Common.js.

En ES6 vous importez des modules comme si ...

import jquery from 'jquery'; 

ou si vous chargez quelque chose en dehors de votre dossier node_modules ...

import myClass from './path/to/where/the/file/is'; 

Les deux exemples que je viens de fournir sont comment vous chargeriez le fichier entier en tant que dépendance.

Maintenant, si vous voulez simplement importer une seule fonction, vous pouvez le faire avec ES6.

test.js

const myFunction =() => { alert("hello world") }; 
export { myFunction } 

Maintenant, vous pouvez importer tout maFonction comme si ...

import { myFunction } from './path/to/test.js'; 

Tout cela étant dit, une chose que vous devez garder à l'esprit est des navigateurs natifs Vous n'avez pas encore la possibilité d'importer des modules JavaScript. Donc, pour contourner ce problème, nous devons utiliser quelque chose comme Webpack pour fournir la possibilité d'importer et d'exporter des modules en utilisant ES6.

https://webpack.github.io/