2

JQuery.load() を使用して、Web サイトの mainWindow のコンテンツを変更し、ユーザーがタブを切り替えられるようにします。各タブには、タブのコンテンツが読み込まれると実行される関数を含む 1 つまたは複数のスクリプトがあります。

明らかに、初めてタブに切り替えたときに、スクリプトをサーバーから取得して解釈する必要がありますが、ユーザーが後でタブに戻った場合、これは発生しないはずです。つまり、簡単に言えば：

  1. Load() html

  2. JavaScript 関数が存在することを確認してください。存在しない場合は、スクリプトを読み込んで解釈してください。

  3. DOM が再構築された後、javascript で aa 関数を呼び出します。

ステップ 3 を実行する前に、ステップ 1 と 2 を完了する必要があります。

現時点では、ネストされたコールバックを使用してこれを実現しています。

function openFirstTab(){
    $("#mainWindow").load("firstTab.php", function(){
        if(typeof(onloadfFirstTab) != "function"){
            jQuery.getScript("assets/js/FirstTab.js", function(){
                onloadFirstTab();
            });
        }
        else{
            onloadFirstTab();
        }

    } );

}

しかし、もっと良い方法があるはずだと感じています。

4

3 に答える 3

2

ページの読み込み後にスクリプトを同期的に読み込むことができないため、コードを完全に同期的に記述することはできません (同期 XHR 要求を実行して結果を評価しない限り、お勧めしません)。

いくつかの選択肢があります。RequireJS のような既存の依存関係管理ライブラリがあり、ここでの請求に適合する可能性があります。または、単一のファイルをロードする必要がある場合は、if/else を使用するのではなく、コードを少しクリーンアップするために次のようなことを行うことができます。

function loadDependencies() {
    // For the sake of example, the script adds "superplugin" to the jQuery prototype
    return $.getScript( "http://mysite.com/jquery.superplugin.js" );
}

function action() {
    // If superplugin hasn't been loaded yet, then load it
    $.when( jQuery.fn.superplugin || loadDependencies() ).done(function() {
        // Your dependencies are loaded now
    });
}

これにより、jQuery Deferreds/Promisesを使用して、コードがより適切になります。

于 2012-10-25T04:08:03.567 に答える
0

JS を複数回ロードしたくなく、動的にロードする場合、すでにロードされているかどうかを知る唯一の方法は、JS がすでにロードされていることを示す条件をテストすることです。私が知っている選択肢は次のとおりです。

  1. 私が知っている最も簡単なことは、あなたがすでに行っていることです（javascriptで定義されている関数の存在を確認してください）。

  2. 各タブでプロパティを使用することもできます (スクリプトを読み込んだ後に.data()設定した jQuery を使用します。true

  3. 動的にロードされるコードを記述して、既にロードされている場合に再初期化を回避する方法を知ることができます。その場合、毎回ロードするだけですが、連続した時間は何もしません。ヒント、静的に定義されたグローバルを持つことはできません。独自の初期化コードを実行する前に、既にロードされているかどうかをテストする必要があります。

于 2012-10-25T00:03:22.993 に答える
0

（まだテストしていないので、特にjavascriptのスコープをまだよく理解していないので、うまくいくかどうかはわかりません:)

function require(scripts, callback){
var loadCount = 0;

function done(){
loadCount -=1;
if (loadCount==0){ 
    callback();
    }
}

for ( var script in scripts){
    if (!script.exitsts()){
        loadCount +=1;
        jQuery.getScript(script.url, done);
        }
}

}

この関数は、必要なスクリプトの配列を受け取り、callback().

「スクリプト」クラス:

function script(url, testFunc){
this.url =url;
this.testFunction = testFunc;
this.exists = function(){
if(typeof(testFunction)=="function"){
    return true;
    } 
else{
    return false;
    }
}
}

test-function は、関連するスクリプトで (のみ) 定義されている関数です。

PS: JQuery でキャッシングを有効にして、getScript() が呼び出されるたびにブラウザーが GET 要求を実行しないようにするには、ここに示されているメソッドのいずれかを使用できます。

不必要な GET - リクエストは回避されますが、スクリプトは getScript() が呼び出されるたびに解釈されます。これは、望ましい動作である場合があります。しかし、多くの場合、ライブラリ関数を再解釈する必要はありません。このような場合、必要なライブラリ関数がすでに利用可能な場合は getScript() の呼び出しを避けるのが理にかなっています。(この例では script.exists() を使用して行われます)。

于 2012-10-25T01:18:38.250 に答える