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

Starke Passwörter mit jQuery Ich hatte ja erst unlängst auf ein Tutorial zum Thema Passwortstärke hingewiesen, das Thema wird immer wichtiger da der Benutzer es von sich aus nicht...
deck.js – Präsentationen in HTML Es muss nicht immer Powerpoint sein! Wenn ich eins gelernt habe in meinem ehemaligem Consulter-Leben, dann ist es das, ausreichend früh anzukommen um ...
Inline Labels für Formularfelder „Normalerweise sollte man“ die Beschriftung für ein Input-Field immer mit dem Tag
jFontSize – dynamische Font-Size mittels jQu... Ich entwickele zur Zeit einen Magento-Shop für Silver Surfer. Natürlich gibt es da besondere Ansprüche, und eine davon ist die klare Lesbarkeit der Se...

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.