Kruse-Net.dk

Med Web 2.0 og de deraf følgende Javascript biblioteker af stigende størrelse er der specielt én mangel i Javascript der så småt begynder at blive kritisk: mangelen på en “include” eller “import” erklæring, eller med andre ord at man ikke umiddelbart i én script fil kan angive at en anden skal indlæses. Min forrige artikel, “Leg med AJAX”, illustrerer det kun alt for tydeligt. Der skal inkluderes ikke mindre end 8 forskellige biblioteker for at få stillet funktionaliteten i det sidste til rådighed. Den stakkels udvikler der skal bruge Google biblioteket skal selv holde styr på at få de andre 7 inkluderet i den rette rækkefølge. Ekstrapoleres eksemplet til en hel Web 2.0 applikation kan det være over 100 script filer der på den måde skal holdes styr på. Noget må gøres!

Løsningen er nærliggende. AJAX giver netop mulighed for ikke blot at hente XML, men også Javascript og alt muligt andet. Så de samme teknologier som anvendes til at gøre en Web 2.0 side levende kan anvendes til at forenkle den. Løsningen findes i flere forskellige varianter. De fleste inkluderer på en eller anden måde eval() funktionen, hvilket jeg har meget svært ved at finde elegant – den har aldrig samme effekt som at loade filen på den “sædvanlige” måde, med et script tag. Den løsning jeg foreslår her er lidt anderledes, omend uhyre enkel: den efterspurgte Javascript kode hentes som tekst og indsættes i kroppen af et script tag, der derefter indsættes på siden. Browserens umiddelbare reaktion er at fortolke hele indholdet af script tag’et.

Nedenstående to knapper illustrerer teknikken. Klik på den første og du får en fejl (eller ingenting, hvis din browser ikke er sat op til at vise Javascript fejl). Klik på den anden medfører indlæsning af et script, hvorefter klik på første knap igen har et mere positivt resultat.

Script objektet der stiller løsningen til rådighed findes i filen Script.js. Det er ganske få linier der er tale om, så overhead’et er lille. Script objektet stiller udover funktionen require() også en funktion addAlias() til rådighed. Tanken er at en script fil der gør brug af Script.require() ikke nødvendigvis skal rettes blot fordi der flyttes rundt på de andre script-filer. Ved at referere til symbolske navne i stedet for absolutte stier er dette enkelt at håndtere. I praksis tænkes biblioteket anvendt på følgende måde på en given side:

<!-- Først loader vi Script biblioteket -->
<script type="text/javascript" src="Script.js"></script>

<!-- Derefter sætter vi alle nødvendige alias'er op (bør placeres i en ekstern script fil) -->
<script type="text/javascript">
  Script.addAlias("Prototype 1.4", "/javascript/lib/prototype.js");
  Script.addAlias("Prototype 1.5", "/javascript/lib/prototype-1.5.0_pre0.js");
  Script.addAlias("String extensions", "/javascript/ext/StringX.js");
  // ...
</script>

<!-- Så er vi klar! Nu kan vi inkludere script filer der indeholder noget svarende til: -->
<script type="text/javascript">
  Script.require("String extensions");
  
  alert("foobar".right(3)); // right funktionen defineres i String extensions
</script>

Der hører et par bemærkninger til løsningen her til sidst. Eftersom XmlHttpRequest anvendes til at hente de ønskede scripts ligger løsningen under for cross domain problematikken – det er kun muligt at bede om scripts fra samme server som siden kommer fra. Funktionen `require()` har en ekstra parameter “async” man kan sætte til “true” for at omgå dette problem. Resultatet er at der blot indsættes et script tag med en src attribut. Det har samme virkning, men som async parameteren angiver hentes scriptet asynkront, dvs. mens det eksekverende script kører videre. Alt hvad der loades på denne måde vil således først være tilgængeligt når den aktuelle script blok forlades (alle de browsere jeg har testet venter med at starte eksekveringen af næste script blok til de ønskede data er hentet). I nogle tilfælde er det brugbart.