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

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.

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

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.

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 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.

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