Benutzerdefinierte Ereignisse sind ziemlich cool

Nehmen wir an, Sie arbeiten an einer Webanwendung in jQuery und sind damit beauftragt, ein Akkordeon zu schreiben, das den Bedürfnissen Ihrer Webanwendung entspricht. Sie beschließen, daraus ein Plugin zu machen. Auf diese Weise kann überall in dieser Anwendung, wo ein Akkordeon benötigt wird, dieses Plugin geladen und auf semantisches Markup angewendet werden, das bereit ist, ein Akkordeon zu werden. Dann ta-da, haben Sie ein schönes funktionierendes Akkordeon.

Nun verwendet ein anderer Entwickler Ihr Akkordeon und möchte in der Lage sein, Inhalte per Ajax in einen der Abschnitte des Akkordeons zu laden, aber nur, wenn dieser Abschnitt geöffnet wird. Gemeinsam beschließen Sie, dass Sie Ihren Code getrennt halten sollten. Die generische Funktionalität, wie ein Akkordeon funktioniert, sollte von Code getrennt sein, der für ein bestimmtes Akkordeon auf einer bestimmten Seite einer Anwendung spezifisch ist.

Callbacks, der traditionelle Weg

Ein möglicher Ansatz wäre, "Callbacks" in Ihr Plugin zu schreiben. Der andere Entwickler würde den Namen einer Funktion angeben, die ausgeführt werden soll, wenn bestimmte Aktionen auf diesem Akkordeon stattfinden. Das Aufrufen könnte dann so aussehen:

$(".accordion").accordion({
  panelOpen: myPanelOpenCallback,
  panelClose: myPanelCloseCallback;
});

Und sie hätten diese Callback-Funktionen selbst erstellt

function myPanelOpenCallback() {
  // Do Ajax stuff 
}

Dann würde das Plugin selbst diese Callbacks in seinen zugehörigen internen Funktionen berücksichtigen

$.fn.accordion = function(options) {
    
	return this.each(function(i, el) {

	  var base = el;
	  
	  base.init = function() {
	  	// Do initialization stuff
	  };
	  
	  base.openPanel = function(panel) {
	  	// Open panel
		
		// Do callback
		options.panelOpen.call();
	  };
	  
	  base.closePanel = function(panel) {
	  	// Open panel
		
		// Do callback
		options.panelClose.call();
	  };
	  
	  base.init();
	       
	});
  
};

Demo des Callback-Modells anzeigen

Benutzerdefinierte Ereignisse, ein besserer Weg

Nehmen wir nun an, ein dritter Entwickler wird hinzugezogen, und auch er möchte ein kleines Stück JavaScript schreiben, das auf das Öffnen eines Panels reagiert. Zur Veranschaulichung: In den Akkordeon-Panels befinden sich Einstellungen, und dieser Entwickler möchte diese Einstellungen jedes Mal speichern, wenn Schlüssel automatisch geöffnet oder geschlossen werden.

Nun befinden wir uns in einer interessanten Situation. Wir haben bereits unseren Callback für das Öffnen und Schließen von Akkordeon-Panels definiert. Im Callback-Modell müssen sich diese Entwickler also auf diesen Callback einigen und beide ihre Codes in diesem einen Callback ausführen. Das ist zwar keine große Sache, aber nun sind wir gezwungen, Code zu mischen, was vielleicht nicht ideal ist. Denken Sie daran, dass wir das Ganze mit der Trennung spezifischer Funktionalitäten begonnen haben.

Hier werden benutzerdefinierte Ereignisse super genial. Anstatt einen bestimmten Callback auszulösen, löst das Akkordeon-Funktionalitäts-Plugin ein benutzerdefiniertes Ereignis aus. Benutzerdefinierte Ereignisse sind wie jedes andere Ereignis (z. B. Klick), nur dass sie **nur** programmatisch deklariert und aufgerufen werden.

Zuerst sind die Callbacks weg, wir rufen das Akkordeon-Plugin einfach ohne sie auf

$(".accordion").accordion();

An der Stelle, an der wir zuvor die Callbacks aufgerufen haben, lösen wir nun unser benutzerdefiniertes Ereignis aus. Machen Sie sich im Grunde einen Namen, der Sinn ergibt (so wie Sie eine Funktion benennen).

// OUT
// options.panelOpen.call();

// IN
panel.trigger("panelOpen");

Nun können unsere anderen Entwickler ihre Dinge an dieses benutzerdefinierte Ereignis binden und ihr eigenes Ding machen.

$(".panel").on("panelOpen", function() {
   // Developer 1: do Ajax stuff
});

// Meanwhile, in another part of town...
$(".panel").on("panelOpen", function() {
   // Developer 2: do saving stuff
});

Hurra für Freiheit! Hurra für die Trennung von Funktionalitäten!

Meiner Meinung nach sind benutzerdefinierte Ereignisse rundum besser. Ich denke jedoch, dass sie etwas mehr Kommunikation erfordern. Wahrscheinlich müssen Sie irgendwo Kommentare verfassen, die erklären, welche benutzerdefinierten Ereignisse wann ausgelöst werden, und diese leicht auffindbar machen.

Demo des benutzerdefinierten Ereignismodells anzeigen

Weitere Informationen

Das dargestellte Szenario ist sehr einfach. Die folgenden beiden Artikel gehen viel tiefer auf benutzerdefinierte Ereignisse ein, einschließlich komplexerer Beispiele und weiterer Informationen zur Funktionsweise.

• Demystifying Custom Events in jQuery von Rebecca Murphey
• jQuery Special Events von Ben Alman