Plugin umschreiben

[molily]

Guten Abend!

Kann man denn nicht theoretisch die gleiche Funktion nochmal mit anderem Namen haben und mit anderen Optionen aufrufen und so umgehen, dass man die Funktion nicht zweimal mit verschiedenen Optionen aufrufen kann?

Es spricht eigentlich nichts dagegen, *eine* Funktion *mehrfach* mit unterschiedlichen Parametern aufzurufen. Das ist meistens der Sinn von wiederverwendbaren Funktionen.

Wenn du sowieso die Umsetzung ändern musst, sodass sie auf mehrere Optionen reagiert, dann kann das auch unter demselben Namen passieren. Wenn du die Funktion hinreichend flexibel schreibst, sodass alle sich ändernden Parameter in den Options übergeben werden, dann braucht es auch nur eine Funktion.

Ich dachte, dass die Inhalte der beiden Funktionen sich dann jeweils nichts anhaben können, es sei denn, die Variablen sind global.

Das ist richtig, die Variablen sind lokal. Aber sie greifen auf ein und dasselbe DOM zu, also auf dieselben Elemente, wenn sie nicht flexibel genug sind. Das ist hier der Fall für das besagte Plugin. Auszug:

$(this).prepend('<div id="sTrigger" …');  
$("#shareContainer").html('…');  
$("#sTrigger").click(function () {  
  $("#shareContainer").slideDown(300);  
  $(this).fadeOut(200);  
  $("#sClose").fadeIn(200)  
});

Hier wird also mit dokumentweit eindeutigen IDs gearbeitet.

Die ID-Selektoren wollte ich dann einfach durch class-Selektoren bei beiden Funktionen ersetzen.

Das ist schon ein guter Schritt!

Wichtig ist auch, dass sie im Kontext eines gewissen Elements arbeiten. Also nach Elementen mit einer bestimmten Klasse im Kontext des jeweiligen Elements suchen, auf das das Plugin angewendet wird.

Dazu ist die jQuery-Methode find hilfreich: http://api.jquery.com/find/

ausgangsElement.find('.eineKlasse')

(ausgangsElement ist hier ein jQuery-Objekt)

Es gibt verschiedene Tutorials, die diese Grundlagen für jQuery-Plugins beschreiben:
https://www.google.de/search?hl=de&q=writing+jquery+plugins

Abstraktes Beispiel:

<div id="a"><div class="foo"></div></div>  
<div id="c"><div class="foo"></div></div>  
<div id="c"><div class="foofoo"></div></div>

$.fn.meinPlugin = function(options) {  
  options = $.extend({ selector: 'foo' }, options);  
  this.each(function(index, element) {  
    $(element).find(options.selector).text(options.text);  
  });  
};  
  
$('#a').meinPlugin({ text: 'AAA' });  
$('#b').meinPlugin({ text: 'BBB' });  
$('#c').meinPlugin({ text: 'CCC', selector: 'foofoo' });

Hier kann ich das Plugin wiederverwenden und alle Parameter, die sich ändern können, in den Options übergeben.

Das Plugin macht nicht viel, es sucht ein Nachfahrenelement mit einer gewissen Klasse (standardmäßig »foo«) heraus und füllt es mit Inhalt. Aber so sind letztlich alle guten Plugins aufgebaut (hier natürlich sehr vereinfacht).

Mathias