如何使 JavaScript class 可用于任何项目

Question

I have this code and I always have to creat the const ctx at begin of document with same name used in the class, and I wonder if have way make this class more portable for others project

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

Just export your class and make your class take in a context in the constructor.

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);
  }
}

Now anyone who uses your class can import it:

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

And the user of the class has to get the canvas context. However they can then get that once and pass it in to as many layers as they want:

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);

Nothing more you can really do beyond that.