Как импортировать и экспортировать классы javascript ES6
Я новичок в javascript и nodejs, и я использую этот проект для развития своих навыков и изучения новых технологий. В настоящее время мой проект использует несколько классов, которые зависят друг от друга. Файлы классов находятся в разных каталогах, и в настоящее время я пытаюсь использовать экспорт и требовать операторов, позволяющих ссылаться на классы в других файлах. Я также использую 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, но я не могу получить доступ к какой-либо его части. Я не уверен, что я в настоящее время неправильно использую операторы require и export для обозначения класса ES6, или есть другая проблема с моим кодом. Правильно ли я использую статистику запрашивания и экспорта?
Вот фрагменты классов и файл app.js. Некоторые из методов в нескольких классах должны быть завершены, но я пытаюсь добавить функциональность require и export для улучшения навигации по моему коду. Я надеюсь, что вы можете помочь мне найти решение моей проблемы.
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 работает как интерфейс, а также содержит переменные, необходимые для всех игр
'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
Спасибо вам за помощь.
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';
Все это говорит о том, что нужно иметь в виду, что нативные браузеры пока не имеют возможности импортировать модули JavaScript. Таким образом, чтобы обойти эту проблему, нам нужно использовать что-то вроде Webpack, чтобы обеспечить возможность импорта и экспорта модулей с использованием ES6.