6

我需要从 CLASS 启动自定义事件。我知道用 DOM 对象和 jquery 来做这个，使用 triggerHandler，比如 $(object)..triggerHandler("inputChange", {param:X}); 问题是当我用一个类尝试这个时，像这样：

    var MyClass = (function(){

        var static_var = 1;

        var MyClass = function () {

            var privateVar;
            var privateFn = function(){ alert('Im private!'); };

            this.someProperty = 5;
            this.someFunction = function () {
                alert('Im public!');
            };
            this.say = function() {
                alert('Num ' + this.someProperty);
                $(this).triggerHandler("eventCustom");
            }
            this.alter = function() {
                this.someProperty ++;
            }
        };

        return MyClass;

    })();

    TheClass = new MyClass();

    $(TheClass).on('eventCustom', function() {
        alert('Event!');
    });

    TheClass.say();

这不会启动警告或错误，但事件侦听器不工作（或事件未调度）。我认为 jQuery 事件系统不适用于非 DOM 对象，对吗？

任何其他方式（我需要事件，而不是针对我的特定情况的回调）来启动事件？

非常感谢！

4

2 回答 2

8

由于您是从传统的 OOP 角度来处理它，因此您对 javascript 如何工作的理解是有限的。看看这个小提琴http://jsfiddle.net/9pCmh/ & 你会发现你实际上可以将函数作为变量传递给其他函数。javascript中没有类，只有可以模拟传统类的闭包函数：

var MyClass = (function(){

    var static_var = 1;

    var MyClass = function ( callback ) {

        var privateVar;
        var privateFn = function(){ alert('Im private!'); };

        this.someProperty = 5;
        this.someFunction = function () {
            alert('Im public!');
        };
        this.say = function() {
            alert('Num ' + this.someProperty);
            callback();
        }
        this.alter = function() {
            this.someProperty ++;
        }
    };

    return MyClass;

})();

TheClass = new MyClass(function() {
    alert('Event!');
});

TheClass.say();

或者，您可以在“类”中创建一个函数来配置回调/触发器，而不是将其传递给构造函数。

看看这个作为你进一步阅读这个概念的开始...... JavaScript 闭包是如何工作的？

编辑

为了安抚那些在这里寻找 eventQueue 的批评者是一个更新的 jsfiddle :)

http://jsfiddle.net/Qxtnd/9/

var events = new function() {
  var _triggers = {};

  this.on = function(event,callback) {
      if(!_triggers[event])
          _triggers[event] = [];
      _triggers[event].push( callback );
    }

  this.triggerHandler = function(event,params) {
      if( _triggers[event] ) {
          for( i in _triggers[event] )
              _triggers[event][i](params);
      }
  }
};

var MyClass = (function(){

      var MyClass = function () {

          this.say = function() {
              alert('Num ' + this.someProperty);
              events.triggerHandler('eventCustom');
          }
      };

      return MyClass;

  })();

  TheClass = new MyClass();

  events.on('eventCustom', function() {
      alert('Event!');
  });
  events.on('eventCustom', function() {
      alert('Another Event!');
  });

  TheClass.say();
于 2013-06-18T09:50:27.340 回答
7

我现在用不到 100 行代码编写了一个 ES6 事件类，而没有使用 JQuery。如果你不想使用 DOM 事件，你可以扩展你的类，它应该处理事件。

对于监听事件，您可以使用on, once, onReady, onceReady。On 是每次触发标签时执行回调函数。一次只有一次。如果标签之前已经被触发，“就绪”函数会执行回调。

要触发事件，请使用触发器。要删除事件处理程序，请使用 off。

我希望这个例子说明清楚：

class ClassEventsES6 {
                constructor() {
                    this.listeners = new Map();
                    this.onceListeners = new Map();
                    this.triggerdLabels = new Map();
                }

                // help-function for onReady and onceReady
                // the callbackfunction will execute, 
                // if the label has already been triggerd with the last called parameters
                _fCheckPast(label, callback) {
                    if (this.triggerdLabels.has(label)) {
                        callback(this.triggerdLabels.get(label));
                        return true;
                    } else {
                        return false;
                    }
                }

                // execute the callback everytime the label is trigger
                on(label, callback, checkPast = false) {
                    this.listeners.has(label) || this.listeners.set(label, []);
                    this.listeners.get(label).push(callback);
                    if (checkPast)
                        this._fCheckPast(label, callback);
                }

                // execute the callback everytime the label is trigger
                // check if the label had been already called 
                // and if so excute the callback immediately
                onReady(label, callback) {
                    this.on(label, callback, true);
                }

                // execute the callback onetime the label is trigger
                once(label, callback, checkPast = false) {
                    this.onceListeners.has(label) || this.onceListeners.set(label, []);
                    if (!(checkPast && this._fCheckPast(label, callback))) {
                        // label wurde nocht nicht aufgerufen und 
                        // der callback in _fCheckPast nicht ausgeführt
                        this.onceListeners.get(label).push(callback);
                }
                }
                // execute the callback onetime the label is trigger
                // or execute the callback if the label had been called already
                onceReady(label, callback) {
                    this.once(label, callback, true);
                }

                // remove the callback for a label
                off(label, callback = true) {
                    if (callback === true) {
                        // remove listeners for all callbackfunctions
                        this.listeners.delete(label);
                        this.onceListeners.delete(label);
                    } else {
                        // remove listeners only with match callbackfunctions
                        let _off = (inListener) => {
                            let listeners = inListener.get(label);
                            if (listeners) {
                                inListener.set(label, listeners.filter((value) => !(value === callback)));
                            }
                        };
                        _off(this.listeners);
                        _off(this.onceListeners);
                }
                }

                // trigger the event with the label 
                trigger(label, ...args) {
                    let res = false;
                    this.triggerdLabels.set(label, ...args); // save all triggerd labels for onready and onceready
                    let _trigger = (inListener, label, ...args) => {
                        let listeners = inListener.get(label);
                        if (listeners && listeners.length) {
                            listeners.forEach((listener) => {
                                listener(...args);
                            });
                            res = true;
                        }
                    };
                    _trigger(this.onceListeners, label, ...args);
                    _trigger(this.listeners, label, ...args);
                    this.onceListeners.delete(label); // callback for once executed, so delete it.
                    return res;
                }
            }
            
// +++ here starts the example +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
class TestClassEvents extends ClassEventsES6 {
     constructor() {
        super();
        this.once('sayHallo', this.fStartToTalk);
        this.on('sayHallo', this.fSayHallo);
     }

     fStartToTalk() {
         console.log('I start to talk... ');
     }

     fSayHallo(name = 'Nobody') {
        console.log('Hallo ' + name);
     }
}

let testClassEvents = new TestClassEvents();

testClassEvents.trigger('sayHallo', 'Tony');
testClassEvents.trigger('sayHallo', 'Tim');

testClassEvents.onReady('sayHallo', e => console.log('I already said hello to ' + e));
testClassEvents.trigger('sayHallo', 'Angie');
testClassEvents.off('sayHallo');
testClassEvents.trigger('sayHallo', 'Peter');
console.log('I dont say hallo to Peter, because the event is off!')

于 2019-06-15T17:44:12.790 回答