Nachdem wir die Grundlagen der Plugin-Entwicklung verstanden haben, können wir etwas tiefer gehen. Da ein Plugin letztendlich eine Funktion ist, bietet es uns den Umfang, den wir organisieren müssen. Erinnerst du dich, als wir unser Haus in Ordnung gebracht haben, als wir etwas über Vorlagen gelernt haben? Wir können einige dieser Konzepte in einem Plugin verwenden.
Aber zuerst denke ich, dass die jQuery-Plugin-Architektur von etwas Boilerplate-Code profitieren kann. Vielleicht kennen Sie das HTML5-Boilerplate, das eine Reihe intelligenter Standardeinstellungen bietet. Ein jQuery Plugin Boilerplate ist das Gleiche. Spart einige Eingaben und bringt Sie auf einen Weg der intelligenten Entwicklung.
Ich bin auf ein Projekt gestoßen, das buchstäblich jQuery Boilerplate heißt und das ich für gut halte. Aber ich habe mich nicht viel damit beschäftigt. Stattdessen mag ich Starter von Doug Neiner. Sie geben einen Namen, einige Standardeinstellungen und einige Auswahlmöglichkeiten an und es wird diese Boilerplate-Struktur für Sie generiert.
Wir beschließen, einen Schieberegler namens lodgeSlider mit einem einfachen Geschwindigkeitsparameter zu erstellen und erhalten diesen Code:
(function($)( $.lodgeSlider = function(el, options)( // To avoid scope issues, use 'base' instead of 'this' // to reference this class from internal events and functions. var base = this; // Access to jQuery and DOM versions of element base.$el = $(el); base.el = el; // Add a reverse reference to the DOM object base.$el.data("lodgeSlider", base); base.init = function()( base.options = $.extend((),$.lodgeSlider.defaultOptions, options); // Put your initialization code here ); // Sample Function, Uncomment to use // base.functionName = function(paramaters)( // // ); // Run initializer base.init(); ); $.lodgeSlider.defaultOptions = ( speed: 300 ); $.fn.lodgeSlider = function(options)( return this.each(function()( (new $.lodgeSlider(this, options)); )); ); ))(jQuery);Vieles davon sollte vertraut aussehen. Es gibt ein IIFE, das das Plugin aus Sicherheitsgründen umhüllt. Aus dem jQuery-Objekt wird eine Funktion erstellt. Es gibt eine Init-Funktion, die sofort aufgerufen wird. Aus dem jQuery-Objekt wird eine Methode erstellt, die ein jQuery-Objekt zurückgibt. Es gibt Variablen, die Caching-Referenzen erstellt haben, die wir wahrscheinlich wieder verwenden werden. Meistens Sachen, die wir schon gesehen haben.
Vielleicht zwei neue Dinge. Eines ist das Optionsobjekt dort. Sie können den fest codierten Wert 300 sehen. Aber siehe auch die Zeile mit $.extend(). Dies ist eine jQuery-Funktion, mit der zwei Objekte zu einem kombiniert werden, wobei eines Vorrang vor dem anderen hat. Wenn wir das Plugin aufrufen, vielleicht so:
$("#slider-1").lodgeslider();Wir übergeben keine Optionen, und dieses leere Objekt wird mit unserem fest codierten Objekt kombiniert, und die Standardwerte sind im Plugin verfügbar. Aber wir könnten es auch so nennen:
$("#slider-1").lodgeslider(( speed: 500 ));Wir übergeben dort ein Objekt als Parameter. Dieses Objekt wird mit unserem fest codierten Objekt kombiniert, hat Vorrang und der übergebene Wert wird zum im Plugin verfügbaren Wert. Ziemlich cool.
Die andere neue Sache ist das seltsame bisschen mit .data(). Wir haben die Basisvariable erstellt, um auf die Funktion selbst zu verweisen, die für jedes Element, das das Plugin aufruft, neu erstellt wird. Angenommen, wir haben das Plugin aufgerufen. $(".slider")Auf der Seite befinden sich möglicherweise zwei Elemente mit dem Klassennamen slider. Jede Schleife wird ausgeführt, und es werden zwei Instanzen der Funktion lodgeSlider erstellt. In jedem fügen wir dem Element selbst einen Verweis darauf hinzu. Auf diese Weise können wir interne Plugin-Methoden von jeder Referenz dieses Elements aus aufrufen.
Wie vielleicht:
$(".the-first-slider").data("lodgeSlider").changeSlide(2);Nur irgendwie gibt uns eine gute Möglichkeit, Plugin-Methoden zu verwenden, wenn wir müssen.
Wir sind in diesem Plugin-Abenteuer nicht weit gekommen:
Sehen Sie sich den Stift an, der einen Slider von Grund auf neu erstellt von Chris Coyier (@chriscoyier) auf CodePen
Ehrlich gesagt braucht die Welt wahrscheinlich kein weiteres Slider-Plugin. Aber Sie können sehen, wie komplex sie werden könnten. Hier nur einige Ideen:
- Es kann Rückruffunktionen (oder benutzerdefinierte Ereignisse) geben, bevor und nachdem sich die Folie ändert, nachdem der Schieberegler eingerichtet wurde, nachdem er abgerissen wurde usw.
- Die Breiten können prozentual sein und neu berechnet werden, wenn sich das Browserfenster ändert.
- Die Navigation kann dynamisch erstellt werden, anstatt im Markup erforderlich zu sein.
- Die IDs und #hash hrefs können auch dynamisch erstellt werden.
- Berührungsereignisse wie Wischen können hinzugefügt werden, um den Schieberegler berührungsfreundlicher zu machen (kleine Punkte sind nicht berührungsfreundlich).
Je mehr dieser Dinge Sie tun, desto größer ist das Plugin. Aus diesem Grund ist es so schwierig, das Gleichgewicht zwischen Funktionen, Praktikabilität, Leistung und Größe zu finden, und es gibt so viele verschiedene Plugins, die letztendlich dasselbe tun.