jquery-pluginsErste Schritte mit Jquery-Plugins


Bemerkungen

Ein jQuery-Plugin ist einfach eine neue Methode, mit der wir das Prototypobjekt von jQuery erweitern. Durch die Erweiterung des Prototypobjekts können Sie allen jQuery-Objekten ermöglichen, alle hinzugefügten Methoden zu erben. Bei jedem Aufruf von jQuery() erstellen Sie ein neues jQuery-Objekt, bei dem alle Methoden von jQuery übernommen wurden.

Die Idee eines Plugins besteht darin, etwas mit einer Sammlung von Elementen zu tun. Sie können jede Methode, die mit dem jQuery-Kern .fadeOut() , als .fadeOut() , wie .fadeOut() oder .addClass() .

Sie können Ihre eigenen Plugins erstellen und sie privat in Ihrem Code verwenden oder sie für die Öffentlichkeit freigeben. Es gibt Tausende von jQuery-Plugins, die online verfügbar sind. Die Barriere beim Erstellen eines eigenen Plugins ist so gering, dass Sie leicht eines davon erstellen können!

Grundlegendes Plugin, das die Farbe des Textes in Grün ändert.

// plugin initialization
$.fn.greenify = function() {
    // within the function you can use any of the jQuery methods
    // and `this` context refers to jQuery object
    this.css( "color", "green" );
};
 
// apply plugin
$( "a" ).greenify(); 
 

Verkettung

Das funktioniert, aber es gibt ein paar Dinge, die wir tun müssen, damit unser Plugin in der realen Welt überleben kann. Eine der Funktionen von jQuery ist die Verkettung, wenn Sie fünf oder sechs Aktionen mit einem Selektor verknüpfen. Dies wird dadurch erreicht, dass alle jQuery-Objektmethoden das ursprüngliche jQuery-Objekt erneut zurückgeben (es gibt einige Ausnahmen: .width() die ohne Parameter aufgerufen werden, gibt die Breite des ausgewählten Elements zurück und kann nicht verkettet werden). Um unsere Plugin-Methode verketten zu können, ist eine Codezeile erforderlich:

$.fn.greenify = function() {
    this.css( "color", "green" );
    // return the reference for chaining
    return this;
}
 
$( "a" ).greenify().addClass( "greenified" );
 

Installation oder Setup

jQuery-Plugins werden normalerweise über NPM oder Yarn (falls dort gehostet) oder durch Verweis auf eine externe Skriptdatei, die das Plugin enthält, entweder aus einem relativen Verzeichnis oder einem CDN installiert.

<script type="text/javascript" src="/path/to/plugin.jquery.js"></script>
 

Unterstützende Optionen mit Standardwerten

Sie können Ihr Plugin anpassbar machen, indem Sie Optionen akzeptieren.

$.fn.colourize = function(options) {

    // This is one method to support default options
    var style = $.extend({
        color: "green",
        backgroundColor: "white"
    }, options);

    // Set the colours on the current selection based on the option parameters
    return this.css({
        color: style.color,
        backgroundColor: style.backgroundColor
    });
};
 

Verwendungsbeispiel:

$("button").colourize({
    color: "orange"
});
 

Der Standardwert für die Farboption "grün" wird von $.extend() mit "orange" überschrieben.

Typische Struktur des jQuery-Plugins

Während das Schreiben von jQuery-Plugins einfach ist, möchten wir unsere Plugins in einem lokalen Bereich einschließen. Dadurch werden Namensraumkonflikte vermieden und der globale Namensraum verschmutzt. Außerdem wird sichergestellt, dass jQuery geladen wird, bevor es durch unser Plugin erweitert wird.

// Encapsulate our plugins in a local scope
(function($) {

    // Plugin definition
    $.fn.colourize = function() {

        // Plugin code

    };

// Pass the jQuery object into our local scope
}(jQuery));
 

Der Wrapper für den lokalen Geltungsbereich kann in anderen Beispielen weggelassen werden, um sie einfach und übersichtlich zu halten.

Verwenden der each () - Methode

Ihr typisches jQuery-Objekt enthält Verweise auf eine beliebige Anzahl von DOM-Elementen. Aus diesem Grund werden jQuery-Objekte häufig als Sammlungen bezeichnet. Wenn Sie mit bestimmten Elementen bearbeiten möchten (z. B. ein Datenattribut erhalten, bestimmte Positionen berechnen), müssen Sie .each () verwenden, um die Elemente zu durchlaufen.

$.fn.myNewPlugin = function() { 
    return this.each(function() {
        // Do something to each element here.
    });
 
    // return the reference for chaining
    return this;
};