15

私は、yepnope スクリプト ローダーを modernizr.js ライブラリの一部として実装しています。その後、jQueryをロードし、jQueryに依存するスクリプトを正常に取得しました。私はリソースの非同期ロードに慣れていないので、少し新しいです。私は周りを探していましたが、次のことはあまりうまくいきませんでした。

私の質問は、yepnope.js フレームワークで作業するときに $(document).ready() の機能を効果的に置き換える方法についてのあなたの意見です。

私の理論は、ベース ライブラリに適切な名前の関数を作成し、その変数を既存の $(document).read() コードを含む無名関数に設定するというものでした。この変数は、すべてのスクリプトが完全なコールバックにロードされた後、yepnope によって呼び出されます。

これが良い方法であることに同意しますか、それとも私はこれに完全に間違った方法でアプローチしていますか?

(ご存じない方のために説明すると、yepnope.js の非同期性は、ドキュメントが yepnope ローダーが終了する前に $ または jQuery を呼び出し、「$ is undefined」エラーをスローすることを意味します <- 間違っている場合は修正してください。)

最初の質問です。良い質問であることを願っています。

4

5 に答える 5

11

yepnope を使用せずに jQuery をロードすることが問題にならない場合は、もっと簡単な方法があります。

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script>
    $.holdReady(true);

    yepnope.load({
        load: [
            'placeholder.js',
            'jquery-ui.min.js'
        ],
        complete: function (){
            $.holdReady(false);
        }
    });
</script>
于 2012-03-06T11:08:02.993 に答える
11

これは私が使用するテクニックです。これにより、好きな場所に $(document).ready() スタイルの呼び出しを振りかけることができます。この方法を使用すると、すでに jQuery を使用していて、既存の $(document).ready() 呼び出しがあるサイトを取得して、yepnope を簡単に改造できます。

まず、$(document).ready() を呼び出す JavaScript の前に、できればドキュメント ヘッドに次の JS 行を追加します。

<script>
    var docready=[],$=function(o){function r(fn){docready.push(fn);}if(typeof o === 'function') r(o);return{ready: r}};
</script>

次に、yepnope jQuery テスト オブジェクトを次のように設定します。

yepnope({
    load: '//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js',
    complete: function() {
        $ = jQuery;         
        for(n in docready) $(document).ready(docready[n]);
    }
});

jQuery が読み込まれる前に、偽の $(document).read() を作成します。これにより、すべての $(document).ready() 呼び出しが配列 docready に格納されます。次に、jQuery がロードされたら、一時的な $ オブジェクトを、ロードされた実際の jQuery オブジェクトで上書きします。次に、保存されているすべての $(document).ready() 呼び出しを繰り返し処理し、実際に実行します。

更新: $(function() {}) スタイルの呼び出しもカバーする Chris Jones の改良版。

于 2011-12-19T20:37:00.707 に答える
1

スクリプト タグは同期的にロードされます。したがって、yepnope を js ファイルに入れて、スクリプト タグを介してロードすると、次のようになります。

   <script type="text/javascript" src="/my-yepnope-stuff.js"></script>
</body>

body タグの直前で $(document).ready() 状態になっていることは確実です。

自分で答える必要があるのは、yepnope に $(document).ready() 方式で強制的にロードすることが理にかなっているかどうかです。その主な目的は、そもそもスクリプト タグの同期ロード順序を破ることだからです。

于 2011-04-17T15:07:39.713 に答える
0

@ezmilhouse からのガイダンスを使用して、古いコードとの互換性を維持しながら、目的を達成するための最良の方法を考えました。

私の解決策は、個々の依存関係に基づいて、必要なすべてのスクリプトを階層的にロードするように yepnope スクリプトローダーをセットアップすることでした。すべてのスクリプトがロードされたらcomplete、my call to yepnope のプロパティを使用して、ready 関数を呼び出すことができます。これは、ドキュメントの準備が整い、コードが問題なく動作することを意味していました。

また、自分の js を自分のページのベースに移動しました (かなり前にすべきことでしたが、多くのレガシー ページがありました!:))

以下に例を示します (図解のみを目的として、偽のライブラリ/スクリプト名を使用しています)。

yepnope({
    test: baseLib.debug,
    yep: { "max": "/version2/res/jquery/jquery-1.5.2.js" },
    nope: { "min": "/version2/res/jquery/jquery-1.5.2.min.js" },
    callback: {
        "max": function (url, result, key) {
            baseLib.Log("jQuery full loaded.");
        },
        "min": function (url, result, key) {
            baseLib.Log("jQuery min loaded.");
        }
    },
    complete: function () {
        if (window.$) {
            yepnope({
                test: base.debug,
                yep: {
                   "anotherscript": "script/url/here.js",
                   "anotherscript2": "script/url/here2.js"
                },
                nope: {
                    "anotherscript": "script/url/here-min.js",
                    "anotherscript2": "script/url/here2-min.js"
                },
                both: {
                    "anotherscript3": "script/url/here3.js"
                },
                callback: {
                    "anotherscript": function (url, result, key) {
                        baseLib.Log("anotherscript " + (result ? "Max" : "Min") + " loaded.");

                    },
                    "anotherscript2": function (url, result, key) {
                        baseLib.Log("anotherscript2 " + (result ? "Max" : "Min") + " loaded.");
                    },
                    "anotherscript3": function (url, result, key) {
                        baseLib.Log("anotherscript3 loaded.");
                    }
                },
                complete: function () {
                    baseLib.Log("Scripts Loaded");
                    baseLib.Page.Ready();
                }
            });

        }
        else {
            baseLib.Log("Could not load jQuery. No further jQuery dependent files loaded.", "error");
        }
    }
});

私のページjsではbaseLib.Page.Ready、完了時にyepnopeによって呼び出される関数を割り当てます。

于 2011-05-13T10:13:47.203 に答える