javascript - 带有 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);

是否可以在原型(prototype)中而不是文档中的实例链接上添加事件？ (Event.observe(document, "evt: eventType", eventHandler);)

Answer 1

Prototype 的自定义事件是绑定(bind)的 DOM 事件，因此如果不以某种方式使用 DOM，就无法在类或实例上触发事件。也就是说，您可以使用 Prototype 的自定义事件将自定义事件添加到您的类中，而无需太多额外的工作。

几年前 Tobie Langel 分享了 a way of adding custom events to Prototype classes ;这种方法的缺点是这些事件是在类级别触发和观察的，这意味着由一个实例触发的事件会被所有观察该类的任何实例的监听器接收。

我对 Tobie 的方法做了一些简单的修改，允许单独观察实例。这里的技巧是使用围绕 Class.create 的闭包来为类的每个实例创建私有(private)事件命名空间。每次创建类的新实例时，计数器都会递增。

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