nicht angemeldet
(YEPNOPE) Warum wird nur eine Ausgabe in der Konsole gemacht?
Hallo,
ich versuche mich gerade mal in yepnope.js einzuarbeiten.
Eingebunden wird das bei mir im head:
<script src="js/vendor/yepnope.1.5.4-min.js"></script>
<script src="js/yepnope.init.js"></script>
und in der yepnope.init.js möchte ich 2 Javascript-Dateien laden: jquery-1.11.0.min.js und main.js
Die Datei yepnope.init.js sieht so aus
yepnope([{
load: ['js/vendor/jquery-1.11.0.min.js', 'js/main.js'] ,
callback: {
"jquery-1.11.0.min.js": function () {
console.log("jquery loaded!");
},
"main.js": function () {
console.log("main loaded!");
}
}
}]);
Beide Ressourcen werden korrekt geladen, in der Konsole erscheint aber nur die Meldung "jquery loaded!". Kann mir jemand erklären warum?
Wenn ich "console.log" durch "alert" tausche, kommt auch nur ein alert.
Danke & Gruß
Ole
-
Hallo,
<script src="js/vendor/yepnope.1.5.4-min.js"></script>
<script src="js/yepnope.init.js"></script>
> und in der yepnope.init.js möchte ich 2 Javascript-Dateien laden: jquery-1.11.0.min.js und main.js Wieso verwendest du Yepnope auf diese Weise? Hier werden zwei Scripte asynchron geladen und synchron ausgeführt, dann werden zwei weitere Scripte asynchron geladen und synchron ausgeführt. Wenn du dir in dem Fall yepnope sparst, müssen nur zwei Ressourcen geladen werden. Yepnope bieten bei diesem Setup nur Nachteile. Die Scripte am Ende des bodys zu laden, ist immer noch das einfachste und beste: ~~~html <body> <!-- Inhalt --> <script src="js/vendor/jquery-1.11.0.min.js"></script> <script src="js/main.js"></script> </body> </html>Verbessern kann man das höchstens dadurch, dass man alle Scripte in eine Ressource bündelt.
Yepnope ist sinnvoll, wenn man fallweise Scripte nachladen will. Für das Laden von jQuery + Main-Datei ohne tatsächliche Feature-Tests ergibt Yepnope wenig Sinn.
yepnope([{
load: ['js/vendor/jquery-1.11.0.min.js', 'js/main.js'] ,
callback: {
"jquery-1.11.0.min.js": function () {
console.log("jquery loaded!");
},
"main.js": function () {
console.log("main loaded!");
}
}
}]);Die URLs müssen identisch und vollständig sein, dann funktioniert es in meinen Tests: ~~~javascript yepnope({ load: ['js/vendor/jquery-1.11.0.min.js', 'js/main.js'] , callback: { 'js/vendor/jquery-1.11.0.min.js': function() { … }, 'js/main.js': function() { … } } });Wenn du die URLs nicht zweimal ausschreiben willst, verwende die Object-Notation, um einen Kurznamen zu verwenden:
yepnope({ load: { jquery: 'js/vendor/jquery-1.11.0.min.js', main: 'js/main.js' }, callback: { jquery: function() { … }, main: function() { … } } });Beide Ressourcen werden korrekt geladen, in der Konsole erscheint aber nur die Meldung "jquery loaded!".
Es wundert mich, dass yepnope überhaupt den ersten Callback aufruft! Logisch ist das nicht.
Mathias
-
Hi Mathias,
Wieso verwendest du Yepnope auf diese Weise?
Weil ich mich in das Thema einarbeiten will. Und da ist es wenig sinnvoll gleich mit einem Projekt mit Dutzenden js- und css-Files zu arbeiten, wenn auch erstmal zwei reichen um zu verstehen wie es funktioniert.
Die URLs müssen identisch und vollständig sein, dann funktioniert es in meinen Tests:
Das wundert mich jetzt ein wenig, denn in der Doku steht
While you can still set up your own labels for resource callbacks, yepnope now automatically creates keys for you, derived from the basename of the resource. For example, if you were loading https://my-cdn.com/jquery-ui.min.js?v=1.8.16, the derived key would be jquery-ui.min.js.
Direkt über dem Beispielcode:
yepnope({ load: ["https://my-cdn.com/jquery.min.js?v=1.7.1", "https://my-cdn.com/jquery-ui.min.js?v=1.8.16"], callback: { "jquery.min.js": function () { console.log("jquery loaded!"); }, "jquery-ui.min.js": function () { console.log("jquery-ui loaded!"); } } });Bis auf die Pfade (relativ/absolut) und die Namen der Dateien ist mein Übungsscript doch vom Aufbau identisch, warum ist es dann falsch? Verstehe ich die Doku und die Beispiele schon nicht richtig?
Btw. auch das Beispiel liefert mir nur eine Ausgabe in der Konsole.
Danke & Gruß
Ole-
Das muss ein Fehler in yepnope sein. Vielleicht wurde der schon gemeldet.
Yepnope findet den Original-Handler nicht, wenn load als Array und callback als Object angegeben ist. Es wrappt den letzten Callback, damit letztlich complete ausgeführt wird. Es versucht den Original-Handler unter der Eigenschaft '1', nicht 'main.js' zu finden.
https://github.com/SlexAxton/yepnope.js/blob/master/yepnope.js#L467-L473
cbRef ist das callback-Konfigurationsobjekt { 'main.js: function(){…}, … }
callbackKey is '1', sollte 'main.js'
cbRef[callbackKey] ergibt demnach undefined
innerCb ist daher undefined und der Original-Handler wird nicht aufgerufenDa die Möglichkeit besteht, selbst Identifier anzugeben, würde ich das auch tun. Die URLs ändern sich häufig, die Identifier nicht so häufig. Es ist i.d.R. sinnvoll, für solche Konfigurationen eigene Kurzbezeichner zu verwenden.
Das Mischen von Arrays und Objects halte ich für unsauber. Ich weiß nicht, warum Yepnope hier mehrere verschiedene Schreibweisen erlaubt. Das erhöht nur die Komplexität. Und wie man sieht, ist es auch nicht so einfach fehlerfrei zu implementieren.
Mathias
-
Hallo Mathias,
vielen Dank. Hat mich ein gutes Stück weiter gebracht.
Gruß
Ole-
Hi!
vielen Dank. Hat mich ein gutes Stück weiter gebracht.
Kein Wunder:
Javascript soll bald in molilyScript umbenannt werden...
;)
--
Signaturen sind bloed.
-
-
-
-