prototype.js가있는 클래스의 인스턴스에 대한 이벤트

Question

Mootools를 사용하면 클래스의 인스턴스에 eventListener를 추가 할 수 있습니다. 이처럼 :

var Widget = new Class({ 
    Implements: Events, 
    initialize: function(element){ 
    // ... 
    }, 
    complete: function(){ 
     this.fireEvent('complete'); 
    } 
}); 

var myWidget = new Widget(); 
myWidget.addEvent('complete', myFunction); 

인스턴스가 프로토 타입에 해당 링크 및 NOT 문서에 이벤트를 추가 할 수있는있는 posibility이 있습니까?

Answer 1

Prototype의 맞춤 이벤트는 DOM 이벤트와 연결되어 있으므로 DOM을 사용하지 않고 클래스 나 인스턴스에서 이벤트를 실행할 수있는 방법이 없습니다. (Event,. 즉, Prototype의 맞춤 이벤트를 사용하여 추가 작업없이 클래스에 맞춤 이벤트를 추가 할 수 있다고 말한 것입니다.

몇 년 전 Tobie Langel은 a way of adding custom events to Prototype classes을 공유했습니다. 이 접근법의 단점은 이러한 이벤트가 발생하여 클래스 수준에서 관찰된다는 것입니다. 즉, 한 인스턴스에서 시작된 이벤트가 해당 클래스의 모든 인스턴스를 관찰하는 모든 리스너를 포착 함을 의미합니다.

인스턴스를 개별적으로 관찰 할 수있는 Tobie의 접근 방식을 약간 수정했습니다. 여기의 트릭은 Class.create 주변의 클로저를 사용하여 클래스의 각 인스턴스에 대한 비공개 이벤트 네임 스페이스를 만드는 것입니다. 카운터의 새 인스턴스가 만들어 질 때마다 카운터가 증가합니다.

var Observable = Class.create({ 
    fire : function(eventName, data){ 
    document.fire(this._namespace + ':' + eventName, data); 
    }, 
    observe : function(eventName, callback){ 
    document.observe(this._namespace + ':' + eventName, callback); 
    }, 
    stopObserving : function(eventName, callback) { 
    // Probably wise to also implement this... 
    } 
}); 

var Widget = (function(){ 

    var namespace = 'widget', counter = 0; 

    return Class.create(Observable, { 
    initialize : function(){ 
     this._namespace = namespace + ':' + counter++; 
    }, 
    complete : function(){ 
     this.fire('complete'); 
    } 
    }); 

}()); 

var myWidget = new Widget(); 

myWidget.observe('complete', function(e){ 
    // Callback executed when 'complete' is fired on myWidget. 
});