2

質問/問題: いくつかの関数を含むいくつかの js ファイル (~15) があります。それらをすべて html ページに 1 つずつ含める必要がないように、インクルード ファイルを作成します (include()、require() などを使用した php のように)。

目標: つまり、目標はそのようなものを持つことです:

  • HTML: src main.js または main.js + includes.js のみ

  • includes.js: すべてのスクリプトを取得する必要があります。

  • Main.js:すべての includes.js スクリプトにアクセスできる必要があります。

私がすでに試したこと：

  • $.getScript で includes.js 内のすべてのファイルを作成し、main.js の前に html でそれを src し、main.js で関数を使用しようとしても機能しませんでした。

  • $.getScript includes.js 内のすべてのファイル、main.js 内の $.getScript includes.js、src main.js のみ、main.js 内の関数を使用しようとすると、機能しませんでした。

  • 上記と同じですが、main.js の前に src includes.js もあり、スクリプトが 2 回実行されます。

フィードバックをお寄せいただきありがとうございます。

PS: 私はすでにこれらを見つけました:複数の javascript ファイルの読み込み - jqueryとこれら: jQuery $.getScript() メソッドを使用して複数の js ファイルを含める方法, しかし、それらは静かではなく、私が探しているものを望んでいます.

4

4 に答える 4

1

jQueryは必要ありません。もっと簡単なことを試してください。

私も似たようなことをしています: 複数の小さな JS ファイルでコードを記述しますが<script src="/js/all.js">、HTML には 1 つのみを含めます。

サーバーには、単一の/難読化されたJSを提供するか、次のようなものを提供するオプションがあります。

=== all.js ===
(function() {
    'use strict';
    var a = [
       'file1',
       'utils',
       'main',
       'jquery.placeholder',
       ...
    ];
    var i;
    var s = [];
    for (i = 0; i < a.length; i += 1) {
        s = s.concat(['<script src="/js/', a[i], '.js"></script>']);
    }
    document.write(s.join(''));
}());

ご覧のとおり、HTML は をロードall.jsし、それを実行します。必要な他のすべてのスクリプト ファイルを DOM に書き込みます。

これは、デバッグ中もファイルを個別にロードしていることを意味します (したがって、ブレークポイントは簡単です)。新しい JS ファイルを追加したい場合は、自分のall.js.

all.jsデバッグしていないとき、サーバーは (本質的に) 個々のファイルを連結した単一のファイルを送信します。（簡単です：私all.jsの単純な正規表現の構造を考えると、個々のファイルをすべて引き出してから、それらをクロージャーコンパイラーにプッシュできます。）

于 2017-02-14T22:01:12.860 に答える
1

このようなことができます。

  1. include-js.txt というテキスト ファイルを作成します。
  2. include-js.txt に document.write ('') を追加し、タグを使用してすべての js ファイルを含めます。
  3. タグを使用して、HTML ファイルにこの txt ドキュメントを含めます。

例えば：

include-js.txt ファイル:

document.write('<script type="text/javascript" src="main.js"></script><script type="text/javascript" src="js-file-1.js"></script><script type="text/javascript" src="js-file-2.js"></script>');

HTML ファイル:

<head>
    <script language="javascript" type="text/javascript" src="include-js.txt"></script>
</head>
于 2017-02-18T10:42:04.047 に答える
0

私があなたの質問を正しく理解していればmain.js、すべてのファイルが含まれた後にのみ実行したいですか? 代わりにファイルmain.jsから実行してみませんか? この回答 at stackoverflow を参考にするincludes.jsと、インクルード ファイルで次のようなことができます。

function getScripts(scripts, callback) {
    var progress = 0;
    scripts.forEach(function(script) { 
        $.getScript(script, function () {
            if (++progress == scripts.length) callback();
        }); 
    });
}
getScripts(["script1.js", "script2.js"], function () {
    // now load the main.js file since all scripts have loaded
    getScripts(["main.js"], function () {
        // do something
        // you have access to all included js files
    });
});

includes.jsファイルの名前を変更して、init.jsこのファイルのみを html に追加できますか?

注:余談ですが、すべての js ファイルを 1 つのファイルにまとめて html に追加する方がおそらく高速です。ファイルが増えるということは、サーバーへの呼び出しが増えることを意味します。異なるページが異なる js ファイルを必要とする動的な環境で作業している場合を除き、すべての js を 1 つのファイルにダンプしてください。また、このファイルを縮小してさらに高速にすることもできます。

于 2017-02-17T09:35:31.063 に答える