Wie füge ich eine js-Datei in eine andere js-Datei ein? [duplicate]

Wie kann ich eine js-Datei in eine andere js-Datei einfügen, um mich an die DRY-Prinzip und Duplizierung von Code vermeiden.

Sie können eine Skriptdatei nur in eine HTML-Seite einfügen, nicht in eine andere Skriptdatei. Das heißt, Sie kann Schreiben Sie JavaScript, das Ihr “eingeschlossenes” Skript in dieselbe Seite lädt:

var imported = document.createElement('script');
imported.src="https://stackoverflow.com/path/to/imported/script";
document.head.appendChild(imported);

Es besteht jedoch eine gute Chance, dass Ihr Code von Ihrem “eingeschlossenen” Skript abhängt. In diesem Fall kann es jedoch fehlschlagen, da der Browser das “importierte” Skript asynchron lädt. Am besten verwenden Sie einfach eine Bibliothek eines Drittanbieters wie jQuery oder YUI, die dieses Problem für Sie löst.

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

Ich stimme dem nicht zu document.write Technik (siehe Vorschlag von Vahan Margaryan). Ich mag document.getElementsByTagName('head')[0].appendChild(...) (siehe Vorschlag von Matt Ball), aber es gibt ein wichtiges Problem: die Ausführungsreihenfolge des Skripts.

In letzter Zeit habe ich viel Zeit mit der Reproduktion verbracht ein ähnliches Problemund sogar das bekannte jQuery-Plug-in verwendet dieselbe Technik (siehe src Hier), um die Dateien zu laden, aber auch andere haben das Problem gemeldet. Stellen Sie sich vor, Sie haben eine JavaScript-Bibliothek, die aus vielen Skripten und einem besteht loader.js lädt alle Teile. Einige Teile sind voneinander abhängig. Stellen Sie sich vor, Sie schließen eine andere ein main.js Skript pro <script> die die Objekte aus verwendet loader.js unmittelbar nach dem loader.js. Das Problem war das manchmal main.js wird ausgeführt, bevor alle Skripte geladen sind loader.js. Die Verwendung von $(document).ready(function () {/*code here*/}); Innen main.js Skript hilft nicht. Die Verwendung von Kaskadierung onload Ereignishandler in der loader.js führt dazu, dass das Skript sequentiell statt parallel geladen wird, und erschwert die Verwendung main.js Skript, das nur irgendwo dahinter enthalten sein sollte loader.js.

Indem ich das Problem in meiner Umgebung reproduziere, kann ich sehen, dass **die Ausführungsreihenfolge der Skripts in Internet Explorer 8 bei der Einbeziehung von JavaScript abweichen kann*. Es ist ein sehr schwieriges Problem, wenn Sie Skripte einschließen müssen, die voneinander abhängig sind. Das Problem ist in beschrieben Javascript-Dateien parallel ladenund die vorgeschlagene Problemumgehung ist die Verwendung document.writeln:

document.writeln("<script type="text/javascript" src="https://stackoverflow.com/questions/4634644/Script1.js"></script>");
document.writeln("<script type="text/javascript" src="Script2.js"></script>");

Im Fall von “Die Skripte werden parallel heruntergeladen, aber in der Reihenfolge ausgeführt, in der sie auf die Seite geschrieben wurden”, nach dem Wechsel von document.getElementsByTagName('head')[0].appendChild(...) Technik zu document.writelnich hatte das Problem nicht mehr gesehen.

Daher empfehle ich Ihnen die Verwendung document.writeln.

AKTUALISIERT: Wenn jemand interessiert ist, kann er versuchen, zu laden (und neu zu laden) Die Seite im Internet Explorer (die Seite verwendet die document.getElementsByTagName('head')[0].appendChild(...) Technik), und vergleichen Sie dann mit die fixierte Version Gebraucht document.writeln. (Der Code der Seite ist relativ schmutzig und stammt nicht von mir, aber er kann verwendet werden, um das Problem zu reproduzieren).

Sie müssen ein document.write-Objekt schreiben:

document.write('<script type="text/javascript" src="https://stackoverflow.com/questions/4634644/file.js" ></script>');

und platzieren Sie es in Ihrer Haupt-Javascript-Datei

Es ist nicht direkt möglich. Sie können auch einen Präprozessor schreiben, der damit umgehen kann.

Wenn ich es richtig verstehe, dann sind die folgenden Dinge hilfreich, um das zu erreichen:

• Verwenden Sie einen Präprozessor, der Ihre JS-Dateien durchläuft und beispielsweise nach Mustern wie „@import somefile.js“ sucht und diese durch den Inhalt der eigentlichen Datei ersetzt. Nicholas Zakas (Yahoo) hat eine solche Bibliothek in Java geschrieben, die Sie verwenden können (http://www.nczonline.net/blog/2009/09/22/introducing-combiner-a-javascriptcss-concatenation-tool/)

• Wenn Sie Ruby on Rails verwenden, können Sie das Jammit-Asset-Packaging ausprobieren. Es verwendet die Konfigurationsdatei „assets.yml“, in der Sie Ihre Pakete definieren können, die mehrere Dateien enthalten können, und sie dann auf Ihrer eigentlichen Webseite mit dem Paketnamen verweisen.

• Versuchen Sie es mit einem Modullader wie z RequireJS oder ein Skriptlader wie LabJs mit der Möglichkeit, die Ladereihenfolge zu steuern und paralleles Herunterladen zu nutzen.

JavaScript bietet derzeit keine “native” Möglichkeit, eine JavaScript-Datei in eine andere wie CSS einzufügen ( @import ), aber alle oben genannten Tools/Möglichkeiten können hilfreich sein, um das von Ihnen erwähnte DRY-Prinzip zu erreichen. Ich kann verstehen, dass es sich möglicherweise nicht intuitiv anfühlt, wenn Sie einen serverseitigen Hintergrund haben, aber so sind die Dinge. Für Front-End-Entwickler ist dieses Problem normalerweise ein „Bereitstellungs- und Verpackungsproblem“.

Ich hoffe es hilft.