Plug-in-Entwicklung mit jQuery - Jakob Westhoff
←
→
Transkription von Seiteninhalten
Wenn Ihr Browser die Seite nicht korrekt rendert, bitte, lesen Sie den Inhalt der Seite unten
Jakob Westhoff
Plug-in-Entwicklung
mit jQuery2 – Willkommen in der Welt von jQuery 2.1.1 Download von der jQuery-Webseite Download der Bibliothek Die einfachste Möglichkeit zur Beschaffung von jQuery ist der Download von den Web- seiten des Projekts selbst. Direkt auf der Startseite http://jquery.com befindet sich in der oberen rechten Ecke eine gut sichtbare Downloadschaltfläche (Abbildung 2.1), über die auf das aktuellste Release zugegriffen werden kann. Direkt oberhalb der Schaltfläche befindet sich die Auswahl zur PRODUCTION- oder DEVELOPMENT-Version der Bibliothek. Diese beiden Varianten unterscheiden sich durch ihre Quelltextgröße. Die Produktions- version wurde durch einen JavaScript Minifier verkleinert. Als Resultat dieses Vorgangs wurden sämtliche Kommentare entfernt, sowie Zeilenumbrüche und Abstände auf ein Minimum reduziert. Außerdem wurden Variablen innerhalb der Bibliothek umbenannt, um Speicherplatz zu sparen. Diese Veränderungen führen zu Quelltext, der zwar noch von einer JavaScript-Engine ausgeführt, aber nur noch begrenzt von Menschen gelesen werden kann. Während der Entwicklungsphase bietet es sich aus diesen Gründen an, die DEVELOPMENT- Version zu verwenden, um u. a. das Debuggen zu erleichtern. Bevor die Bibliothek aller- dings zusammen mit der Applikation an Anwender ausgeliefert wird, sollte sie durch eine minifizierte Version ersetzt werden. Hierbei ist es unerheblich, ob der fertige PRODUC- TION-Download der jQuery-Seite eingesetzt oder eine eigene minifizierte Variante erzeugt wird. Abbildung 2.1: Downloadbereich der jQuery-Webseite 22
Herunterladen und Einbinden von jQuery
Einbinden in eine Webseite
Um jQuery innerhalb einer Webseite einsetzen zu können, muss die Bibliothek zunächst
geladen werden. Üblicherweise geschieht das durch die Verwendung eines script-Ele-
ments. Listing 2.1 enthält ein minimales HTML-Dokument, das eine zuvor herunterge-
ladene Version von jQuery einbindet. Nachdem der Ladevorgang durchgeführt wurde,
kann jeglicher jQuery-basierte Quelltext innerhalb der Seite zur Ausführung gebracht
werden. Zu beachten ist lediglich, dass eingesetzte Plug-ins nach der Bibliothek einge-
bunden werden müssen, da JavaScript keine automatische Verwaltung von Abhängigkei-
ten besitzt. Aber dazu mehr in Kapitel 3.
Minimal jQuery environment
…
Listing 2.1: Minimales HTML-Dokument zur Verwendung der jQuery-Bibliothek
Vorteile
•• Vollständige Kontrolle über den ausgelieferten Quelltext
•• Kontrolle über gesendete Cache-Header und übrige Metadaten
•• Eigenverantwortlichkeit für die Verfügbarkeit der Bibliothek
Nachteile
•• Pflege im Fall eines Bibliotheksupdates erforderlich
•• Kosten für die verbrauchte Bandbreite können entstehen
•• Eventuell komplexe Administration des Servers erforderlich (Cache Header, Metada-
ten)
•• Daten meist nur an einem Standort verfügbar und somit ausfallgefährdet
Plug-in-Entwicklung mit jQuery 232 – Willkommen in der Welt von jQuery
2.1.2 Verwendung eines CDN
Neben der vorgestellten Möglichkeit, die nötigen Dateien der Bibliothek zusammen mit
der eigenen Applikation auszuliefern, gibt es außerdem die Möglichkeit, jQuery von ei-
nem Content Delivery Network (CDN) zu beziehen.
Was ist ein CDN?
Hinter dem Begriff Content Delivery Network (auch Content Distribution Network) ver-
birgt sich ein Netzwerk mehrerer Serversysteme, um in großen Mengen Daten über das
Internet auszuliefern. Meist handelt es sich hier um große Mediendateien wie Audio- oder
Videodateien. Jedoch auch kleinere Elemente wie die jQuery-Bibliothek sind darüber ver-
fügbar. Wer das Wort CDN noch nie gehört hat, kann eventuell mit dem momentan ge-
prägten Begriff „Cloud Storage“ etwas anfangen. Im Prinzip handelt es sich dabei um die
gleiche Technik.
Neben Firmen wie Akamai, Amazon und Rackspace, die sich darauf spezialisiert haben,
CDNs auf Kundenwunsch bereitzustellen, besitzen auch viele große Firmen, wie Google
oder Microsoft ihre eigenen CDN-Serverfarmen für den internen und externen Einsatz.
jQuery aus der Wolke
jQuery kann und darf von einigen der großen CDNs direkt in die eigene Webapplikation
eingebunden werden. Der Aufwand, eine eigene Kopie der Bibliothek bereitzustellen und
zu pflegen, entfällt somit.
Als konkretes Beispiel wird im Folgenden Googles CDN für AJAX APIs, das Google Li
brary API2,vorgestellt .
Hinweis: Auch andere große Anbieter wie Microsoft bieten jQuery zur direkten
Verwendung aus ihren CDNs an. Eine Einbindung von den Projektservern der Bibliothek
ist ebenfalls möglich. Unter http://docs.jquery.com/Downloading_jQuery#CDN_
Hosted_jQuery finden Sie detaillierte Informationen und weitere alternative Quellen.
Neben der jQuery-Bibliothek stellt Google auch noch diverse weitere Bibliotheken bereit
wie Dojo, Ext.JS und prototype. Der Suchmaschinenriese kümmert sich außerdem um Ak-
tualität seiner Downloadangebote und ist bemüht, auch alte Versionen stets verfügbar zu
halten. Alles in allem stellt Googles Library API also einen sehr nützlichen Verbündeten
bei der Entwicklung von größeren JavaScript-Projekten dar. Listing 2.2 zeigt, wie jQuery
mit dessen Hilfe direkt in ein Projekt eingebunden werden kann.
2 Informationen über das Google Library API finden Sie auch bei Google unter https://code.google.com/
apis/libraries/.
24Herunterladen und Einbinden von jQuery
Minimal jQuery environment loaded from the Google CDN
…
Listing 2.2: Einsatz der aktuellen jQuery-Version aus dem Google CDN
Die Integration der Bibliothek könnte nicht einfacher sein. Eine Änderung des URL in-
nerhalb des verwendeten script-Elements reicht aus, um die Auslieferung an Google zu
übertragen.
Profitipp: Wie zu erkennen ist, besteht der URL zum Abruf der Bibliothek aus
dem Google CDN aus verschiedenen Elementen. Im Besonderen fällt die Trennung
zwischen Bibliotheksname, Versionsnummer und Quelltextversion durch Pfadtrenner
(/) auf. Grundsätzlich gilt: Jedes dieser Elemente kann ausgetauscht werden, um eine
andere Bibliothek, eine andere Version oder eine andere Quelltextausprägung zu la-
den. Das Ersetzen von jquery.min.js durch jquery.js im Beispiel aus Listing 2.2
würde die DEVELOPMENT-Version statt der Produktionsversion von den Google-Servern
herunterladen. Eine besondere Fähigkeit kommt hierbei der Versionsnummer zu. Sie
wird jeweils automatisch auf die aktuellste Version innerhalb des gegebenen Bereichs
aufgerundet. Die Angabe von 1.4.2 liefert also exakt das Release 1.4.2, wohingegen
die Angabe von 1.4 immer das aktuellste Release der 1.4er Serie anfordern würde.
Eine schlichte Angabe von 1 verweist automatisch auf die aktuellste jQuery-Version aus
der ersten Generation. In der Praxis hat es sich für viele Projekte als sinnvoll erwiesen
den aktuellen Entwicklungszweig von jQuery zu spezifizieren, aber nicht die vollständige
Versionsnummer zu verwenden. Also im aktuellen Beispiel 1.4 anstelle der 1.4.2. Auf
diese Weise fließen Bugfix- und Sicherheitspatches automatisch in Ihre Applikation ein,
sobald sie verfügbar sind.
Hinweis: Neben der Möglichkeit, über das script-Element direkt Bibliotheken des
Google Library API einzubinden, gibt es auch einen JavaScript Loader von Google. De-
tails dazu finden Sie in der entsprechenden Dokumentation: https://code.google.com/
apis/libraries/devguide.html
Plug-in-Entwicklung mit jQuery 252 – Willkommen in der Welt von jQuery
Vorteile
•• Bibliothek oftmals bereits im Cache der Browser, durch wiederholten Einsatz auf vielen
Seiten
•• Keine Kosten für übertragene Datenvolumina
•• Korrekte Cache-Header und Metadaten ohne Administrationsaufwand
•• Keine Pflege bei Sicherheitsupdates oder Bugfixes der Bibliothek nötig
•• Auslieferung aus einem Multi-Server-Netzwerk mit hoher Verfügbarkeit und örtlicher
Abhängigkeit
Nachteile
•• Keine Kontrolle über ausgelieferten Quelltext
•• Keine Kontrolle über die Integration von Sicherheitsupdates oder Bugfixes
•• Mögliches Sammeln von statistischen Daten durch einen potenziellen Mitbewerber
•• Keine Kontrolle über die Verfügbarkeit des Auslieferungssystems
2.1.3 Welcher Weg ist der bessere?
Leider kann die Frage, welcher Auslieferungsweg zu bevorzugen ist, nicht pauschal
beantwortet werden. Sowohl projektabhängig als auch nach dem persönlichen Empfin-
den, muss von jedem Anwender selbst bewertet werden, welcher der für ihn und sei-
ne Applikation beste Weg ist. Für diverse Projekte des Autors hat sich die Auslieferung
über Googles Library API jedoch als vorteilhaft erwiesen. Oft werden die Ladezeiten der
Applikationen dramatisch verkürzt, da sich die nötigen Dateien bereits im Cache des
Browsers befinden. Des Weiteren konnte der Autor noch in keinem seiner Projekte ein
Problem feststellen, das auf Verfügbarkeitsprobleme von Googles CDN zurückzuführen
war.
2.2 jQuery vs. JavaScript
Bevor die einzelnen Fähigkeiten von jQuery dargestellt werden, gibt dieses Kapitel
zunächst einen Einblick in die allgemeinen Vorteile von jQuery gegenüber nativem Ja-
vaScript. Durch diesen Schritt möchte der Autor Ihnen einen kleinen Einblick in die Ele-
ganz von jQuery geben, die ihn täglich aufs Neue begeistern kann.
jQuery verspricht, die Art zu verändern, wie Entwickler JavaScript schreiben3. Das ist
nicht nur ein Werbeslogan, sondern eine Tatsache. Den Unterschied verdeutlichen die fol-
3 Slogan von der jQuery-Webseite: „jQuery is designed to change the way that you write JavaScript“
26Sie können auch lesen
