Auf einigen Seiten wird das Script x benötigt auf anderes das script y und auf wieder anderen beide. Sind einem Ladezeite egal, so bindet man einfach alle Script global ein und fertig. Wenn nicht kann man pro Seit auch nur die benötigten Scripte einbinden. Das ist allerdings zum einen sehr müssig und zum anderen auch fehleranfällig.

Es gibt aber auch die Option sich ein kleines Autoloader Script zu schreiben, das bestimmte Bibliotheken nur läd, wenn sie benötigt werden. Das “benötigt werden” kann z.B. durch das Vorkommen eines bestimmten Markup Elementes definiert werden (id, class, etc).

Anbei mal meine Minimallösung für ein solches Szenario:

jquery.autoloader.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

(function($) {
	$.autoloader = {
		includes : new Array(),
 
		include : function(file, triggerElement) {
			this.includes.push({'file': file, 'triggerElement': triggerElement});
		},
 
		load : function() {
			$(this.includes).each(function(index, item) {
				if (!$(item.triggerElement).length)
					return;
 
				$('head').append('<script type="text/javascript" src="' + item.file + '"><\/script>');
			});
		}
	};
})(jQuery);

test.js

1
2
3
4

$(function() {
	jQuery.autoloader.include('testFolder/alert1.js', '#triggerContainer');
	jQuery.autoloader.load();
});

Voila

Nachher:

Happy Birthday – ein Grund zum Feier!

Bis er dann am 19. Januar 2038 um 14 Minuten und 7 Sekunden nach 3 Uhr vorhersehbar versterben wird und damit zeitgleich das Ende der Welt einläutet.

Der letzte runde Geburtstag war übrigens der 18.3.2005  und zwar der 1111111111ste.