35

各ファイルを指定することなく、HTML で複数の JavaScript ファイルをインポートする方法はありますか?

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

すなわち。js/toolkit/*のようなものを指定できますか?

インポートする必要がある 50 以上の JavaScript ファイルがあり、各ファイルを指定するには非常に時間がかかるようです。

4

6 に答える 6

14

JavaScript ファイルを別の JavaScript ファイルに含めることは、Web 開発では一般的です。

条件によっては、実行時に JavaScript ファイルをインクルードすることが多いためです。

したがって、JavaScript と jQuery を使用してこれを実現できます。

方法 1: JavaScript を使用して別の JavaScript ファイルを含める

  1. Web ページに次の関数を追加します。

    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. js ファイルを含めたい場所で、以下の loadScript 関数を呼び出すだけです。

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

方法 2: jQuery を使用して、別の JavaScript ファイルを含めます。

  1. Web ページに jQuery ファイルを追加します。

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

  2. getScript 関数の関数を呼び出すだけです。

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

JavaScript ファイルを別の JavaScript ファイルに含める方法

于 2016-04-27T20:34:17.673 に答える
13

方法があります：

パラメータとしてパスを受け取り、これらの HTML 行を作成する JavaScript 関数を作成できます。

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

そして、これを呼び出すだけです：

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

ただし、HTTP 要求の数によってロード時間が長くなるため、これはお勧めできません。サーバー側で何かを使用して、すべてを同じファイルに入れることをお勧めします。

于 2013-01-22T14:14:00.113 に答える
6

いいえ、できません。ところで、これは 50 個の個別のファイルすべてをロードすることはお勧めできません。それらを 1 つのスクリプトに圧縮して、パフォーマンスを向上させ、ページの読み込み時間を短縮することを検討してください。

于 2013-01-22T13:58:47.917 に答える
5

スクリプトのフォルダーを監視するようにgruntをセットアップし、それらを 1 つのファイルに連結/縮小してから、それを HTML ファイルに含めるだけです。

于 2014-02-28T00:38:47.860 に答える
2

ブラウザーが何を取得するかを知るために各ファイルを指定する必要がありますが、使用している IDE によっては、これを行うためのショートカットがある場合があります (Visual Studio では、スクリプト ファイルを html にドラッグ アンド ドロップして参照を追加できます)。 ）。

開発中は、トラブルシューティングのためにファイルを別々に保持することで、同じように行いたいと考えていますが、本番環境では、他の人がコメントしているように、コードを縮小して 1 つのファイルに結合することをお勧めします。これにより、呼び出しが 1 回だけになり、オーバーヘッドを大幅に削減できます。

于 2013-01-22T14:05:42.013 に答える