Home | 2009 | 10 | 01 | JQuery mini autoloader

JQuery mini autoloader

1. Oktober 2009 von pulponair

Häufig hat man auf umfangreicheren Websites das Problem, das es zahlreiche interaktive Elemente gibt, die in irgendeiner Form JS benötigen bzw. durch eigene Scripts gesteuert werden.

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

(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('