1

現在、約半ダースの JS クラス ファイルがあります。一連のタグを配置する代わりに、jQuery を使用してそれらを動的に (順番に) ロードしました。

var classes = ["A","B","C"...];
blah.load = function(callback) {
    for (var i in classes) {
        console.log("Loading "+blah.RootURL+"/"+classes[i]+".js");
        $.ajax({
            async: true,
            url: blah.RootURL+"/"+classes[i]+".js",
            dataType: "script",
            error: function(jqxhr, status, error) {
                console.log("Unable to load "+classes[i]+": "+status+", "+error);
            },
            success: function(data, status, xhr) {
                if (window.tmpLoadCount) {
                    window.tmpLoadCount++;
                } else {
                    window.tmpLoadCount = 1;
                }

                if (window.tmpLoadCount == classes.length) {
                    console.log("Initializing...");
                    callback();
                }
            }
        });
    }
};

現在、作業を続けることができるように、複数のスクリプト タグを使用しています。jQuery のアプローチで私が抱えていた問題は、[再]読み込み時に、次のスクリプトが読み込まれる前に、async: true. 私のクラスはかなり短くてシンプルです。「ロード中」ログを介してスクリプトのロードが表示されますが、後で「B をロードできません: A はコンストラクターではありません」(B が A から継承している場合) のようなエラーが表示されます。これは、A が完全ではなかったことを示唆しています。B.prototype=new A();行が実行されたときにロードされます。

私はこのオンラインへの参照を1つ見つけました。それはsetTimeout()、エンジンにしばらく時間を与えるための呼び出しを追加することを提案し、これはjQueryの「成功」コールバックで何かを処理するときにのみ発生することを示唆しました...残念ながら、すべてを確実にする方法がわかりません成功のコールバックを使用せずに動的な方法で順番にロードされます。

多くの<script/>タグや縮小化 (デバッグが難しくなります) やクラスの変更を必要とすること以外に、この「競合状態」をきれいに回避する方法について誰か提案がありますか? 私の現在の考えは、あまり好きではありませんが、各クラスファイルの最終行でそのクラス名をグローバル静的プロパティに追加し、ajax 呼び出しで間隔を使用してそのプロパティをチェックし、ロードする必要があるかどうかを判断することです。次のファイル...ブレ。

4

2 に答える 2

3

実際、 RequireJSはこの種の状況向けに設計されています。真剣に考えて使うべきです。個人的には、Aaron Hardy によるこのブログ投稿は、RequireJS とは何か、およびその使用方法について、独自のドキュメントに実際に含まれている内容よりも、より適切で、短く、明確な説明であると考えています。それを読むのに数分かかるかもしれませんが、それがかなり良い解決策であることがわかると思います。

于 2012-04-16T15:16:31.007 に答える
0

現在のシナリオでできることの 1 つは、現在のシナリオが完了したときにのみ、次のスクリプトの読み込みを呼び出すことです。つまり、success関数ではこのようなものです。

function something(i){
    $.ajax({
                async: true,
                url: blah.RootURL+"/"+classes[i]+".js",
                dataType: "script",
                error: function(jqxhr, status, error) {
                    console.log("Unable to load "+classes[i]+": "+status+", "+error);
                },
                success: function(data, status, xhr) {
                    if (window.tmpLoadCount) {
                        window.tmpLoadCount++;
                    } else {
                        window.tmpLoadCount = 1;
                    }
    something(window.tmpLoadCount);
                    if (window.tmpLoadCount == classes.length) {
                        console.log("Initializing...");
                        callback();
                    }
                }
            });
}
于 2012-04-16T15:11:10.240 に答える