javascript - 如何导入和导出 javascript ES6 类

Question

我是 javascript 和 nodejs 的新手，我正在使用这个项目来发展我的技能和学习新技术。目前我的项目使用多个相互依赖的类。类文件位于不同的目录中，我目前正在尝试使用 export 和 require 语句来允许在其他文件中引用类。我还使用 browserify 和 watchify 将所有文件捆绑在一起，以简化 html 脚本标签。

这是项目布局(JavaScript 文件夹)

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

相互依赖的类如下。

Game is Dependent on 
--Draw.js
--Helper.js
Player and Ball are Dependent on 
--Helper.js
Game1
--Game.js
--Ball.js
--Player.js

该项目在 app.js 文件中加载，并且需要 game1 文件。目前我正在尝试测试并使所有 require 和 export 语句正常工作。目前在 app.js 文件中，我可以创建一个 game1 对象，但我无法访问其中的变量和方法。我可以控制台记录该对象，它具有所有正确的变量和方法，因此它正确地创建了 game1 对象，但我无法访问它的任何部分。我不确定我目前是否错误地使用了 ES6 类表示法的 require 和 export 语句，或者我的代码是否存在其他问题。我是否正确使用了 require 和 export 语句？

以下是类和 app.js 文件的片段。一些方法在几个类中需要完成，但我正在尝试添加要求和导出功能以使我的代码导航更好。我希望你能帮助我找到问题的解决方案。

应用程序.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 
}

游戏1.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 作为一个接口(interface)，也有所有游戏所必需的变量

'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

球

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

播放器

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

助手

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

谢谢你的帮助。

Answer 1

对于初学者，您询问了如何在 ES6 中导入和导出。在我解决这个问题之前，重要的是要注意 ES6 模块语法与 Node.JS 导入模块的方式不同。您的示例使用 Node.JS Common.js 样式的模块加载。

在 ES6 中，你可以像这样导入模块......

import jquery from 'jquery';

或者如果你正在加载 node_modules 文件夹之外的东西......

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

我刚刚提供的两个示例是如何将整个文件加载为依赖项。

现在，如果您只想导入一个函数供使用，您也可以使用 ES6 来实现。

test.js

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

现在您可以像这样只导入 myFunction...

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

综上所述，您需要记住的一件事是 native 浏览器尚不具备导入 JavaScript 模块的能力。所以为了解决这个问题，我们需要使用像 Webpack 这样的东西来提供使用 ES6 导入和导出模块的能力。

https://webpack.github.io/