jQuery-Logo

Zum Ende des Wochenendes noch ein kleiner und wahrscheinlich für erfahrene Programmierer bereits bekannter Kniff zu meinem Lieblingsframework jQuery.

Viele kennen das Problem: Man betreibt eine Seite mit vielen unterschiedlichen jQuery-Plugins oder möchte der Übersichtlichkeit halber seinen Code in mehrere Dateien auslagern. Nun ist jedoch oft der Fall, dass man so manches Plugin oder Script nur auf einigen Unterseiten benötigt. Je nach Seitengröße und Masse des Quelltextes kippt man dem Besucher also oft Dateien auf den Ladebalken, die er in vielen Fällen wahrscheinlich gar nicht braucht. Man kann die Einbindung der einzelnen Dateien natürlich auch Serverseitig über IF-Abfragen steuern, dass ist jedoch ziemlich unflexibel und mühselig.

Nun bin ich heute über die jQuery-Funktion getScript gestolpert. Die Funktion kann aus dem Code heraus an jeder beliebigen Stelle also zusätzliche JavaScript-Dateien abrufen und parsen. Es ist somit unter anderem möglich beim auftreten eines bestimmten Selektors (und nur dann) ein angelegtes Plugin einzubinden.

In der Praxis könnte das also z.B. so aussehen:

if($("div#accordion").length){
      $.getScript("/js/plugins/jquery.accordion.js");
}

Mit length überprüfen wir einfach ob der beschriebene Selektor irgendwo im DOM vorkommt, wenn ja wird das Plugin geladen und ausgeführt.

Für viele wohl nichts Neues, aber für Einsteiger vielleicht Hilfreich.



Kommentare zum Thema JavaScript-Dateien mit jQuery dynamisch nachladen:

1 | Dominik schrieb am 02.03.2008 um 22:27
Gravatar dieses Kommentators

Danke!

2 | Stefan David schrieb am 03.03.2008 um 00:04
Gravatar dieses Kommentators

Genau das konnte ich gerade gebrauchen, womit ich mich wohl als Einsteiger oute (zumindest was jQuery angeht). Die serverseitige if-Abfrage wurde langsam etwas unübersichtlich. Danke Christian.

3 | John schrieb am 08.05.2008 um 00:12
Gravatar dieses Kommentators

Das mit der IF-Abfrage und der Prüfung auf .length kannte ich noch nicht. Danke!

4 | Holger schrieb am 04.06.2008 um 10:51
Gravatar dieses Kommentators

Vielen Dank für den einfachen aber wirkungsvollen Tipp!

5 | alexander farkas schrieb am 13.07.2008 um 16:29
Gravatar dieses Kommentators

Hallo Christian,

das ganze ist leider so nicht immer empfehlenswert. Ich code gerade an einem Module-Loader für meine Firma (man frage mich nun nicht warum ich das am Sonntag tue :-)) und wollte ursprünglich ebenfalls getScript einsetzen.

Hierbei ist mir allerdings dann aufgefallen, dass jQuery bei getScript ein cachen der Daten verhindert (anhängen eines Timestamps). Hierdruch wird die Intention für den User alles schneller zu machen natürlich zu nichte gemacht:

Man sollte daher eher auf die allgemeine Ajax-Methode von jQuery zurückgreifen und die Cache-Option ausdrücklich auf true setzen:

$.ajax({ url: modulePath, complete: fn, dataType: ‘script’, cache: true
});

Für diese schreibweise gilt natürlich die selbe Warnung bzgl. Safari 2, wie für getScript (http://docs.jquery.com/Ajax/jQuery.getScript#urlcallback). Man sollte also eine Art Queue-System verwenden!

Ich habe mir noch nicht genau angeguckt, wie jQuery ein Script genau lädt (XHR, DOM-Injection…), aber hier könnte es evtl. ebenfalls zwischen den Browsern Unterschiede beim Cachen/Performance geben. Das muss man verifizieren. Falls du da was weisst, lass es mich wissen.

Grüsse
Alex

Kommentar-Feed für diesen Artikel


Kommentarfunktion für diesen Artikel geschlossen.



Blogsuche

RSS-Feeds

Plaste & Plastik

plasteundplastik.de - Das Geocaching-Weblog

Die Kategorien


Netz-Fundstücke


Meta / Propaganda