jQuery Plugin Boilerplate

Schon seit geraumer Zeit verwende ich in jQuery eine Menge selbst geschriebener Plugins, das erhöht die Wiederverwendbarkeit von Code deutlich. Aber es bietet auch noch andere Vorzüge wie zum Beispiel eine isolierte Problemstellung pro Plugin. Am Ende gibt es dann eine Datei die unter Benutzung der Plugins die Funktionalität auf die Seite bringt – falls es die Plugin nicht schon selbst machen wenn sie eingebunden werden.

Screenshot von Starter für jQuery

Die Arbeit die zunächst anliegt ist für alle Plugins gleich, man braucht ein Skelett auf das man aufbaut. Je nach Plugin ändern sich dabei die Anforderungen an das Plugin und man muss das Skelett (oder Neu-Deutsch Boilerplate;) erweitern. Das ist was doof da es letztendlich auch nur Schreibarbeit ist. Lustigerweise kann einem das Projekt Starter dabei helfen, eine passende Boilerplate für jQuery zu erstellen. Es wirft nämlich nicht nur eine einfache Boilerplate aus, sondern man kann diese im Vorfeld anpassen.

Wer es einfacher will kann aber auch mittels einfachen Copy&Paste starten, Stefan Gabos war so nett ein entsprechendes Skript zur Verfügung zu stellen:

// jQuery Plugin Boilerplate
// A boilerplate for jumpstarting jQuery plugins development
// version 2.0, July 8th, 2011
// by Stefan Gabos
;(function($) {
    $.pluginName = function(el, options) {
        var defaults = {
            propertyName: 'value',
            onSomeEvent: function() {}
        }
        var plugin = this;
        plugin.settings = {}
        var init = function() {
            plugin.settings = $.extend({}, defaults, options);
            plugin.el = el;
            // code goes here
        }
        plugin.foo_public_method = function() {
            // code goes here
        }
        var foo_private_method = function() {
            // code goes here
        }
        init();
    }
})(jQuery);

Die Verwendung der Bolierplate ist dabei recht einfach:

$(document).ready(function() {
    // Eine neue Instanz des Plugins erstellen
    var myplugin = new $.pluginName($('#element'));
    // Eine öffentliche Methode aufrufen
    myplugin.foo_public_method();
    // Den Wert einer öffentlichen Property abfragen
    myplugin.settings.property;
});

Wer viel mit jQuery zu tun hat sollte sich überlegen, ob er auch auf die Verwendung von Plugins umsteigt. Starter nimmt einem da eine Menge an Arbeit ab, aber auch mit dem Skript von Stefan Gabos findet man einen guten Einstieg.

Ähnliche Beiträge

Intelligentes Cropping von Bildern für Responsive Wenn man sich mal so umschaut im Bereich Responsive Websites könnte man durchaus die folgenden Eindrücke gewinnen: a) Wir machen das weil wir müssen, ...
Redactor – Wysiwyg mit jQuery Ich habe ja erst vor einigen Wochen über einen neuen Wysiwyg-Editor berichtet, der bei einigen größeren Portalen zum Einsatz kommt. In den daraus resu...
DropArea – Bildupload mit HTML5 und jQuery Das Input-Feld vom Typ File ist ein ausgesprochener Störenfried! Keine Präsentation einer fertigen Website ohne Diskussion darüber, wieso der "Durchsu...
Bacon.js – Bezier-Kurven für Texte Das Leben eines Webworkers ist nicht einfach, vor allem dann wenn man einem Kunden erklären muss, dass ein Bild mit Transparenz - auch wenn es dreimal...

Schreibe einen Kommentar