#28: Ein komplexeres Plugin bauen

Nachdem wir die Grundlagen der Plugin-Entwicklung verstanden haben, können wir tiefer eintauchen. Da ein Plugin letztendlich eine Funktion ist, bietet es uns den nötigen Umfang zur Organisation. Erinnern Sie sich, als wir unsere Sachen sortiert haben, als wir etwas über Templating gelernt haben? Wir können einige dieser Konzepte auch in einem Plugin verwenden.

Aber zuerst denke ich, dass die Architektur von jQuery-Plugins von einigem Boilerplate-Code profitieren kann. Vielleicht kennen Sie HTML5 Boilerplate, das eine Reihe intelligenter Standardwerte bereitstellt. Ein jQuery-Plugin-Boilerplate ist dasselbe. Es spart Tipparbeit und bringt Sie auf den Weg einer intelligenten Entwicklung.

Ich bin auf ein Projekt namens jQuery Boilerplate gestoßen, von dem ich vermuten würde, dass es gut ist. Aber ich habe es mir noch nicht genau angesehen. Stattdessen gefällt mir Starter von Doug Neiner sehr gut. Sie geben einen Namen, einige Standardwerte und einige Optionen an, und es generiert die Boilerplate-Struktur für Sie.

Wir entscheiden uns, einen Slider 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 Ihnen bekannt vorkommen. Da ist eine IIFE, die das Plugin zur Sicherheit umschließt. Da ist eine Funktion, die vom jQuery-Objekt erstellt wird. Da ist eine init-Funktion, die sofort aufgerufen wird. Da ist eine Methode, die vom jQuery-Objekt erstellt wird und ein jQuery-Objekt zurückgibt. Da sind Variablen, die Referenzen speichern, die wir wahrscheinlich wieder verwenden werden. Meistens Dinge, die wir schon einmal gesehen haben.

Vielleicht zwei neue Dinge. Eines ist das options-Objekt darin. Sie sehen den fest codierten Wert 300. Aber sehen Sie auch die Zeile mit $.extend(). Das ist eine jQuery-Funktion, um zwei Objekte zu einem zu kombinieren, 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 aufrufen

$("#slider-1").lodgeslider({
  speed: 500
});

Wir übergeben ein Objekt als Parameter. Dieses Objekt wird mit unserem fest codierten Objekt kombiniert, hat Vorrang, und der von uns übergebene Wert wird der im Plugin verfügbare Wert. Ziemlich cool.

Das andere neue Ding ist dieser seltsame Teil mit .data(). Wir haben die Basisvariable erstellt, um auf die Funktion selbst zu verweisen, die für jedes Element neu erstellt wird, auf das das Plugin angewendet wird. Sagen wir zum Beispiel, wir rufen das Plugin für $(".slider") auf – es könnten zwei Elemente auf der Seite mit dem Klassennamen slider vorhanden sein. Die each-Schleife läuft, und es werden zwei Instanzen der lodgeSlider-Funktion erstellt. In jeder davon speichern wir eine Referenz darauf *im Element selbst*. Auf diese Weise können wir interne Plugin-Methoden von jeder Referenz aus aufrufen, die wir von diesem Element haben.

Wie vielleicht

$(".the-first-slider").data("lodgeSlider").changeSlide(2);

Es gibt uns einfach eine schöne Möglichkeit, Plugin-Methoden zu verwenden, wenn wir sie brauchen.

Wir sind in diesem Plugin-Bau-Abenteuer nicht besonders weit gekommen

Siehe den Pen Building a Slider from Scratch von Chris Coyier (@chriscoyier) auf CodePen

Ehrlich gesagt braucht die Welt wahrscheinlich keinen weiteren Slider-Plugin. Aber Sie können sehen, wie komplex sie werden könnten. Hier sind nur ein paar Ideen

• Es könnte Callback-Funktionen (oder benutzerdefinierte Ereignisse) für vor und nach dem Folienwechsel, nach dem Einrichten des Sliders, nach dessen Abbau usw. geben.
• Die Breiten könnten prozentual sein und neu berechnet werden, wenn sich das Browserfenster ändert.
• Die Navigation könnte dynamisch aufgebaut werden, anstatt im Markup erforderlich zu sein.
• Die IDs und #hash- hrefs könnten ebenfalls dynamisch erstellt werden.
• Touch-Events wie Swipes könnten hinzugefügt werden, um den Slider touch-freundlicher zu machen (kleine Punkte sind nicht touch-freundlich).

Je mehr dieser Dinge Sie tun, desto größer wird die Größe des Plugins. Deshalb ist es so schwierig, die richtige Balance zwischen Funktionen, Praktikabilität, Leistung und Größe zu finden, und deshalb gibt es so viele verschiedene Plugins, die letztendlich dasselbe tun.