Ein jQuery Plugin ertsellen¶

In dieser Anleitung geht es um die Erstellung eines einfachen jQuery-Plugins zur Ausgabe eines LoremIpsum Textes. Die Länge des Text soll dabei über eine Option gesteuert werden können. Um es einfach zu halten wird für den Text eine Konstante verwendet und kein eigener LoremIpsum-Generator.

LoremIpsum-Plugin¶

Zuerst erstellen wir die HTML-Datei LoremIpsum.html mit einem HTML-Basis-Gerüst, den beiden Bibliotheken Alvine-Framework und jQuery, sowie einem Javascript-Block für unser Beispiel-Plugin.

<!DOCTYPE html>
<html>
    <head>
        <title>LoremIpsum.html</title>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
        <script src="https://cdn.alvine.io/libs/alvine/framework/alvine.framework-1.0.1.min.js"></script>
    </head>
    <body>
        <div id="container"></div>

        <script>
           // ....
        </script>
    </body>
</html>

Um ein Objekt zu definieren benötigen wir in Javascript zuerst die Konstruktor-Funktion¹ des Objektes. Da diese Methode nur für die private Verwendung ist, nennen wir es hier einfach InternalPlugin. Wir fügen diesen Block in unsere HTML-Datei in den Script-Block ein.

function InternalPlugin() {
}

Unser Objekt soll die Funktionalität von Alvine.jQuery.Plugin erben. Hierzu müssen wir den Prototypen des neuen Objektes angeben und für die Verwendung mit der Clone-Funktion den Konstruktor explizit setzen.

InternalPlugin.prototype = new Alvine.jQuery.Plugin();
InternalPlugin.prototype.constructor = InternalPlugin;

Als letztes benötigen wir noch eine öffentliche Factory-Funktion, die uns das Plugin erstellt. Wir geben dieser Funktion den Namen unseres Plugins: LoremIpsum

function LoremIpsum(options) {
    return new InternalPlugin(options);
}

Jetzt haben wir bereits ein vollwertiges Plugin!

Wir können unser Plugin nun an das DOM² unserer HTML-Seite binden. Dies erfolgt über die Methode jQuery.fn.asignAlvineComponent. Dazu notieren wir in unserem Beispiel noch folgende Anweisung:

jQuery('#container').asignAlvineComponent(LoremIpsum);

Diese Anweisung hängt an alle von jQuery gefundenen Elemente das LoremIpsum-Plugin. In diesem Fall an das DIV mit der ID #container. Überprüfen kann man dies mit der Entwickler-Konsole über die Anweisung jQuery('#container').get(0).Alvine.LoremIpsum. Als Ausgabe sollte ein Komponenten-Objekt erscheinen.

Component {settings: Object, element: div#container, jQElement: jQuery.fn.init(1), plugin: Object, getSetting: function…}

Textausgabe¶

Nachdem wir das Grundgerüst erstellt haben, soll unser Plugin die gewünschte Funktionalität erhalten. Hierzu notieren wir die Funktion InternalPlugin.prototype.insertText() und die Konstante TEXT.

var TEXT = 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.';

InternalPlugin.prototype.insertText = function() {
    this.reference.jqElements.html(TEXT);
};

Rufen wir die Seite nun auf und führen in der Entwickler-Konsole die Anweisung jQuery('#container').get(0).Alvine.LoremIpsum.plugin.insertText() aus, erscheint in unserem Container-DIV der LoremIpsum-Text. Um die Ausgabe automatisiert beim Laden durchzuführen fügen wir diese Anweisung direkt in den Script-Block ein.

jQuery('#container').get(0).Alvine.LoremIpsum.plugin.insertText();

Optionen¶

Als letzten Schritt wollen wir das Plugin noch um eine Option erweitern. Hierzu definieren wir zuerst den Default-Wert der Option im Block ``.

InternalPlugin.prototype.getDefaults = function() {
    return {
        length: 20
    };
};

Diesen Default-Wert können wir im Anschluss über die Methode jQuery('#container').get(0).Alvine.LoremIpsum.getSetting('length') abfragen und erhalten 20 zurück. Der Standardwert lässt sich nun über mehrere Wegen anpassen. Als erstes kann man den Wert bei de rz-uweisung über asignAlvineComponent setzen.

jQuery('#container').asignAlvineComponent(LoremIpsum,{length:25});

Das Ergebnis der Abfrage jQuery('#container').get(0).Alvine.LoremIpsum.getSetting('length') wäre jetzt 25. Alternativ kann man auch direkt im Container-DIV über ein entsprechendes data-Attribute den Wert setzen und so den Default überschreiben.

<div id="container" data-loremipsum-length="15"></div>

Würden wir jetzt die Abfrage durchführen, so wäre das Ergebnis 15.

Die Reihenfolge der Auswertung ist data-Attribute, Zuweisung und als letztes der Default-Wert.

Wir müssen nun nur noch unsere insertText-Methode um die Länge des Lorem-Ipsum-Textes begrenzen.

InternalPlugin.prototype.insertText = function() {
    this.reference.jqElements.html(TEXT.substring(0, this.component.element.Alvine.LoremIpsum.getSetting('length')));
};

Nach dem Aufruf der Seite erscheint nun der Text Lorem ipsum dol (15 Zeichen) im Browser.

Voila!

Das vollständige Beispiel ist auf der folgenden Referenz-Seite zu finden.