javascript - 是否可以创建一个在js中创建特定Dom元素的模块？

Question

我有一个问题。是否可以在 Javascript 中创建一个实例化 Dom 元素的模块？例如，我有 Canvas 类。

class Canvas {

    constructor(width, height, context){
        this.width = width;
        this.height = height;
        this.context = context;
        this.setupCanvas();
    }

    setupCanvas(){
        console.log(this.width, this.height, this.context);
        let canvas = document.createElement('canvas');

        canvas.width = this.width;
        canvas.height = this.height;

        let context = canvas.getContext(this.context);
        context.fillStyle = 'red';

        return canvas;
    }
}

export default Canvas;

我对格式错误感到抱歉，但我不知道如何改进。 该模块导出整个类，之后，我想在一个文件中使用它，我们将其称为 index.js。在那里，我通过调用 import Canvas from './Canvas/canvas 导入模块。所以其余的代码看起来像

import Canvas from './Canvas/canvas';

let canvas = new Canvas(80, 80, '2d');
canvas.setupCanvas;
document.body.appendChild(canvas);

现在它不起作用，因为我收到错误:TypeError: Node.appendChild 的参数 1 ('node') 必须是 Node 的实例

Answer 1

您的代码有两个问题。首先，您的 Canvas 类不是 Canvas 节点，但具有用于创建 Canvas 的函数 setupCanvas。接下来，您的目标是调用 setupCanvas 两次:一次从构造函数调用，然后使用 canvas.setupCanvas; 调用。但请注意，canvas.setupCanvas; 没有执行任何操作，因为您缺少 ()。

您可以做的是首先从构造函数中删除 this.setupCanvas() ，然后在稍后调用它时使用 setupCanvas 的结果:

import Canvas from './Canvas/canvas';

let canvas = new Canvas(80, 80, '2d');
document.body.appendChild(canvas.setupCanvas());