[JS] js bestanden via functie includen lukt niet

[Reveller]

Ik wilde via onderstaand scriptje bepaalde javascript bestanden inladen:

JavaScript:

/**
 * Dynamically include js files
 */ 
function include(file) {
  document.write('<scr' + 'ipt language="javascript" src="' + file + '"></scr' + 'ipt>');
}

include('system/js/generic.js');
include('system/js/remote.js');
include('system/js/phpjs.js');

addLoadEvent(collapseAutoAttach);

var http = createRequestObject();
var _GET = readGet();
var _COOKIE = readCookie();

Dit scriptje staat in het bestand main.js en wordt op elke pagina aangeroepen in de head:

HTML:

<script type="text/javascript" src="system/js/main.js"></script>

De functie addLoadEvent (regel 12) is gedefinieerd in het bestand generic.js. Dat bestandje wordt goed ingeladen, want als ik generic.js begin met een alert(), krijg ik deze alert te zien als ik een pagina laad. Toch krijg ik een foutmelding:

Error: addLoadEvent is not defined
Source File: http://localhost/vrijdag/system/js/main.js
Line: 12

Wat ik begrepen heb, is dat een browser javascript interpreteert in de volgerde waarlangs het binnenkomt. Op het moment dat ik addLoadEvent in regel 12 aanroep, is de functie al geinclude in de regels daarboven. Wie waar het dan toch verkeerd gaat?

[crisp]

Na je 'includes' je script-tag afsluiten en een nieuwe openen

[Reveller]

Twee vragen hierover:

• waarom werkt het dan wel? Waarom kan niet alle javascript binnen 1 set <script> tags staan?
• ik kan alleen een script tag afsluiten en de rest tussen nieuwe tags zetten, als ik de code uit de TS op een html pagina tussen <script> tags zet. De bedoeling was juist om dat niet te hoeven doen: op de eigenlijke html pagina hoef ik alleen main.js aan te roepen en van daaruit wordt de rest ingeladen. Is er geen workaround dat ik EN mijn include functie kan gebruiken EN alle code in main.js kan laten staan? (hierop kan ik het antwoord ws. zelf verzinnen als ik antwoord op vraag 1 heb gehad )

[ Voor 3% gewijzigd door Reveller op 31-05-2006 17:00 ]

[crisp]

De reden: de document.write's worden wel uitgevoerd, maar wat je daar in je document wegschrijft zal pas geparsed kunnen worden wanneer de javascript parser klaar is. Dan pas wordt de controle weer overgegeven aan de HTML parser die vervolgens de javascripts inlaadt en parsed, zo werkt het en niet anders.
Als je inline in hetzelfde scriptblock arbitraire code wilt inladen en meteen uitvoeren dan kan je denk ik het beste een synchroon xmlhttprequest doen en het resultaat daarvan (script) door eval() heenhalen

[Reveller]

crisp schreef op woensdag 31 mei 2006 @ 19:27:
[...] een synchroon xmlhttprequest doen en het resultaat daarvan (script) door eval() heenhalen

Als ik het goed begrijp, zijn dat een aantal extra requests per pageview en is caching bij de client dus niet mogelijk. Immers, het zijn geen .js bestanden die naar de client gestuurd worden, maar een stream aan javascript die telkens opnieuw gegenereerd wordt. Klopt dat en hoe nadelig schat je dit in?

[crisp]

Dat klopt en hoe nadelig het is ligt aan het aantal requests (een browser handelt er default maximaal 2 tegelijk af, dus je krijgt queueing) en de grootte van de files (en eventuele gebruikte compressie).
common way om dit op te lossen is door ipv een main.js bijvoorbeeld een main.php te includen, waarbij main.php de javascript dynamisch samensteld door de files te combineren en voor caching headers te zorgen.