자바 스크립트 이벤트 문제

Question

현재 자바 스크립트의 이벤트에 문제가 있습니다. 나는 먼저 내가 성취하려는 것을 설명하려고 노력할 것이다.

<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 obje이다. ct 및 FileOpener 개체가 있습니다. instanciated FileOpener 객체로 인스턴스화 된 Canvas 객체를 변경하려고합니다. 이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

Answer 1

가장 좋은 방법은 결합되지 않은 상태로 유지하고 Viewer을 서로 붙이는 것입니다. 아마도 FileOpener은 Canvas을 업데이트해야 할 때 콜백 (예 : 이벤트)을 제공하고 Viewer은 해당 콜백에 대한 처리기를 전달하여 실제 작업을 수행 할 수 있습니다. "콜백"이라고 말했지만 이벤트 또는 Observer 모델 일 수 있으므로 FileOpener 중 하나는 Canvas을 업데이트해야하는 이벤트에 대해 여러 개의 처리기를 가질 수 있습니다.