javascript - Hvordan inkludere en js-fil i en annen js-fil?

Hvordan kan jeg inkludere en js-fil i en annen js-fil, for å holde seg til DRY-prinsippet og unngå duplisering av kode.

Svar #1

Du kan bare inkludere en skriptfil i en HTML-side, ikke i en annen skriptfil. Når det er sagt, kan du skrive JavaScript som laster inn ditt «inkluderte» skript i samme side:

var imported = document.createElement('script');
imported.src = '/path/to/imported/script';
document.head.appendChild(imported);

Det er stor sjanse for at koden din er avhengig av skriptet du "inkluderte", men i så fall kan det feile fordi nettleseren vil laste det "importerte" skriptet asynkront. Det beste du kan gjøre er rett og slett å bruke et tredjepartsbibliotek som jQuery eller YUI, som løser dette problemet for deg.

// jQuery
$.getScript('/path/to/imported/script.js', function()
{
    // script is now loaded and executed.
    // put your dependent JS here.
});

Svar #2

Jeg er uenig i document.write-teknikken (se forslag fra Vahan Margaryan). Jeg liker document.getElementsByTagName('head')[0].appendChild(...) (se forslag fra Matt Ball), men det er ett viktig problem: rekkefølgen på skripteksekvering.

Nylig har jeg brukt mye tid på å gjenskape et lignende problem, og selv den mye brukte jQuery-pluginen bruker samme teknikk (se kilde her) for å laste filene, men andre har også rapportert problemet. Tenk deg at du har et JavaScript-bibliotek som består av mange skript, og én loader.js laster alle delene. Noen deler er avhengige av hverandre. Tenk deg at du inkluderer et annet main.js-skript per <script> som bruker objektene fra loader.js umiddelbart etter loader.js. Problemet var at noen ganger blir main.js kjørt før alle skriptene er lastet av loader.js. Bruken av $ (document).ready(function() {/*code here*/}); inne i main.js skriptet hjelper ikke. Bruken av kaskaderende onload hendelsesbehandler i loader.js vil gjøre skriptlastingen sekvensiell i stedet for parallell, og vil gjøre det vanskelig å bruke main.js skriptet, som bare bør være inkludert et sted etter loader.js.

Ved å gjenskape problemet i mitt miljø, kan jeg se at **rekkefølgen på utførelsen av skriptene i Internet Explorer 8 kan variere ved inkludering av JavaScript**. Det er et veldig vanskelig problem hvis du trenger å inkludere skript som er avhengige av hverandre. Problemet er beskrevet i Laste Javascript-filer parallelt, og det foreslåtte midlertidige tiltaket er å bruke document.writeln:

document.writeln("<script type='text/javascript' src='Script1.js'></script>");
document.writeln("<script type='text/javascript' src='Script2.js'></script>");

Så i tilfellet med «skriptene lastes ned parallelt, men kjøres i rekkefølgen de skrives til siden», etter å ha byttet fra document.getElementsByTagName('head')[0].appendChild(...) til document.writeln, hadde jeg ikke sett problemet lenger.

Så jeg anbefaler at du bruker document.writeln.

OPPDATERT: Hvis noen er interessert, kan de prøve å laste (og laste på nytt) siden i Internet Explorer (siden bruker document.getElementsByTagName('head')[0].appendChild(...)-teknikken), og deretter sammenligne med den fiksete versjonen som brukte document.writeln. (Koden på siden er relativt rotete og er ikke fra meg, men den kan brukes til å gjenskape problemet).

Relaterte artikler