Javascript 事件文件检索

Question

我目前在使用 Javascript 时遇到事件问题。我将首先尝试解释我想要实现的目标。

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

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

首先，我创建了我的小部件类:

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

和文件打开器

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目的。我想用实例化的 FileOpener 更改实例化的 Canvas 对象目的。执行此操作的最佳方法是什么？

Answer 1

最好的办法是让它们不耦合，并让 Viewer 将它们粘合在一起。也许 FileOpener 可以在需要更新 Canvas 时提供回调(例如，事件)，而 Viewer 可以为此传入一个处理程序回调并做实际工作。我说的是“回调”，但它可能更像是一个事件或 Observer 模型，因此一个 FileOpener 可能有多个处理程序来处理需要更新 Canvas 的事件。