我目前在使用 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 对象目的。执行此操作的最佳方法是什么?
最佳答案
最好的办法是让它们不耦合,并让 Viewer
将它们粘合在一起。也许 FileOpener
可以在需要更新 Canvas
时提供回调(例如,事件),而 Viewer
可以为此传入一个处理程序回调并做实际工作。我说的是“回调”,但它可能更像是一个事件或 Observer
模型,因此一个 FileOpener
可能有多个处理程序来处理需要更新 Canvas 的事件
。
关于Javascript 事件文件检索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4989958/