Reihenfolge beim Laden bzw. Ausführen von externen .js-Dateien

[EKKi]

Mahlzeit alle,

ich hätte da gerne mal ein Problem ... :-)

Für unser Intranet bin ich gerade dabei, einige Javascript-Funktionalitäten zu überarbeiten, zu zentralisieren und etwas schicker zu kapseln. Alle globalen Werte und Funktionen, die auf jeden Fall immer gebraucht werden, sollen dann in einer zentralen .js-Datei in einem Objekt vorliegen:

Datei "foo.js":
--------------------------------------------------

var foo = {  
  irgendwas: false,  
  nochwas:   ['bla', 'blubb'],  
  
  machwas: function() {  
// Irgendwelche Funktionen ...  
  },  
  
  init: function() {  
// An den window.onload-Handler hängen usw. ...  
  }  
};  
  
foo.init();

--------------------------------------------------

Funktioniert bestens.

Jetzt möchte ich dieses Objekt um zusätzliche Funktionen erweitern, die nicht immer auf jeder Seite benötigt werden. Ich habe sie je nach "Bereich" in verschiedenen Unterobjekten zusammengefasst und erweitere mein Objekt "foo" wie folgt:

--------------------------------------------------

foo.bar = {  
  mehr: 0,  
  noch_mehr: 'fasel',  
  
  dideldum: function() {  
// Zusätzliche Funktionen im Bereich "bar" ...  
  }  
};  
  
foo.baz = {  
  anderes: {hue: 'hott', hoppel: 'didoppel'},  
  
  tralala: function() {  
// Zusätzliche Funktionen im Bereich "baz" ...  
  }  
};

--------------------------------------------------

Dadurch wird die Datei "foo.js" einerseits immer größer, andererseits wäre es sinnvoller, wenn der Code für die einzelnen "Bereiche" in verschiedenen Datei vorliegen würde - gerade im Hinblick darauf, dass mehrere Entwickler gleichzeitig damit arbeiten sollen (Subversion usw.).

Ich habe also versucht, den Code wie folgt aufzuteilen:

Datei "foo.js":
--------------------------------------------------

var foo = {  
// Inhalt wie oben ...  
};

--------------------------------------------------

Datei "bar.js":
--------------------------------------------------

foo.bar = {  
// Inhalt wie oben ...  
};

--------------------------------------------------

Datei "baz.js":
--------------------------------------------------

foo.baz = {  
// Inhalt wie oben ...  
};

--------------------------------------------------

Diese werden dann folgendermaßen in den HTML-Dokumenten eingebunden:

Immer:
--------------------------------------------------
<script type="text/javascript" src="foo.js"></script>
--------------------------------------------------

Je nach Bedarf:
--------------------------------------------------
<script type="text/javascript" src="bar.js"></script>
--------------------------------------------------
bzw.
--------------------------------------------------
<script type="text/javascript" src="baz.js"></script>
--------------------------------------------------

Und jetzt treten - zumindest im IE6 [*] - Probleme auf:

--------------------------------------------------
Zeile:   11
Zeichen: 1
Fehler:  'foo' ist undefiniert
Code:    0
--------------------------------------------------

Der Fehler weist (in der für den IE6 typischen Klarheit) auf die Zeile in der Datei "bar.js" hin, in der folgendes steht:

--------------------------------------------------
foo.bar = {
--------------------------------------------------

Ich gehe also davon aus, dass der IE6 die Datei "bar.js" geladen hat und ausführt, bevor er die Datei "foo.js" geladen und ausgeführt hat. In dem Fall existiert das Objekt "foo" natürlich noch nicht.

Im Firefox scheint die Reihenfolge des Ladens und Ausführens diejenige zu sein, in der die Dateien auch im HTML-Dokument notiert sind - im IE6 offenbar nicht immer zwangsläufig.

Wie kann ich erreichen, dass die Datei in der Reihenfolge geladen bzw. ausgeführt werden, die sicherstellt, dass das zugrundeliegende Objekt bereits existiert?

MfG,
EKKi

[*] Ja, ich weiß ... der IE6 ist aber leider hausweit als Browser ausgerollt bzw. vorgeschrieben. Dass das suboptimal ist, ist mir und auch anderen bewusst. Wir können das aber nicht ändern - Politik.