javascript - JavaScriptオブジェクトをメモリにロードする適切な方法は?

Question

私は webapp で約 30 個の js ファイルを使用しており、各ファイルには 1 つの関数が含まれています。これらの関数はすべて自己呼び出しになり、相互に参照されます。

これに関する問題は、index.jsp 内のスクリプトの順序が重要であることです。まだ呼び出されていない関数でメソッドが呼び出されると、未定義のエラーが発生します。

しばらくは<script>タグの順序を制御することでこれを克服できましたが、ローダースクリプトを使用してこれを実現したいと考えています。

私のコンセプトを示すために小さなフィドルを設定しました。私の最大の懸念は、jquery(document).ready()関数内でオブジェクトにアクセスできるようにするために、オブジェクトをグローバルに宣言する必要があることです。

これはOKなパターンですか？どんなヒントでも大歓迎です！

score 2 · Accepted Answer

この例と同様の方法で、各 JS ファイルを変更してモジュールにする必要があります。

// File: module3.js
define(["module1", "module2"], function(m1, m2) {
    // Here, module1 and module2 are guaranteed to be loaded.
});

次に、1 つの「メイン」スクリプト (通常はと呼びますmain.js) を作成し、いくつかのモジュールを必要とします。

require(["module3"], function (m3) {
  // Here module3 is loaded, as well as module1 and module2 
  // - because module3 depends on them.
});

そして、これを HTML に入れます:

<script data-main="scripts/main" src="scripts/require.js"></script>

score 0 · Accepted Answer

サーバー側のアーキテクチャを構築して、ページごとに適切な js ファイル (およびその他の静的ファイル) を提供するようにしてください。ページ用に 1 つの縮小された js ファイルを作成し、html ファイルでオブジェクトスコープを初期化します。

2 に答える 2