如何导入和导出JavaScript ES6类
我是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文件。 目前我正在尝试testing并获取所有需求和导出声明的工作。 目前在app.js文件中，我可以创build一个game1对象，但是我无法访问其中的variables和方法。 我可以通过控制台logging对象，它具有所有正确的variables和方法，所以它正确地创build了game1对象，但是我无法访问它的任何部分。 我不确定当前是否正确使用ES6类表示法中的require和export语句，或者如果我的代码存在其他问题。 我是否正确使用需求和导出报告？
这里是类和app.js文件的片段。 一些类中的一些方法需要完成，但是我正在尝试添加require和exportfunction来更好地导航我的代码。 我希望你能帮我find解决我的问题的方法。
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作为一个界面，也有所有游戏所必需的variables
'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
感谢您的帮助。
对于初学者，你问了如何在ES6中导入和导出。 在解决这个问题之前，需要注意的是，ES6模块语法与Node.JS如何导入模块不同。 你的例子正在使用Node.JS Common.js样式模块加载。
在ES6中，您可以导入像这样的模块。
import jquery from 'jquery';
或者如果你正在加载你的node_modules文件夹之外的东西…
import myClass from './path/to/where/the/file/is';
我刚刚提供的两个示例是如何将整个文件作为依赖项加载的。
现在，如果你只是想导入一个function，你也可以用ES6来完成。
test.js
const myFunction = () => { alert("hello world") }; export { myFunction }
现在，您可以像这样导入myFunction …
import { myFunction } from './path/to/test.js';
所有这一切说，有一点你需要记住的是本机浏览器还没有能力导入JavaScript模块。 所以为了解决这个问题，我们需要使用类似Webpack的东西来提供使用ES6导入和导出模块的能力。