Nachdem wir uns nun mit der Verwendung von jQuery-Plugins befasst haben, lohnt es sich unbedingt zu verstehen, wie diese ebenfalls erstellt werden. Wir haben bereits kurz darauf hingewiesen, dass Sie das native jQuery-Objekt erweitern können, wenn Sie möchten. So 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 Reihe von Elementen aufrufen können, müssen Sie dies folgendermaßen tun:
$.fn.myMethod = function() ( // I'm a new method ));Dies ist genau das Gleiche wie die Verwendung von .prototype in jQuery, und für Neugierige können Sie hier mehr darüber lesen. Wenn Sie dies so tun, können wir diese neue Methode für eine Reihe von Elementen verwenden. Mögen:
$("li").myMethod();Sie können neben dieser Methode alles tun, was Sie wollen, aber um ein guter Bürger für das Erstellen von jQuery-Plugins zu sein, sollten Sie die gleichen Elemente aus dem Plugin zurückgeben.
$.fn.myMethod = function() ( // Do some stuff return this; ));Auf diese Weise funktioniert es mit Verkettung. Wenn Sie das nicht tun und jemand etwas versucht hat wie:
$ ("Li"). MyMethod (). Show ();
Das würde scheitern, weil .show()im Wesentlichen nichts verlangt würde. Häufig werden jQuery-Plugins so gestaltet, dass sie jedes Element durchlaufen, sodass Sie direkten Zugriff auf jedes einzelne Element im Set haben, um die erforderlichen Schritte auszuführen.
Eine weitere gute Sache für Bürger ist es, ein Plugin in einen sofort aufgerufenen Funktionsausdruck zu verpacken und jQuery als Parameter zu übergeben. Auf diese Weise können Sie das $ in Ihrem Plugin-Code sicherer verwenden. Dies liegt daran, dass in einigen Situationen die Kurzform $ für jQuery nicht verfügbar ist (z. B. hat ein Benutzer jQuery im „Kompatibilitätsmodus“ verwendet).
Mit diesen beiden letzten Dingen wird eine Plugin-Struktur:
(function($) ( $.fn.myMethod = function() ( return this.each(function() ( // do things )); ); ))(jQuery)Im Screencast haben wir schließlich ein einfaches Plugin erstellt, um am Ende eines Elements einen Pfeil hinzuzufügen.
Siehe den Stift von Chris Coyier (@chriscoyier) auf CodePen
Natürlich kann es komplexer werden, wenn Ihr Ehrgeiz, mehr zu tun, steigt.