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

elRTE – WYSIYWYG-Editor in jQuery inkl. Dateimanag... WYSIWYG-Editoren sind etwas Nettes, haben aber dennoch ein Problem: Die Bilder, die man in den Text einbinden möchte, müssen dummerweise erstmal auf d...
Star Rating mit jQuery jRating Ich glaube die ersten die es hatten war Amazon, jene verteufelt einfache Möglichkeit einen Artikel ganz schnell mit einem bis fünf Sternen zu bewerten...
jQuery++ – Power Tools für jQuery jQuery kann eine Menge, aber halt nicht alles. Solls auch nicht, aber es gibt durchaus ein paar Funktionen / Plugins, die ständig im Einsatz sind, und...
In Place Editing mit jQuery In Place Editing ist das nächste große Ding, aber was heisst das eigentlich? Normalerweise funktionieren die meisten CMS über ein Backend, und ein Fro...

Schreibe einen Kommentar

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