1

#include短いバージョン: 「 JavaScript でステートメントをどのように合成しますか?」

長いバージョン:

一般的な Web ページに追加できるようにしたい JavaScript コード ファイルがあります。これらのページには、ファイルを読み込むために <script> タグを含める必要があるということ以外に、特定の条件を課す必要はありません。

私のファイルには jQuery に依存するコードが含まれているため、ファイルから jQuery をロードする必要があります。<script> タグを DOM に挿入することでこれを行っています。問題は、jQuery が読み込まれるとすぐにコードを実行する必要があることです。これにより、ページに古いバージョンの jQuery が既に読み込まれている場合に、新しく読み込まれたバージョンによって上書きされないようにすることができます (つまり、への参照を取得してから$呼び出していますjQuery.noConflict(true);)。

これを実現するために、動的に挿入される <script> 要素に onload/onreadystatechange ハンドラーを追加しています。これは基本的には機能しますが、問題は、基になるページに準備ができているページで待機しているものがある場合 (つまり$.ready(...))、このコードが <script> 要素自体のハンドラーの前に実行されるため、そのコードが my で実行されると問題が発生することです。新しくロードされた jQuery バージョンであり、ページがロードされ、コードが予期している元のバージョンではありません。

  var script = document.createElement("script");
  script.src = "//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js";
  script.type = "text/javascript";
  script.onload = script.onreadystatechange = function() {
    if (this.readyState && this.readyState != "loaded" &&
      this.readyState != "complete")
      return;
    var $ = jQuery;
    jQuery.noConflict(true);
    do_my_stuff($);
  }
  document.getElementsByTagName("body")[0].appendChild(script);

私のコードが呼び出されている Web ページを制御できないことに注意してください。そのため、「ページに適切なバージョンの jQuery をロードさせる」ことは解決策ではありません。また、jQuery をコード ファイルに単純にインライン化することは、jQuery がかなり大きいため、優れたソリューションではありません (必要な機能だけを使用して再構築しても、ファイルはかなり大きくなります)。

4

3 に答える 3

0

どのように機能するかを調査した後、目的のスクリプトを文字列にロードしてから単純にロードするjQuery.getScript()のが最善の解決策のようです。XMLHTTPRequesteval()

于 2013-03-11T19:31:18.913 に答える
0

jQuery一部のグローバル（つまり/ $）をオーバーライドするスクリプトを含めています。これは通常、非常にずさんであると考えられており、その理由を経験しています。

簡単な解決策は、jQuery を変更して、 などの別の名前空間を使用すること$my_version_of_jqueryです。すなわち。名前の衝突を避けます。

より複雑なソリューションは、適切な依存性注入で何かを行いますが、それはおそらくあなたのユースケースには複雑すぎるでしょう.

混雑：

var my_framework = {};
my_function () {
    my_framework.some_function();
}

注入された依存関係:

manager.add_dependency("my_framework", function () {
    return {};
});
manager.run_with_dependencies(
  [ "my_framework", "some_other_dependency" ], // list of dependencies
  function my_function(my_framework, some_other_dependency) { // instances of dependencies
      my_framework.some_function();
  }
});

これにより、必要に応じて、同じフレームワークの 2 つのバージョンをロードできます。

于 2013-03-07T16:48:51.893 に答える
0

私があなたの質問を正しく理解した場合、次の条件を満たす必要があります。

  • 独自の JavaScript コードを実行する前に、jQuery がロードされていることを確認してください
  • 必要なスクリプトの依存関係は 1 つだけなので、jQuery を非同期でロードする必要があります
  • jQuery のバージョンが既に読み込まれている場合は、グローバル参照を上書きしないでください

最も簡単な解決策は、初期テストを実行して、グローバル jQuery オブジェクトがグローバル スコープに存在するかどうかを確認することです。

if ( !window.jQuery ) {
    // jQuery isn't there, so load your jQuery version asynchronously
} else {
    // jQuery is already there, so use the existing version
}

既存のソリューションを機能させるには、別のグローバル参照を使用する必要があります。したがって、 の代わりに をvar $ = jQuery使用しますvar $myJq = jQuery.noConflict()。注: 渡す trueと、グローバル スコープから既存の jQuery 参照がすべて削除されます。

2 つの別々のバージョンをロードするのは非常に効率的ではないため、可能であれば、上記の条件を使用して何をすべきかを決定することをお勧めします。ただし、バージョンが独自のコードにとって重要な場合は、2 番目の解決策で問題なく動作するはずです。

于 2013-03-11T21:40:24.307 に答える