如何导入和导出JavaScript ES6类 [英] How to import and export javascript ES6 classes
问题描述
我是javascript和nodejs的新手，并且我正在使用这个项目来发展自己的技能并学习新技术.目前，我的项目使用多个相互依赖的类.类文件位于不同的目录中，我目前正在尝试使用export和require语句以允许在其他文件中引用类.我还使用browserify和watchify将所有文件捆绑在一起，以简化html脚本标记.
I am new to javascript and nodejs and I'm using this project to develop my skill and learn the new technologies. Currently my project uses multiple classes that depend on one another. The class files are in different directories and I am currently trying to use export and require statements to allow classes to be referenced in other files. I am also using browserify and watchify to bundle all the files together, to simplify the html script tag.
这里的项目布局(JavaScript文件夹)
Here's Project Layout (JavaScript Folder)
-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语句，或者我的代码是否存在其他问题.我是否正确使用了需求和出口声明?
The project loads with in an app.js file, and requires the game1 file. At the moment I am trying to test and get all the require and export statements working. Currently with in the app.js file I am able to create a game1 object but I am unable to access the variables and methods with in it. I can console log the object and it has all the correct variables and methods, so it is creating the game1 object correctly, but I can't access any part of it. I am unsure if I am currently using the require and export statements incorrectly for the ES6 class notation, or if there is another problem with my code. Am I using the require and export statments correctly?
这是有关类和app.js文件的摘录.一些方法 在几个类中，需要完成一些工作，但是我试图添加require和export功能，以使我的代码更好地导航.希望您能帮助我找到解决问题的方法.
Here are the snippets on the classes and the app.js file. Some of the methods in a couple of the classes need to be finished, but I am trying to add in the require and export functionality to make the navigation of my code better. I hope you can help my find the solution to my problem.
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充当界面，还具有所有游戏必需的变量
Game.js works as an interface and also has variables necessary to all games
'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样式模块加载.
For starters you asked how to import and export in ES6. Before I address that, it's important to note that ES6 module syntax is not the same thing as how Node.JS imports modules. Your examples are using Node.JS Common.js style module loading.
在ES6中，您可以像这样导入模块...
In ES6 you import modules like so...
import jquery from 'jquery';
或者如果您正在加载node_modules文件夹之外的内容...
or if you are loading something outside of your node_modules folder...
import myClass from './path/to/where/the/file/is';
我刚刚提供的两个示例是如何将整个文件作为依赖项加载.
The two examples I just provided are how you would load the entire file as a dependency.
现在，如果您只想导入一个要使用的功能，则也可以使用ES6.
Now if you just wanted to import a single function for use you could do that with ES6 as well.
test.js
const myFunction = () => { alert("hello world") };
export { myFunction }
现在您可以像这样导入myFunction了...
Now you can import just myFunction like so...
import { myFunction } from './path/to/test.js';
所有这些都说明了，您需要牢记的一件事是本机浏览器尚不能导入JavaScript模块.因此，要解决此问题，我们需要使用Webpack之类的工具来提供使用ES6导入和导出模块的功能.
All of this said, one thing you need to keep in mind is native browsers do not have the ability to import JavaScript modules yet. So to get around this problem, we need to use something like Webpack to provide the ability to import and export modules using ES6.
这篇关于如何导入和导出JavaScript ES6类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
