#27: Erstellen eines einfachen jQuery-Plugins

Nachdem wir uns nun die Verwendung von jQuery-Plugins angesehen haben, ist es absolut lohnenswert zu verstehen, wie man sie auch erstellt. Wir haben bereits kurz darauf hingewiesen, dass Sie das native jQuery-Objekt erweitern können, wenn Sie möchten. Genau wie

$.myFunction = function() {
  console.log("I am a function on the jQuery object.");
};

// call it
$.myFunction();

Aber das ist an sich nicht besonders nützlich. Um eine neue Methode für jQuery zu erstellen, die Sie für eine Menge von Elementen aufrufen können, müssen Sie es so machen:

$.fn.myMethod = function() {
  // I'm a new method
});

Das ist exakt dasselbe wie die Verwendung von .prototype auf jQuery, und für Neugierige können Sie hier mehr darüber lesen. Wenn Sie es auf diese Weise tun, können wir diese neue Methode für eine Menge von Elementen verwenden. Wie zum Beispiel:

$("li").myMethod();

Sie können innerhalb dieser Methode alles tun, was Sie möchten, aber um ein guter Bürger beim Erstellen von jQuery-Plugins zu sein, sollten Sie die gleiche Menge von Elementen aus dem Plugin zurückgeben.

$.fn.myMethod = function() {
  // Do some stuff

  return this;
});

Auf diese Weise funktioniert es mit Chaining. Wenn Sie das nicht tun und jemand etwas wie Folgendes versucht:

$(“li”).myMethod().show();

Das würde fehlschlagen, weil .show() im Wesentlichen auf nichts aufgerufen würde. Oft sind jQuery-Plugins so gestaltet, dass sie über jedes Element iterieren, damit Sie direkten Zugriff auf jedes einzelne Element in der Menge haben, um damit zu tun, was Sie brauchen.

Eine weitere gute Vorgehensweise ist, ein Plugin in eine Immediately Invoked Function Expression (sofort aufgerufene Funktionsausdruck) zu packen und jQuery als Parameter zu übergeben. Auf diese Weise können Sie das $ innerhalb Ihres Plugin-Codes sicherer verwenden. Das liegt daran, dass in einigen Situationen die $ Kurzform für jQuery nicht verfügbar ist (z. B. wenn ein Benutzer jQuery im "Kompatibilitätsmodus" verwendet hat).

Mit beiden letzten beiden Punkten wird eine Plugin-Struktur zu

(function($) {
$.fn.myMethod = function() {
  return this.each(function() {
    // do things
  });
};
})(jQuery)

Im Screencast haben wir am Ende ein einfaches Plugin erstellt, um an das Ende jedes Elements einen Pfeil anzufügen.

Sehen Sie den Pen rwasH von Chris Coyier (@chriscoyier) auf CodePen

Natürlich kann es komplexer werden, wenn Ihr Ehrgeiz steigt, mehr zu tun.