JQuery Kochbuch (German Edition)
wahrscheinlich die Anforderungen einer größeren Gruppe von Anwendern erfüllen, unterschiedlichere Aufgaben erfüllen können und auch beliebter sein als Plugins, die keine Optionen unterstützen.
Durch die Verwendung von Standard-Optionenfür Ihr Plugin haben die Entwickler ebenfalls mehr Auswahlmöglichkeiten. Ein angenehmer Nebeneffekt ist der, dass sich das Plugin immer darauf verlassen kann, dass bestimmte Optionen definiert sind. Dadurch wird der Code-Umfang auch geringer, denn es muss nicht mehr an allen Ecken und Enden geprüft werden, ob eine Option übergeben wurde. Die Anwender des Plugins haben zudem die Wahl, nur einzelne Optionen zu überschreiben oder auch allen Optionen andere Werte zu verpassen. Und indem Sie die Standard-Optionen an das jQuery-Objekt anhängen, können diese zudem global überschrieben werden, wodurch Ihre Anwender noch bequemer ihre Standard-Vorgaben festlegen können.
Die Kurzform $ in Ihrem Plugin verwenden
Problem
Andere JavaScript-Bibliotheken nutzen
$
. jQuery selbst nutzt
$
nur als Kurzform, während das Haupt-Objekt den Namen
jQuery
trägt. Wie können Sie sicherstellen, dass Ihr Plugin mit anderen Plugins und Bibliotheken kompatibel bleibt?
Lösung
jQuery nutzt die Funktion
$
alseigenen Alias für das jQuery-Objekt. Wird jQuery in den Kompatibilitätsmodus versetzt, dann übergibt es die Kontrolle über den Alias
$
zurück an die Bibliothek, die ihn definiert hat. Plugins können so programmiert werden, dass sie die gleiche Technik verwenden.
Indem Sie Ihr Plugin in einer anonymen Funktion verpacken und diese Funktion direkt ausführen, wird die Kurzform
$
innerhalb des Plugins gehalten. Code außerhalb des Plugins kann
$
ganz normal verwenden. Innerhalb des Plugins bezieht sich
$
wie üblich auf das jQuery-Objekt:
;(function($) { $.fn.pulse = function(options) {
// Übergebene Optionen mit den Standardwerten verbinden
var opts = $.extend({}, $.fn.pulse.defaults, options);
return this.each(function() {
// Pulse!
for(var i = 0;i $(this).fadeTo(opts.speed,opts.fadeLow).fadeTo(opts.speed,opts.fadeHigh);
}
// Zurücksetzen auf Anfang
$(this).fadeTo(opts.speed,1);
});
};
// Standard-Optionen für das Pulse-Plugin
$.fn.pulse.defaults = {
speed: "slow",
pulses: 2,
fadeLow: 0.2,
fadeHigh: 1
}; })(jQuery);
Diskussion
Indem Sie Ihren Code in einer anonymen Funktion verpacken, erhalten Sie eine Reihe netter Features und Ihr Plugin-Code ist in der großen, weiten Welt, in der Ihre Anwender leben, deutlich robuster. Zudem ist dieser Schritt einfach und unkompliziert.
Durch ein Semikolon am Anfang Ihrer Funktionsdefinition schützen Sie Ihren Code vor unbeabsichtigten Änderungen durch andere Entwicklern, die eventuell ein Semikolon am Ende ihrer eigenen Bibliothek vergessen haben. JavaScript beendet zwar standardmäßig Anweisungen auch an einem Zeilenumbruch, aber viele Anwender nutzen Minimierungs-Tools, die den gesamten JavaScript-Code in ihrem Projekt in einer einzigen Datei zusammenfassen. Dieser Prozess entfernt auch die Zeilenumbrüche und kann zu Fehlern führen, wenn Ihr Code direkt danach folgt. Das Semikolon am Anfang Ihres Codes ist eine schneller und einfacher Trick, der Sie davor bewahrt.
Die öffnende Klammer ist direkt der Anfang der Definition der anonymen Funktion. Innerhalb unserer anonymen Funktion definieren wir eine Funktion, die die Variable übergibt, welche wir anstatt des vollständig benannten jQuery-Objekts nutzen wollen. In diesem Fall wollen wir
$
als Variable nutzen. Aufgrund des Scope-Handlings von JavaScript müssen wir eine zusätzliche Funktion definieren. In klassischeren Sprachen wie Java und C++ ist der Gültigkeitsbereich auf den Block beschränkt. In JavaScript bezieht sich der Gültigkeitsbereich hingegen auf die Funktion. Daher erzeugen wir hier eine Funktion, um eine Grenze für den Gültigkeitsbereich in unserem Plugin zu haben.
Dann folgt eine neue Version unseres Plugins, in der nur der Zugriff auf das jQuery-Objekt geändert wurde. Da wir dieses Plugin anonym gekapselt und den Scope der Variablen
$
begrenzt haben, können wir
$
jetzt ohne Konflikte mit anderem Code verwenden.
Die letzte Zeile schließt die Scope-Funktion und die anonyme Funktion mit einer geschweiften und einer runden Klammer. Anschließend rufen wir unsere anonyme Funktion direkt auf. Dabei übergeben wir das jQuery-Objekt, das dann innerhalb der Funktion als
$
angesprochen wird. Schließlich beenden wir unsere
Weitere Kostenlose Bücher