javascript - JavaScript事件问题

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

我想根据<input type="file" />元素中检索到的文件的内容绘制画布。我试图为此做一个基于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;
    }
};

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

};

如您所见，我有1个对象，即一个Canvas对象和FileOpener对象。我想用实例化的FileOpener对象更改实例化的Canvas对象。最好的方法是什么？

最佳答案

最好的选择是保持它们不耦合，并用Viewer将它们粘合在一起。也许FileOpener可以在需要更新Canvas时提供回调（例如事件），而Viewer可以传入该回调的处理程序并完成实际工作。我说过“回调”，但是它可以更多地是事件或Observer模型，因此一个FileOpener可以为需要更新Canvas的事件提供多个处理程序。