(jQuery) Mehrere JS-Files laden und aufrufen

[DuckDuckGoose]

Hallo zusammen,

ich versuche mich gerade an ein wenig OOP mit Javascript. Deshalb habe ich meine Klassen in einzelne JS-Dateien ausgelagert. Wenn ich die via <SCRIPT>-Tag in das HTML-Dokument einbinde, erkennen sie sich gegenseitig nicht ( "..." is not defined).
Da ich für die Fütterung mit Daten sowieso jQuery nutze, habe ich es mit diesem Netzfund versucht:

$().ready(function() {  
	$.getScript('team.js')  
		.pipe($.getScript('league.js'))  
			.pipe($.getScript('xDomain.js'))  
				.pipe($.getScript('debug.js', {}, function()  
				{  
					debug.debug();  
				}));  
});

Wenn ich nach dem Laden die Skriptliste in Firebug einsehe, scheine die vier Dateien geladen zu werden, trotzdem erhalte ich stets "debug is undefined".

Hat jemand eine Idee dazu?

Gruß Patrick

[Martin Rettberg]

Hi,

kannst du ein einfaches Problem mit dem Scope bereits ausschließen?

Martin

[DuckDuckGoose]

Hi,

kannst du ein einfaches Problem mit dem Scope bereits ausschließen?

Martin

Ich glaube schon. Der (gekürzte) Inhalt der debug.js:

function debug()  
{  
	window.alert("Up and running");  
}

Zumindest diese Meldung hätte ich erwartet, habe ich zu Debuggingzwecken als erste Zeile eingefügt. Da ich die nicht erhalte, muss ich davon ausgehen, dass debug() nicht ausgeführt wird.

Gruß Patrick

[Martin Rettberg]

Hi,

kannst du debug.debug() denn in der Konsole aufrufen, wenn du dein Script ganz normal per script-Tag in die Seite lädst?

Martin

[DuckDuckGoose]

Hi,

kannst du debug.debug() denn in der Konsole aufrufen, wenn du dein Script ganz normal per script-Tag in die Seite lädst?

Martin

Ja. Bzw. nur "debug()", aber das sollte ja dann auch so sein.

Aber diese Konsoleneingabe hatte ich bisher nie bemerkt. Ganz praktisch.

Gruß Patrick

[Martin Rettberg]

Hi,

Ja. Bzw. nur "debug()"

Das wäre meine zweite Vermutung gewesen.
Laut dem Snippet in deinem Eingangspost rufst du deine debug-Funktion ja als Methode von dem Objekt "debug" auf, was, wenn ich dich richtig verstehe, gar nicht existiert?!
Zu deinen jQuery-Fehlern: benutzt du die aktuelle Version von der offiziellen Seite?

Martin

[DuckDuckGoose]

Hi Martin,

Hi,

Ja. Bzw. nur "debug()"

Das wäre meine zweite Vermutung gewesen.
Laut dem Snippet in deinem Eingangspost rufst du deine debug-Funktion ja als Methode von dem Objekt "debug" auf, was, wenn ich dich richtig verstehe, gar nicht existiert?!

Das ist richtig, wenn ich da drüber nachdenke. Habe ich mittlerweile aber längst entfernt und durch einen einfachen Methodenaufruf ersetzt.
Oder sollte ich vllt eine "Klasse" debug erstellen und damit arbeiten?

Zu deinen jQuery-Fehlern: benutzt du die aktuelle Version von der offiziellen Seite?

Ja, habe ich am WE geladen und lokal gespeichert (momentan bricht mein WWW oft zusammen, da wäre ich sonst gelähmt). Version 1.9.0, aber ich erkundige mich gleich, was aktuell ist.

Gruß Patrick

[Martin Rettberg]

Hi,

Oder sollte ich vllt eine "Klasse" debug erstellen und damit arbeiten?

Wenn ich mit JavaScript was über mehrere Dateien hinweg machen und es nicht einfach so "hinrotzen" würde, dann würde ich dem ganzen wohl einen eigenen Namensraum geben:
var ns = ns || {};

Packst du das oben in jede deiner JavaScript-Dateien, dann bekommt ns entweder das Objekt ns aus einer deiner anderen Dateien (wenn sie geladen wurde) zugewiesen, oder aber es wird per Objekt-Literal ein neues Objekt erzeugt, was du dann beliebig erweitern kannst:
ns.debug = function(){ alert('fnord!') };

Das ist aber alles eine Frage des persönlichen Geschmacks und löst dein Problem auch nicht wirklich.
An deiner Stelle würde ich schon alleine aus Performancegründen der Webseite alle JS-Dateien im build-Prozess zu einer Datei zusammenfügen.
Sowohl der Google Closure Compiler als auch UglifyJS können das.

Martin

[DuckDuckGoose]

Hui,
das muss ich erstmal sacken lassen. Zu viel Neuinformation. :) Namensraum, Literale ... ich muss mich erst etwas einlesen. Wird ja nicht unmöglich sein.

Die Performance indes ist mir schnuppe, das läuft nur lokal, um mir ein paar Daten aus HTML-Seiten zu ziehen. Rational betrachtet wäre es jetzt sogar schon schneller gewesen, ich hätte die Daten abgeschrieben und ins Excel gepackt.
Aber immer dieser Ehrgeiz... ;)

Gruß Patrick

[DuckDuckGoose]

Guten Morgen,

ich habe jetzt doch noch mal ein paar Zeilen dazu gelesen.

Wenn ich mit JavaScript was über mehrere Dateien hinweg machen und es nicht einfach so "hinrotzen" würde, dann würde ich dem ganzen wohl einen eigenen Namensraum geben:
var ns = ns || {};

Packst du das oben in jede deiner JavaScript-Dateien, dann bekommt ns entweder das Objekt ns aus einer deiner anderen Dateien (wenn sie geladen wurde) zugewiesen, oder aber es wird per Objekt-Literal ein neues Objekt erzeugt, was du dann beliebig erweitern kannst:
ns.debug = function(){ alert('fnord!') };

Mhm, also den Einsatz von Namensräumen, wie er hier erklärt wird, finde ich schon einleuchtend. Wie du schon gesagt hast, das löst mein Problem nicht.

Und den Einsatz der beiden Striche in deinem ersten Beispiel verstehe ich nicht ganz. In geschriebener Langform: Der lokalen Variable ns wird entweder ns zugewiesen, sofern existent, ansonsten ein leeres Literal {}. Richtig?

Ich habe hier zwei Klassen (OT: nennt man die  in Javascript überhaupt so? ) und eine main-Klasse, von daher sind Namensräume erst mal zweitrangig, zumindest für die Struktur.
Aber immerhin gut zu wissen, dass sich sowas auch mit Javascript realisieren lässt.

Sowohl der Google Closure Compiler als auch UglifyJS können das.

Danke für die Links, an sowas dachte ich noch nie, auch wenn mir die Idee durch die minimalisierten Versionen von jQuery zB bekannt war.

Gruß Patrick

[DuckDuckGoose]

Ich weite meine eigene Antwort mal etwas aus. Wie ich hier schon beschrieben habe, tut das Skript ja etwas mehr als nur den Alert ausgeben.

Wenn ich jQuery und debug.js per Skript-Tag einbinde, funktioniert das überhaupt nicht. Rufe ich debug() auf, wird der Aufruf von " $().getJSON(...) " quittiert mit

TypeError: $(...).getJSON is not a function
debug()debug.js (Zeile 15)
$().getJSON(yahooUrl, {a: season, b: group},  function(data) {

Beim Laden der Seite bringt mir Firebug einen Fehler im jQuery und auch Eclipse schmettert mir zwei Syntax-Fehler darin raus. Ergo glaube ich fast schon, dass die jQuery korrupt ist.

Gruß Patrick

[henf]

servus DuckDuckGoose,

Wenn ich nach dem Laden die Skriptliste in Firebug einsehe, scheine die vier Dateien geladen zu werden, trotzdem erhalte ich stets "debug is undefined".

Der Fehler kann auch vorkommen, wenn dein Objekt einen Fehler enthält. Vielleicht hast du ein Komma zwischen den Eigenschaften vergessen oder ne Methode falsch deklariert.

henf

[DuckDuckGoose]

Hallo,

momentan ist das File noch sehr übersichtlich. Und selbst, wenn ich den Code bis auf das Meldefenster rauskürze, passiert nichts.

function debug()  
{  
	window.alert("Up and running");  
	selectors = [["04M","E"],["05M","B"],["06M","C"],["07M","C"],["08M","B"],["09M","C"],["10M","C"],["11M","B"],["12M","B"]];  
	  
	for (var i=0; i<9; i++)  
	{  
		var season = selectors[i][0];  
		var group = selectors[i][1];	  
		  
		for (var d=0; d<6; d++)  
		{	  
			var yahooUrl = "www.deineurl.de/functionreturnsJSON.php"  
			$.getJSON(yahooUrl, {a: season, b: group},  function(data) {  
				var r = data.count / 5;  
				window.alert(r);  
				  
			});  
		}  
	}  
}

Oder meintest du, dass ich die anderen überprüfen soll?

Zumindest im jquery.js bemängelt Firebug "docElem is undefined" in Zeile 3811. Wenn das bei der Fehlersuche hilft:

  
// Use a stripped-down slice if we can't use a native one  
try {  
  slice.call( docElem.childNodes, 0 )[0].nodeType;      // Zeile 3811  
} catch ( e ) {  
  slice = function( i ) {  
    var elem,  
    results = [];  
    for ( ; (elem = this[i]); i++ ) {  
      results.push( elem );  
    }  
    return results;  
  };  
} 

Gruß Patrick