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

Inline Labels für Formularfelder „Normalerweise sollte man“ die Beschriftung für ein Input-Field immer mit dem Tag
jQuery Fundamentals – kostenloses jQuery eBook Ein angekündigtes kostenloses jQuery eBook könnte durchaus sinnvoll sein – auch wenn es auf Englisch ist (um dem einen oder anderen Kommentar hier dir...
jQuery.payment: Kreditkarten-Validierung Inzwischen dürfte es sich auch bis in die hintersten Ecken herum gesprochen haben, das man Kreditkarten nicht mit Regular Expressions beikommen kann. ...
Passwortstärke mit Javascript Anzeigen Es gibt doofe Passwörter, wie zum Beispiel das Wort passwort, und es gibt relativ gute Passwörter, wie zum Beispiel p4$$w0r7, und es gibt noch bessere...

Schreibe einen Kommentar

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