Heute möchte ich zeigen, wie ihr die Entwicklung eines jOuery-Plugins in drei Schritten erreichen könnt. Nachdem ihr diesen Artikel gelesen habt, solltet ihr in der Lage sein, eigenständig wiederverwendbare jQuery Plugins zu erstellen, die andere Entwickler schnell verwenden und auch einfach erweitern können. Zum Verständnis dieses Artikels sollten bereits mäßige Kenntnisse im Umgang mit JavaScript und dem jQuery Framework vorhanden sein.
Text: Hendrik Maus
1 – Schütze Deinen Code
Als erstes schauen wir uns die Umgebung an, in welcher jQuery Erweiterungen verwendet werden. Meist werdet ihr innerhalb des Haupt-HTML Dokuments des Projekts etwas ähnliches wie den folgenden Ausschnitt finden (Datei 01):
<!– Datei: 01-environment.html –>
<script src=”/http://code.jquery.com/jquery-2.1.0.min.js”>
</script>
<script src=”js/plugins/jquery.someplugin1.js”>
</script>
<script src=”js/plugins/jquery.someplugin2.js”>
</script>
<script src=”js/plugins/jquery.someplugin3.js”>
</script>
Am Ende sollten alle diese Dateien komprimiert und minimiert in einer einzigen Datei enthalten sein. Prinzipiell sollte bei öffentlichen Plugins eine minimierte Version angeboten werden.
Wie können wir Überschneidungen mit anderen Skripten verhindern?
Wir schreiben unseren Code in einer sog. anonymous self invoking function. Funktionen kapseln ihre Variablen in ihrem lokalen Gültigkeitsbereich. Das folgende Code-Beispiel zeigt eine solche Funktion (Datei 02):
// Datei: 02-anonymous-self-invoking-function.js
(function(){
// code goes here
})();
Eine solche anonyme Funktion wird umklammert und am Ende direkt aufgerufen. Nun probieren wir die Kapselung aus. Alles was wir innerhalb der Funktion schreiben existiert nur lokal innerhalb der Funktion (Datei 03):
// Datei: 03-namespace.js
var global = ‘i am global’;
console.log(window.global); // -> i am global
(function(){
// global is available here
var local = ‘i am local’;
})();
console.log(window.local); // -> undefined
Innerhalb der Funktion haben wir Zugriff auf alles was im globalen Namensraum zur Verfügung steht, alles andere bleibt jedoch innerhalb der Funktion versteckt. Nun können wir der Funktion alles übergeben was sie braucht (Datei 04):
// Datei: 04-asif-complete.js
(function($, window){
// code goes here
})(jQuery, window);
Wir übergeben an dieser Stelle jQuery, nicht $, um Konflikten vorzubeugen. Sofern außerhalb unserer Erweiterung jQuery’s noConflict Methode verwendet wird, um beispielsweise ein anderes Javascript Framework zu nutzen, welches ebenfalls vom Dollarzeichen Gebrauch macht, vermeiden wir ungewollte Konflikte an dieser Stelle.
Wir übergeben das window Objekt um der Funktion die Möglichkeit zu geben, etwas in den globalen Namensraum zu schreiben. Ein Export könnte dann z.B. so aussehen:
window.myExport = ‘i am global’;
Einige Entwickler benennen das window Objekt in dieser Situation gerne in exports um, damit der Code besser lesbar wird.
2 – Welche Funktionalität soll jQuery durch euer Plugin erhalten?
Es gibt zwei verschiedene Ansätze jQuery zu erweitern. Welchen Ansatz ihr nun wählen solltet, hängt davon ab, was ihr mit der Erweiterung bezwecken wollt. Wenn du eine Funktion erstellen möchtest, die nichts mit einem bestimmten DOM Element zu tun hat, könnte dies folgendermaßen aussehen (Datei 05):
// Datei: 05-plugin-as-a-function.js
(function($, window) {
$.log = function(message) {
// any log logic
console.log(message);
}
})(jQuery, window);
Da wir dem jQuery Objekt die Funktion $.log einfach angehangen haben, können wir sie nun überall im Code verwenden.
Hinweis: Diese Art der Erweitung gibt im Regelfall nicht das jQuery Objekt als Rückgabewert zurück und ist somit nicht chaining fähig. Hiermit ist gemeint, dass die Erweitung meist nicht direkt etwas mit dem DOM zu tun hat, wie das z.B. auch bei $.ajax() der Fall ist.
Um eine Erweitung zur Arbeit mit DOM Elementen zu erstellen, erweitern wir den jQuery Prototypen. Dadurch wird jedes neu erstellte jQuery Objekt unsere Erweiterung mit sich bringen. (Datei 06):
// Datei: 06-plugin-on-prototype.js
(function($, window) {
$.fn.pluginName = function() {
return this.each(function() {
// plugin logic
});
}
})(jQuery, window);
Wir fügen pluginName also nicht direkt auf dem $ Objekt hinzu, sondern auf dessen fn Eigenschaft, wodurch wir den Prototypen erweitern. Die Erweiterung selbst ist eine Funktion, welche this zurückgibt. Jedoch führen wir für jedes this wiederum eine Funktion aus, in welcher der Code des Plugins letztendlich seinen Platz findet.
Das this.each ist notwenig, da $(‘ul li’) meist mehrere Elemente beinhaltet.
$(‘ul li’).pluginName();
Auf diese Weise unterstützt auch unsere Erweitung das in jQuery übliche Chaining und fügt sich fast nahtlos ein:
$(‘ul li’).pluginName().show();
3 – Ein wiederverwendbares Plugin
Bei der Entwicklung jeder Erweiterung sollte unbedingt darauf geachtet werden, dass keine Grundfunktionalität entfernt wird. Nutzer eures Plugins wären verwirrt, wenn sie Funktionen aus dem jQuery-Framework durch euer Plugin verlieren würden. Jede Erweitung sollte konfigurierbar sein, indem man ein Objekt übergibt. Der finale Code der Erweiterung sieht so aus (Datei 07):
// Datei: 07-plugin-final.js
(function($, window) {
$.fn.pluginName = function(user_options) {
var defaults = {
// key:value pairs
}
var config = $.extend(defaults, user_options || {});
return this.each(function() {
// plugin logic
});
}
})(jQuery, window);
Nochmal ein kurzer Blick auf den Code:
Als erstes definiert die Erweitung ihre Standard-werte, die defaults. Dabei handelt es sich um ein Objekt, welches alles, was konfigurierbar ist, mit einem Standardwert versieht.
Der Nutzer des Plugins sollte nicht gezwungen werden user_options zu übergeben, wenn es sich vermeiden lässt. Das Konfigurations Objekt sollte nur eine Möglichkeit darstellen kleinere Änderungen einzubringen und Standard-Werte zu überschreiben. Um dieses Verhalten zu erzielen, nutzen wir hier die $.extend Funktion der jQuery Library. Mit dieser Funktion lassen sich Objekte vermischen.
Da user_options optional sein soll, bieten wir der $.extend Funktion ein leeres Objekt an, falls user_options nicht übergeben wurde.
Um einen hohen Verbreitungsgrad und eine geringe Einstiegshürde in euer Plugin sicher zu stellen, sollte die Erweiterung einige Code-Beispiele, eine lauffähige Demo und eine minimierte Version enthalten.
SAE-Absolvent Hendrik Maus ist für SAE Köln als Web Application Developer tätig.
