如何使JavaScript类可移植到任何项目

Question

我有这段代码，我总是必须在文档的开头创建与类中使用的名称相同的const ctx，我想知道是否有办法使这个类更适合其他项目

const canvas = document.getElementById('canvas1');
const ctx = canvas.getContext('2d');
class layer{
constructor(image, speedModifier){
this.x = 0;
this.y = 0;
this.width = 2400;
this.height = 700;
//this.x2 = this.width;
this.image = image;
this.speedModifier = speedModifier;
this.speed = gameSpeed * this.speedModifier
}
update(){
this.speed = gameSpeed * this.speedModifier;
this.x = gameFrame * this.speed % this.width;
}
draw(){
ctx.drawImage(this.image, this.x, this.y, this.width, this.height);
ctx.drawImage(this.image, this.x + this.width, this.y, this.width, this.height);
}
}

Answer 1

只要导出你的类，并让你的类在构造函数中接受一个上下文。

export class Layer {
constructor(image, speedModifier, context) {
this.context = context;
this.x = 0;
this.y = 0;
this.width = 2400;
this.height = 700;
this.image = image;
this.speedModifier = speedModifier;
this.speed = gameSpeed * this.speedModifier
}
draw(){
this.context.drawImage(this.image, this.x, this.y, this.width, this.height);
this.context.drawImage(this.image, this.x + this.width, this.y, this.width, this.height);
}
}

现在任何使用你的类的人都可以导入它了:

import { Layer } from './layer.js';

类的用户必须获得画布上下文。然而，他们可以得到它一次，并把它传递给他们想要的许多层:

const context = document.querySelector('canvas').getContext('2d');
const layer1 = new Layer(someImage, 1, context);
const layer2 = new Layer(anotherImage, 1, context);
const layer3 = new Layer(thirdImage, 2, context);

除此之外你什么也做不了。