Javascript Module Pattern Events und Listener

Ich bin der Implementierung des module-Muster, und würde gerne wissen, der beste/bevorzugte Methode zum definieren und registrieren Sie Ereignis-Listener/handlers. Das folgende funktioniert, aber vielleicht gibt es eine bessere/einfachere Möglichkeit...

var  MODULE = function() {

    // private
    var _field1;
    var _field2;

    function  localFunc(p) {
        alert('localFunc');
    }

    // public
    return {
        //properties
        prop1: _field1,

        //events
        myEvent1Handler: {},
        myEvent1: function() {myEvent1Handler();},
        myEvent2Handler: {},
        myEvent2: function() {myEvent2Handler();},

        addListener: function  (event,func) {
            if (event  ==  "myEvent1")
                myEvent1Handler = func;   

            if (event  ==  "myEvent2")
                myEvent2Handler = func;      
        },

        //public  methods
        method1: function (p) {
            alert('method1 says:' + p);
            MODULE.myEvent1();
        },
        method2: function  (p) {
             alert('method2 doing  stuff');
             localFunc(p);
            MODULE.myEvent2();
        }

    };
}();

//register for events
MODULE.addListener("myEvent1",function(){alert('fired1');});  
MODULE.addListener("myEvent2",function(){alert('fired2');});  

//use module (only event1 should fire!)
MODULE.method1("hello");

Probieren Sie es aus:

http://jsfiddle.net/RqusH/3/

Scheint wie eine Menge Arbeit zu haben myEventx, myEventHandlerx, und addListener?

Wenn Sie anrufen addListener(), ist nicht, dass die Schaffung myEvent1Handler oder myEvent2Handler als Globale Variablen verweisen auf die func parameter übergeben? Es wird nicht die Einstellung der Eigenschaften mit dem gleichen Namen bereits definiert in Ihrem Objekt, es sei denn, Sie sagen this.myEvent1Handler = ... - und dann this.myEvent1Handler() in Ihrem myEvent1 Funktion. (Oder MODULE.myEvent1Handler wie Sie MODULE.myEvent1() im method1.)
Was für ein problem du eigentlich zu lösen versucht? Dies scheint wie eine Menge Aufwand, der nicht wirklich etwas tun, aber stellen Sie ein Gerüst. Vielleicht, wenn wir wüssten, was Sie eigentlich erreichen wollen, wir könnten Ihnen helfen, den besten Weg finden, das zu tun.
Danke... ich will die Vielseitigkeit in-MODUL, so dass ein Benutzer des MODULS können die Haken in die Ereignisse. MODUL Methoden die async-requests (mit jquery), so will ich, um Ereignisse zu deuten, wenn ein async-request abgeschlossen ist.

InformationsquelleAutor Zim | 2011-11-11

javascript module-pattern

Normalerweise würde ich nicht reagieren, um eine architektonische Frage, die mit einer bestimmten Implementierung (vor allem ein abhängig von einem 3rd-party-Bibliothek wie jQuery), aber da meine Implementierung fördert die Wiederverwendbarkeit und wir sprechen Muster hier — ich werde zu einem kleinen jQuery-plugin, $.eventable, das erweitert den JavaScript-Objekte mit jQuery-event-Methoden.

Diesem plugin können Sie implementieren event-handling-Funktion auf jedem Objekt (oder Instanz der Klasse) mit einem einfachen Aufruf.

jQuery.eventable = function (obj) {
  //Allow use of Function.prototype for shorthanding the augmentation of classes
  obj = jQuery.isFunction(obj) ? obj.prototype : obj;
  //Augment the object (or prototype) with eventable methods
  return $.extend(obj, jQuery.eventable.prototype);
};

jQuery.eventable.prototype = {

  //The trigger event must be augmented separately because it requires a
  //new Event to prevent unexpected triggering of a method (and possibly
  //infinite recursion) when the event type matches the method name
  trigger: function (type, data) {
    var event = new jQuery.Event(type); 
    event.preventDefault();                
    jQuery.event.trigger(event, data, this);
    return this;
  }
};

//Augment the object with jQuery's event methods
jQuery.each(['bind', 'one', 'unbind', 'on', 'off'], function (i, method) {
  jQuery.eventable.prototype[method] = function (type, data, fn) {
    jQuery(this)[method](type, data, fn);
    return this;
  };
});

Wenn Sie das snippet implementieren Sie Ihre Lösung wie diese:

var MODULE = function() {

  // private
  var _field1;
  var _field2;

  function localFunc(p) {
    alert('localFunc');
  }

  // public
  return $.eventable({

    //properties
    prop1: _field1,

    //public  methods
    method1: function(p) {
      alert('method1 says:' + p);
      this.trigger('myEvent1');
    },

    method2: function(p) {
      alert('method2 doing  stuff');
      localFunc(p);
      this.trigger('myEvent2');
    }

  });
} ();

//register for events
MODULE.on("myEvent1", function() {
  alert('fired1');
});
MODULE.on("myEvent2", function() {
  alert('fired2');
});

//use module (only event1 should fire!)
MODULE.method1("hello");

Dein MODUL hat nun die folgenden aufrufbaren Methoden:

MODULE.on(event, /* data, */ handler);
MODULE.bind(event, /* data, */ handler);
MODULE.one(event, /* data ,*/ handler);
MODULE.off(event, handler);
MODULE.unbind(event, handler);
MODULE.trigger(event /*, data */);

Dem event ist eine durch Leerzeichen getrennte Liste der Ereignisse, handler ist Ihr Rückruf und Daten ist ein optional zu übergebenden Wert auf Ihre Rückrufe.

Finden Sie in die jQuery-Dokumentation für mehr details.

Dies ist hervorragend und entspricht dem Muster Neige ich zum perfekt. Danke! Ich werde durch diese sehr gezielt...

InformationsquelleAutor furf

4

Den sprechenden Modul-Muster hat Sie Rückgabe einem anonymen Objekt. Wenn Sie stattdessen deklarieren Sie ihn als variable und gibt es zurück, es bedeutet, Sie können mit der standard-jQuery-event-Methoden ziemlich einfach, sowohl innerhalb der module, die für das auslösen von Ereignissen und extern, auf Sie zu reagieren. Beachten Sie, dass Sie haben, um Sie in ein jQuery-Objekt vorher.
```
var controller = (function()
{
  function doAThing()
  {
    //Things getting done here
    $(interface).trigger("complete");
  }

  var interface = {
    doAThing: doAThing
  };
  return interface;
})();

$(controller).on("complete", function() { console.log("Thing Done"); });
controller.doAThing();
```
- Versuchen Sie nicht, verwenden Sie den Variablennamen Schnittstelle du, es ist für die zukünftige Verwendung reserviert.
InformationsquelleAutor tig

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.