Come posso verificare se un file JS è già stato incluso?

Question

Ho diviso il mio javascript in diversi file. Voglio evitare che i file javascript vengano caricati due volte. Come lo posso fare?

Answer 1

Non utilizzando qualsiasi quadro (che io sappia), è possibile farlo solo controllando se è già stata dichiarata una certa variabile nell'ambito globale.

Si potrebbe dichiarare una variabile var include1 = true; all'interno include1.js, e fare qualcosa di simile

if (window.include1 !== true) { 
    // load file dynamically 
} 

Answer 2

Non includere due volte. Sei tu che stai facendo gli include, dopotutto.

Se stai facendo queste inclusioni in modo dinamico, però, si può verificare se qualche funzione globale o di un oggetto è stata impostata dallo script. Per esempio, se ho lo script di seguito in un file:

Foo = function() {}; 

E poi mi includere in questo modo:

<script src="../foo.js"></script> 

Prima che tag script viene analizzato dal browser, Foo è undefined. Dopo l'elaborazione del tag, Foo è un Function. È possibile utilizzare una logica basata su questo per determinare se è necessario includere alcuni file o meno.

Answer 3

Ecco un test per vedere se uno script è stato incluso in base al percorso del file js:

function isScriptAlreadyIncluded(src){ 
    var scripts = document.getElementsByTagName("script"); 
    for(var i = 0; i < scripts.length; i++) 
     if(scripts[i].getAttribute('src') == src) return true; 
    return false; 
} 

Essa opererà per tutti gli script non caricato tramite AJAX, anche se si consiglia di modificarlo se hai il codice jsonp in esecuzione.

Answer 4

Si avrebbe bisogno di tenere traccia manualmente e assicurarsi. Anche il suggerimento di UweB funzionerebbe.

Si potrebbe anche verificare Require.js che potrebbero aiutare ad organizzare i file.

Answer 5

Ho affrontato questo in un paio di modi.

1 - dichiarando un nuovo array vuoto nel mio file di base o uno script che sarà sempre caricato, cioè la pagina principale nel mio caso index.php e innescando l'esecuzione del carico,

var scriptsLoaded = new Array(); 

Quindi, come una linea di apertura in ogni script caricato dinamicamente, comincio aggiungendo un valore di stringa personalizzato a questo array. Ho usato la convenzione di denominazione di questo semplicemente il nome del file. Ad esempio, la prima linea è in uno script di caricare in modo dinamico è

scriptsLoaded[] = 'thisScriptName.js'; 

allora è un caso abbastanza semplice di verificare se esiste il nome del file.

Questo funziona per ajax script caricati troppo.E sembra funzionare bene la maggior parte del tempo per quanto riguarda lo script effettivamente caricato

e 2, un ulteriore miglioramento al metodo è quello di aggiungere un'altra linea in basso, una funzione personalizzata per il file caricato js esempio:

function JSthisScriptName() {return true} 

Da qui un semplice approccio try-catch può verificare se lo script viene effettivamente caricata prima dell'esecuzione e se non impostare un timeout

apprezzo questo non è completamente automatizzato ma sembra robusto.

E, 3, se si scusa la brevità su questo, un altro metodo che ho usato è di chiamare una funzione di controllo invece della funzione di script esterno direttamente dove il correttore prende il nome della funzione e il nome dello script e gli assegni se è utilizzabile prima di provare o impostare un timeout e caricare lo script