jQuery Plugins – Einleitung

Vor einigen Wochen habe ich damit begonnen, mich mit Plugins für jQuery zu beschäftigen. Ich war überrascht, wie einfach das geht. Es gibt nur ein paar Dinge, die man beachten sollte, damit das Plugin in der Benutzung auch möglichst komfortabel ist. Nur weil man selbst eher die Finger vom “Chaining” lässt, muss das nicht heißen, das andere Entwickler das auch tun. Ein weiterer Punkt, den man schnell vergisst, ist die Verwendung von “$” bzw. eben nicht die Verwendung von “$”. Will man mehrere Frameworks nebeneinander nutzen, gibt es die Möglichkeit jQuery in einem NoConflict Modus zu betreiben. Dadurch wird jQuery das “$” nicht mehr verwenden und es kann von einem anderen Framework benutzt werden!

Man sollte also bei einem Plugin an folgende beiden Dinge denken:

• Chaining
• NoConflict-Mode

Wie geht man nun mit diesem beiden Probleme um? Vorab: Für beides gibt es eine sehr einfache und schnelle Lösung.

Das Chaining wird ermöglicht, indem man in seinem Plugin immer “this” als Rückgabewert definiert. “This” ist in einem Plugin immer das jQuery Object, über das die Funktion gestartet wurde. Es reicht also ein einfaches

return this;

Am Ende einer Funktion in deinem Plugin, und das Chaining funktioniert.

Den NoConflict Modus wird man selten brauchen, trotzdem sollte man auf ihn vorbereitet sein. Man hat nun 2 Möglichkeiten:

1. Man verzichtet in seinem Plugin komplett auf das “$” und verwendet stattdessen “jQuery”.
2. Man verwendet eine Closure und kann “$” wie gewohnt benutzen.

Ich würde persönlich die 2.Lösung immer bevorzugen. Man muss sich halt nicht umgewöhnen und macht so weiter wie bisher. Trotzdem hier jeweils ein Beispiel für beide Lösungen:

// Verwenden einer Closure
(function($) {
  // Normaler jQuery Code, mit "$"
  $.fn.myPlugin = function() {
    return this; // enable Chaining
  }
})(jQuery);

// Verwenden von jQuery
jQuery.fn.myPlugin = function() {
  jQuery("body").append(this);
  return this; // enable Chaining
}

Der Nachteil einer Closure ist, das man auf die Verwendung von anderen Frameworks verzichten muss, oder es dabei zu Problemen kommen kann.

Am besten schreibt man das Plugin in eine separate Javascript Datei und benennt es sinnvoll um. Dadurch ist es leichter einen Überblick zu behalten, wenn man mehrere Plugins entwickelt. Beim einbinden in die HTML Datei muss man natürlich beachten, das die jQuery Datei vor dem Plugin geladen wird. Ansonsten knallt’s

Hoffentlich konnte ich euch hiermit ein wenig helfen