Wie kann ich überprüfen, ob bereits eine JS-Datei enthalten ist?

Question

Ich habe mein Javascript in verschiedene Dateien aufgeteilt. Ich möchte verhindern, dass Javascript-Dateien doppelt geladen werden. Wie kann ich das machen?

Answer 1

Ohne ein Framework (das ich kenne), können Sie nur tun, indem Sie überprüfen, ob eine bestimmte Variable im globalen Bereich bereits deklariert wurde.

Sie könnten eine Variable var include1 = true; innerhalb include1.js, erklären und etwas tun, wie

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

Answer 2

Sie sie nicht zweimal enthalten. Sie sind es schließlich, die das Includes machen.

Wenn Sie diese Einbeziehungen dynamisch ausführen, können Sie jedoch überprüfen, ob eine globale Funktion oder ein Objekt vom Skript festgelegt wurde. Zum Beispiel, wenn ich das Skript unten in einer Datei haben:

Foo = function() {}; 

Und dann schließe ich es wie folgt aus:

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

Davor Script-Tag vom Browser analysiert wird, Foo ist undefined. Nachdem das Tag verarbeitet wurde, ist Foo ein Function. Sie könnten eine Logik verwenden, die darauf basiert, um zu bestimmen, ob Sie eine Datei hinzufügen oder nicht.

Answer 3

Hier ist ein Test, um zu sehen, ob ein Skript basiert auf dem Weg in die js-Datei enthalten ist:

für alle Skripte

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; 
} 

Es funktioniert nicht durch AJAX geladen, wenn Sie es ändern möchten, wenn Sie haben JSONP-Code ausgeführt.

Answer 4

Sie müssten dies manuell nachverfolgen und sicherstellen. UweBs Vorschlag würde auch funktionieren.

Sie können sich auch Require.js anschauen, die Ihnen helfen könnte, Ihre Dateien zu organisieren.

Answer 5

Ich habe das auf mehrere Arten angegangen.

1 - durch ein neues leeres Array in meiner Basisdatei oder ein Skript zu erklären, die immer geladen werden, dh die Haupt-Seite in meinem Fall index.php und Triggern auf Last laufen,

var scriptsLoaded = new Array(); 

Dann öffne ich als eine öffnende Zeile in jedem dynamisch geladenen Skript, indem ich einen benutzerdefinierten String-Wert zu diesem Array hinzufüge. Ich habe die Namenskonvention verwendet, die einfach der Dateiname ist. Zum Beispiel der erste Zeile in einem dynamischen Laden Skript ist

scriptsLoaded[] = 'thisScriptName.js'; 

Dann ist es ein ziemlich einfacher Fall zu prüfen, ob der Dateiname existiert.

Dies funktioniert auch für Ajax geladene Skripte.Und scheint in Bezug auf das Skript Fein die meiste Zeit zu arbeiten tatsächlich

und 2, eine weitere Verbesserung der Methode geladen ist, eine andere Zeile am unteren Rand anzuhängen, eine benutzerdefinierte Funktion auf die Datei zB js geladen:

function JSthisScriptName() {return true} 

Von hier aus einem einfachen try-catch Ansatz überprüfen kann, ob das Skript tatsächlich vor der Ausführung geladen wird und wenn kein Timeout

ich schätze setzen sie diese nicht vollständig automatisiert ist, aber es scheint robust. Wenn Sie die Kürze dieses Artikels entschuldigen möchten, ist eine andere Methode, die ich verwendet habe, eine Checker-Funktion anstelle der externen Skriptfunktion aufzurufen, bei der der Checker den Funktionsnamen und den Skriptnamen übernimmt und prüft ob es verwendbar ist, bevor ein Timeout versucht und eingestellt wird und und das Skript geladen wird