Question

我目前在javascript中遇到问题。我将首先尝试解释我想要实现的目标。

我想根据<input type="file" />元素中检索到的文件内容绘制画布。我试图为此做一个基于OOP的设计。

我想创建一个可以执行此操作的小部件。

首先，我创建了我的widget类：

Dicom5.Rendering.Viewer = function(){
    var viewer = document.createElement('div','dicom5-rendering-viewer');

    var fileOpener = new Dicom5.Rendering.FileOpener();
    var canvas = new Dicom5.Rendering.Canvas();


    viewer.appendChild(fileOpener.render());
    viewer.appendChild(canvas.render());

    this.render = function(){
        return viewer;
    }
};

我还有以下两个课程FileOpener和Canvas

Dicom5.Rendering.Canvas = function(){

    var canvas;
    canvas = document.createElement('canvas');

    this.render = function(){
        return canvas;
    }
};

和fileOpener

Dicom5.Rendering.FileOpener = function(){


    var fileOpener = document.createElement('input');
    fileOpener.setAttribute('id','dicom5-rendering-fileopener');
    fileOpener.setAttribute('type','file');

    fileOpener.onchange = function(){
       **HERE !! I want to change my canvas object**
    }


    this.render = function(){
        return fileOpener;
    }

};

因为你可以看到我有一个对象，它有一个Canvas对象和一个FileOpener对象。我想用instanciated FileOpener对象更改实例化的Canvas对象。最好的方法是什么？

Answer 1

你最好的办法是让他们保持联合状态并将Viewer粘在一起。也许FileOpener可以在需要更新Canvas时提供回调（例如，事件），并且Viewer可以传入该回调的处理程序并执行实际工作。我说“回调”，但它可能更像是一个事件或Observer模型，因此一个FileOpener可能有多个处理程序用于需要更新Canvas的事件。

Javascript事件问题

1 个答案: