Wie importieren Sie mehrere Javascript-Dateien in eine HTML-Indexdatei ohne Aufblasen?

Lesezeit: 3 Minuten

Benutzer-Avatar
Oliver Watkins

Gibt es überhaupt mehrere Javascript-Dateien in HTML zu importieren, ohne jede Datei angeben zu müssen?

<script src="https://stackoverflow.com/questions/14460231/js/toolkit/Toolkit.js"></script>
<script src="js/toolkit/Viewable.js"></script>
<script src="js/toolkit/Overlay.js"></script>

dh. kann ich so etwas angeben js/toolkit/* ?

Ich habe mehr als 50 Javascript-Dateien, die ich importieren muss, und es scheint sehr zeitaufwändig, jede Datei anzugeben.

  • Concat und minify die Dateien auf dem Server und importiere dann gleich wie <script src="js/toolkit/all.js"></script>

    – techfoobar

    22. Januar 2013 um 13:58 Uhr

  • Sie könnten nur ein Skript hinzufügen, das alle Skripte dynamisch importiert.

    – Alex Filipovici

    22. Januar 2013 um 13:58 Uhr

  • Schau dir das mal an: stackoverflow.com/questions/950087/…

    – Sean Airy

    22. Januar 2013 um 14:00 Uhr

  • Dies muss serverseitig erfolgen. Schau dir das an: developer.google.com/closure/compiler

    – Franzose

    22. Januar 2013 um 14:01 Uhr


Das Einbinden einer JavaScript-Datei in eine andere JavaScript-Datei ist in der Webentwicklung üblich.

Weil wir die JavaScript-Datei oft zur Laufzeit für einige Bedingungen einschließen.

Wir können dies also sowohl mit JavaScript als auch mit jQuery erreichen.

Methode 1: Verwenden Sie JavaScript, um eine weitere JavaScript-Datei einzubinden

  1. Fügen Sie Ihrer Webseite die folgende Funktion hinzu.

    function loadScript(url)
    {    
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.type="text/javascript";
        script.src = url;
        head.appendChild(script);
    }
    
  2. Rufen Sie einfach die folgende loadScript-Funktion auf, in die Sie die js-Datei einfügen möchten.

    loadScript('/js/jquery-1.7.min.js');
    

Methode 2: Verwenden Sie jQuery, um eine weitere JavaScript-Datei einzubinden.

  1. Fügen Sie Ihrer Webseite eine jQuery-Datei hinzu.

    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    
  2. Rufen Sie einfach die getScript-Funktion functions auf.

    jQuery(document).ready(function(){
        $.getScript('/js/jquery-1.7.min.js');
    });
    

So fügen Sie eine JavaScript-Datei in eine andere JavaScript-Datei ein

Benutzer-Avatar
Binäres Gehirn

Es gibt einen Weg:

Sie können eine Javascript-Funktion erstellen, die den Pfad als Parameter verwendet und diese HTML-Zeilen erstellt:

<script src="https://stackoverflow.com/questions/14460231/js/toolkit/Toolkit.js"></script>
<script src="js/toolkit/Viewable.js"></script>
<script src="js/toolkit/Overlay.js"></script>

Und Sie müssen nur das aufrufen:

loadLib("toolkit/Toolkit");
loadLib("toolkit/Viewable");
loadLib("toolkit/Overlay");

Dies wird jedoch nicht empfohlen, da die Ladezeit durch die Anzahl der HTTP-Anfragen erhöht wird. Sie sollten besser etwas auf der Serverseite verwenden, um alles in dieselbe Datei zu packen.

  • Ich denke, das ist die beste Antwort. Es kann die Ladezeit verlängern, aber wenn eine Website 300 ms zum Laden braucht statt 3 ms, dann ist das keine große Sache.

    – Oliver Watkins

    22. Juli 2015 um 6:55 Uhr

Nein, das kannst du nicht. Übrigens ist es keine gute Idee, alle 50 separaten Dateien zu laden. Erwägen Sie, sie in einem einzigen Skript zu komprimieren, um die Leistung zu verbessern und die Ladezeit der Seite zu verkürzen.

  • Sie können dies nicht direkt tun, aber Sie können Skriptdateien dynamisch laden.

    – Sean Airy

    22. Januar 2013 um 14:01 Uhr

  • Wie soll mir eine minimierte JS-Datei helfen, wenn ich mich im Entwicklungsmodus befinde?

    – Oliver Watkins

    31. Januar 2013 um 9:21 Uhr

Benutzer-Avatar
thSoft

Sie können einrichten grunzen zu Uhr der Ordner der Skripte und konkat/minimieren sie in eine einzige Datei, dann müssen Sie diese nur noch in Ihre HTML-Datei einfügen.

Sie müssen jede Datei angeben, damit der Browser weiß, was abgerufen werden soll, aber je nach verwendeter IDE gibt es hierfür möglicherweise Verknüpfungen (Visual Studios ermöglicht Ihnen das Ziehen und Ablegen von Skriptdateien in die HTML-Datei, um Verweise hinzuzufügen ).

Während der Entwicklung möchten Sie genauso vorgehen, indem Sie die Dateien zur Fehlerbehebung getrennt halten, aber in der Produktion, wie andere kommentiert haben, ist dies eine sehr gute Vorgehensweise minimieren Ihren Code und kombinieren Sie sie in einer Datei. Das macht es nur einen Anruf und kann Ihren Overhead erheblich reduzieren.

Benutzer-Avatar
Orlandster

Ich empfehle Ihnen zu verwenden JSCompress. Es wird Ihren gesamten Javascript-Code in eine einzige Javascript-Datei komprimieren.

1017700cookie-checkWie importieren Sie mehrere Javascript-Dateien in eine HTML-Indexdatei ohne Aufblasen?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy