14

次のタイプの JavaScript ファイルを非同期的にロードするクリーンな方法を探しています。読み込まれている「コア」js ファイルに依存するファイル、およびその他の無関係な js ファイルの数。どうすればよいか、いくつかのアイデアがありますが、最善の方法が何であるかはわかりません。ドキュメント本文にスクリプトをロードすることは避けたいです。

たとえば、次の 4 つの JavaScript ファイルを非同期でロードし、適切な名前を付けます。


/js/my-contact-page-js-functions.js // unrelated/independent script
/js/jquery-1.3.2.min.js // the "core" script
/js/jquery.color.min.js // dependent on jquery being loaded
http://thirdparty.com/js/third-party-tracking-script.js // another unrelated/independent script

しかし、カラープラグインの前に jQuery がロードされることが保証されていないため、これは機能しません... 


(function() {
    var a=[
      '/js/my-contact-page-functions.js',
      '/js/jquery-1.4.2.min.js',
      '/js/jquery.color.js',
      'http://cdn.thirdparty.com/third-party-tracking-script.js',
    ],
    d=document,
    h=d.getElementsByTagName('head')[0],
    s,
    i,
    l=a.length;
    for(i=0;i<l;i++){
        s=d.createElement('script');
        s.type='text/javascript';
        s.async=true;
        s.src=a[i];
        h.appendChild(s);
    }
})();

jquery と color プラグインを非同期でロードすることはほとんど不可能ですか? (カラー プラグインでは、jQuery を最初にロードする必要があるためです。)

私が最初に検討した方法は、カラー プラグイン スクリプトと jQuery ソースを 1 つのファイルに結合することです。

それから私が持っていた別のアイデアは、次のようにカラープラグインをロードすることでした:


$(window).ready(function() {
    $.getScript("/js/jquery.color.js");
});

これについてどうするかについて考えている人はいますか？ありがとう！

4

5 に答える 5

12

LABjsは、この問題のために特別に作成されています。

<script src="lab.js"></script>
<script>
  $LAB
    .script("jquery.js")
    .wait()
    .script("jquery.color.js")
    .script("jquery.otherplugin.js")
    .script("mylib.js")
    .wait()
    .script("unrelated1.js")
    .script("unrelated2.js");
</script>

$LABjQuery や他のスクリプトを待つ必要が本当にない場合は、関連のないスクリプトを独自のチェーンに入れることもできます。

于 2010-05-05T22:56:24.423 に答える
5

LabJSとRequireJSは、現在 2 つの一般的な選択肢です。どちらも jQuery で動作しますが、アプローチが少し異なるため、両方を確認する必要があります。

于 2010-05-08T15:03:36.320 に答える
1

YUIローダーを利用して、独自のモジュールと依存関係を登録し、それらをロードできます。

成功、失敗、さらには進行のための完全なフックを取得するので、好きな非同期アクションをフックできます。

于 2010-05-05T22:03:40.987 に答える
0

あなたが言及したまさにその理由で、完全に非同期のロードを達成することはできません。依存。

私の 10p では、$.getScript() ルートに従います。これは基本的に $.ajax() の単なるラッパーなので、この方法でスクリプトをロードすると、目的の非同期ロードが得られます。

于 2010-05-05T22:04:05.187 に答える
0

css および JS ファイルを非同期および同期でロードする一般的な jquery プラグインがあります。http://code.google.com/p/rloader/を参照してください。

于 2010-12-12T11:55:37.507 に答える