Jak importować wiele plików javascript w pliku indeksu HTML bez nadęcia?

Question

Czy jest mimo to importowanie wielu plików javascript w HTML bez konieczności określania każdego pliku?

<script src="js/toolkit/Toolkit.js"></script> 
<script src="js/toolkit/Viewable.js"></script> 
<script src="js/toolkit/Overlay.js"></script> 

tj. mogę podać coś w stylu: js/toolkit/*?

Mam ponad 50 plików javascript, które muszę zaimportować, a określenie każdego pliku wydaje się bardzo czasochłonne.

Answer 1

Istnieje sposób:

Można utworzyć javascript funkcję, która pobiera ścieżkę jako parametr i tworzy te linie HTML:

<script src="js/toolkit/Toolkit.js"></script> 
<script src="js/toolkit/Viewable.js"></script> 
<script src="js/toolkit/Overlay.js"></script> 

A ja po prostu trzeba nazwać:

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

Nie jest to jednak zalecane, ponieważ czas ładowania zostanie zwiększony ze względu na liczbę żądań HTTP. Powinieneś lepiej użyć czegoś po stronie serwera, aby umieścić wszystko w tym samym pliku.

Answer 2

Nie możesz tego zrobić. A tak na marginesie nie jest dobrym pomysłem załadowanie wszystkich 50 oddzielnych plików. Rozważ skompresowanie ich w jednym skrypcie, aby zwiększyć wydajność i skrócić czas wczytywania strony.

Answer 3

Należy określić każdy plik przeglądarki, aby wiedzieć, co należy pobrać, ale w zależności od używanego IDE mogą istnieć na to skróty (Visual Studio pozwala przeciągać i upuszczać pliki skryptów do html, aby dodać referencje).

Podczas programowania, chcesz robić to samo, co robisz, zachowując oddzielne pliki do rozwiązywania problemów, ale w procesie produkcyjnym, jak skomentowali inni, jego bardzo dobrą praktyką jest minify twój kod i połączenie ich w jeden plik. To sprawia, że ​​jest to tylko jedno połączenie i może znacznie zmniejszyć obciążenie.

Answer 4

można skonfigurować grunt do watch folder skryptów i concat/minify je w jednym pliku, a następnie po prostu trzeba to, że w pliku HTML.

Answer 5

Włączenie pliku JavaScript w innym pliku JavaScript jest powszechne w tworzeniu stron internetowych.

Ponieważ wiele razy dołączamy plik JavaScript w czasie wykonywania w imieniu niektórych warunków.

Możemy to osiągnąć za pomocą JavaScript, a także za pomocą jQuery.

Metoda 1: Użycie JavaScript, żeby to kolejny plik JavaScript

1. Dodaj następującą funkcję na swojej stronie internetowej.

   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. zadzwoń poniżej funkcji loadScript, gdzie chcesz dołączyć plik js.

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

Metoda 2: Użycie jQuery to kolejny plik JavaScript.

1. Dodaj plik jQuery na swojej stronie.

   <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 
   

2. Wystarczy wywołać funkcje funkcji getScript.

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

How to include a JavaScript file in another JavaScript File

Answer 6

polecam użyć JSCompress. Spowoduje to skompresowanie całego kodu javascript do jednego pliku javascript.