Grundlagen der jQuery Plugin Entwicklung

Wenn man sich mit jQuery beschäftigt und damit arbeitet kommt man früher oder später mit Plugins in Berührung. Meist nutzt man welche von anderen Entwicklern, obwohl es gar nicht so kompliziert selbst welche zu schreiben. Um meine Kollegen mal ein bisschen in die Entwicklung von jQuery Plugins einzuführen, hab ich ein kleines Einsteiger Tutorial verfasst, welches ich auch hier veröffentlichen möchte.

Es zeigt die Grundstruktur eines Plugins und ein paar Kleinigkeiten die man beachten sollte. Wer schon ein wenig mit jQuery gearbeitet hat wird damit hoffentlich einen Einstieg in der Entwicklung eigener Plugins bekommen.

 

Die Grundstruktur eines Plugins

// es gibt verschiedene Ansätze Plugins zu schreiben,
//aber dieser hat sich am besten bewährt.
// Durch die Namensraumzuweisung am Ende gibt es keine
// Konflikte wenn andere Librarys geladen
// werden, die ebenfalls $ benutzen. Somit kann im
// kompletten Plugin Code mit $ gearbeitet werden
(function ($) {
   $.fn.myPlugin = function (options) {}
})(jQuery);

// Aufruf des Plugins
jQuery(document).ready(function() {
    jQuery('#myDiv').myPlugin();
});

Ãœbergabe von Optionen

In den meisten Fällen ist es Sinnvoll das Plugin über Optionen zu steuern. Sei es das man CSS Klassen festlegt, über die Elemente im DOM identifiziert werden. Oder ob man festlegen möchte welcher Effekt genutzt werden soll. Optionen werden immer als Key => Value Paare übergeben. Im Plugin selbst legt man die Defaults fest, die genutzt werden wenn keine Optionen übergeben werden.

(function ($) {
    $.fn.myPlugin = function (options) {
        // damit wir weniger Schreibarbeit haben weisen
        // wir den Namensraum einer Variablen zu
        plug = $.fn.myPlugin;
        // Optionen mergen
        // auf die Optionen können wir dann über
        // o.optionskey zugreifen
        o = $.extend({},
            plug.defaults,
            options);
    }
    // Default Optionen
    $.fn.myPlugin.defaults = {
        'cssClass': 'order'}
)(jQuery);

jQuery(document).ready(function() {
    jQuery('#myDiv').myPlugin({'cssClass' : 'item});
});

Ausführen des Plugins - die eigentliche Logik

(function ($) {
    $.fn.myPlugin = function (options) {
        // damit wir weniger Schreibarbeit haben weisen
        // wir den Namensraum einer Variablen zu
        plug = $.fn.myPlugin;
        // Optionen mergen
        // auf die Optionen können wir dann über
        o.optionskey zugreifen
        o = $.extend({},
            plug.defaults,
        options);
        // das ist die eigentliche Logik, die ausgeführt wird
        // this bezieht sich auf das DOM Objekt das beim Instanzieren übergeben wird
        // in unserem Beispiel aus Punkt 2 wäre das das DOM Element mit der ID myDiv
        // each wäre in diesem Fall nicht nötig, da es eigentlich nur ein Element mit
        // dieser ID geben darf
        return this.each(function() {
            // um im weiteren Ablauf wieder auf das Ursprunsobjekt zugreifen zu können
            // weisen wir es der Variablen self zu, da $(this) u.U. später auf ein anderes
            // Objekt verweist
            var self = $(this);
            // ab hier machen wir was mit self, suchen Elemente innerhalb von self, binden Events an self
            // oder seinen Children, oder oder oder
        })
    }   
    // Default Optionen
    $.fn.myPlugin.defaults = {
        'cssClass': 'order'}
)(jQuery);

Private and Public Methods

Auch in jQuery Plugins gibt es private, also nur innerhalb des Plugins nutzbare und public Methoden. Wobei das Plugin aber in jedem Fall instanziert werden muss um die public Methoden nutzen zu können. Im einfachsten Falle würde das Plugin also einfach einen return setzen und die public Methoden zur Verfügung stellen. Private und Public Methoden unterscheiden sich nur an der Schreibweise.

// public
myPublicFunc = function() {}
// private
function myPrivateFunc() {}

Callback Handling

Warum ein Callback Handling?

JS wird Zeile für Zeile abgearbeitet und bei Effekten kann es einfach passieren, daß ein Statement noch nicht abgearbeitet wurde, während das nächste schon angefangen wird. Um das zu verhindern gibt es Callbacks. Oder man möchte einfach ein zweites Plugin auf den Code lassen, nachdem das erste seine Funktion erfüllt hat.

(function ($) {
    $.fn.myPlugin = function (options, callback) {
        plug = $.fn.myPlugin;
        o = $.extend({},
            plug.defaults,
            options);
        callback = callback;
        
        return this.each(function() {
            var self = $(this);
            // hier die Logik
            // und dann überprüfen wir ob es sich beim callback
            // um eine Funktion handelt und führen sie aus
            if($.isFunction(callback)) {
                // hier sieht man auch warum wir die Variable self erzeugt haben
                // this bleibt nicht immer das gleiche this ;-)
                callback.call(this);
            }
        });
    }
    
    // public
    myPublicFunc = function() {}
    
    // private
    function myPrivateFunc() {}
    
    // Default Optionen
    $.fn.myPlugin.defaults = {
    'cssClass': 'order'}
)(jQuery);


// hier können wir jetzt beim Aufruf noch eine Callback Methode übergeben
jQuery(document).ready(function() {
    jQuery('#myDiv').myPlugin(
        {}, function() {}
    );
});

Wie gesagt, es handelt sich hier nur um einen kleinen Einstieg in die Plugin Entwicklung für jQuery, die mehr oder weniger gerade mal die Grundstruktur eines Plugins aufzeigt. Bei Gelegenheit gibts noch mehr davon.

über mich

Autor: Michael Pfister

Seit mehr als 12 Jahren Webentwickler mit Schwerpunkt PHP, Javascript und CSS Zur Zeit arbeite ich bei Contria GmbH als Full-Stack Developer. Und nebenbei fahr ich noch Fahrrad;-)

• Zurück
• Weiter