CLASS 中的自定义事件 [英] Custom Events in CLASS

问题描述

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

I need to launch custom events from CLASS. I know to do this with DOM objects and jquery, using triggerHandler, like $(object)..triggerHandler("inputChange", {param:X}); The problem is when i try this with a Class, like this:

    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 对象，对吗?

This doesn't launch warnings or errors, but the events listener is not working (or event is not dispatched). I think the jQuery event system doesn't work with not DOM object, correct?

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

Any other way (I need events, not callbacks for my specific case) to launch the events?

非常感谢！

推荐答案

您对 javascript 工作原理的理解是有限的，因为您是从传统的 OOP 角度来理解它的.看看这个小提琴 http://jsfiddle.net/9pCmh/ &您将看到您实际上可以将函数作为变量传递给其他函数.JavaScript 中没有类，只有可以作为闭包的函数，可以模拟传统类:

Your understanding of how javascript works is limited since you are approaching it from a traditional OOP point of view. Take a look at this fiddle http://jsfiddle.net/9pCmh/ & you will see that you can actually pass functions as variables to other functions. There are no classes in javascript, only functions which can be closures which can be made to emulate traditional classes:

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();

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

Alternatively you could create a function in your "class" to configure the callback/trigger instead of passing it into the constructor.

看看这个作为你进一步阅读这个概念的开始... 如何JavaScript 闭包有效吗?

Have a look at this as a start for your further reading on this concept... How do JavaScript closures work?

编辑

为了安抚那些寻找 eventQueue 的评论家，这里更新了 jsfiddle :)

To appease those critics looking for an eventQueue here is an updated 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();

这篇关于CLASS 中的自定义事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！