17

サードパーティのページにウィジェットを埋め込む必要があるとします。このウィジェットは、たとえばjqueryを使用する可能性があるため、ウィジェットはそれ自体でjqueryライブラリを実行します。サードパーティのページもjqueryを使用しているが、バージョンが異なるとします。ウィジェットを埋め込むときにそれらの間の衝突を防ぐ方法は？jquery.noConflictは、ページに読み込まれる最初のjqueryライブラリに対してこのメ​​ソッドを呼び出す必要があるため、オプションではありません。これは、サードパーティのWebサイトが呼び出す必要があることを意味します。サードパーティのサイトは、ウィジェットを使用するために、srcを含むタグをウィジェットに追加する以外に修正したり何もしたりしてはならないという考え方です。

また、これは特にjqueryの問題ではありません-グーグルクロージャーライブラリ（コンパイルされていても）が例として取り上げられるかもしれません。

明らかなiframeとは別に、さまざまなjavascriptライブラリを分離するためにどのようなソリューションがありますか？たぶん、javascriptを文字列としてロードしてから（eval（'code to eval'）ではなくFunction（'code to eval'）を使用して）無名関数でそれを実行するとうまくいくかもしれません。

4

5 に答える 5

9

実際、jQuery.noConflictはまさにあなたが使いたいものだと思います。その実装を正しく理解していれば、コードは次のようになります。

(function () {
var my$;

// your copy of the minified jQuery source

my$ = jQuery.noConflict(true);
// your widget code, which should use my$ instead of $
}());

を呼び出すと、グローバルおよびオブジェクトが以前の値にnoConflict復元されます。jQuery$

于 2010-11-12T15:17:03.577 に答える
4

Function(...)関数内で評価を行いますが、それ以上のことはありません。

iframeサードパーティのコンテンツにデフォルトのサンドボックスを提供する を使用しないでください。

parent.postMessageまた、親しみやすいユーザーの場合は、最新のブラウザーの場合はハックを使用するか、年配のユーザーの場合はハックを使用して、ユーザーとページの間でテキスト データを共有できますwindow.name。

于 2010-11-12T15:17:14.660 に答える
2

この問題を解決するためにライブラリを作成しました。もちろん、コードが問題を認識して最初にライブラリを使用する必要があるため、それが役立つかどうかはわかりません。ライブラリを使用するようにコードを変更できる場合にのみ役立ちます。

問題のライブラリはPackages JSと呼ばれ、クリエイティブ コモンズ ライセンスに基づくオープン ソースであるため、無料でダウンロードして使用できます。

基本的に、関数内にコードをパッケージ化することで機能します。これらの関数から、他のパッケージに公開したいオブジェクトをエクスポートします。コンシューマー パッケージでは、これらのオブジェクトをローカルの名前空間にインポートします。あいまいさを解決できるため、他の誰かが同じ名前を複数回使用していても、実際にあなた自身が同じ名前を使用していても問題ありません。

以下に例を示します。

(ファイル例/greeting.js)

Package("example.greeting", function() {
  // Create a function hello...
  function hello() {
    return "Hello world!";
  };

  // ...then export it for use by other packages
  Export(hello);

  // You need to supply a name for anonymous functions...
  Export("goodbye", function() {
    return "Goodbye cruel world!";
  });
});

(ファイル example/ambiguity.js)

Package("example.ambiguity", function() {
  // functions hello and goodbye are also in example.greeting, making it ambiguous which
  // one is intended when using the unqualified name.
  function hello() {
    return "Hello ambiguity!";
  };

  function goodbye() {
    return "Goodbye ambiguity!";
  };

  // export for use by other packages
  Export(hello);
  Export(goodbye);
});

(ファイル example/ambiguitytest.js)

Package("example.ambiguitytest", ["example.ambiguity", "example.greeting"], function(hello, log) {
  // Which hello did we get? The one from example.ambiguity or from example.greeting?
  log().info(hello());  
  // We will get the first one found, so the one from example.ambiguity in this case.

  // Use fully qualified names to resolve any ambiguities.
  var goodbye1 = Import("example.greeting.goodbye");
  var goodbye2 = Import("example.ambiguity.goodbye");
  log().info(goodbye1());
  log().info(goodbye2());
});

example/ambiguitytest.js は 2 つのライブラリを使用しており、どちらも関数 goodbye をエクスポートしますが、正しいライブラリを明示的にインポートし、それらをローカル エイリアスに割り当ててあいまいさを解消することができます。

このように jQuery を使用することは、Package への呼び出しでそのコードをラップし、現在グローバル スコープに公開されているオブジェクトをエクスポートすることにより、jQuery を「パッケージ化」することを意味します。それはライブラリを少し変更することを意味しますが、これはあなたが望むものではないかもしれませんが、残念ながらiframeに頼らずに見ることができる方法はありません.

ダウンロードに人気のあるライブラリの「パッケージ」バージョンを含めることを計画しており、jQuery は間違いなくリストに含まれていますが、現時点では、jQuery のセレクター エンジンである Sizzle のパッケージ バージョンしかありません。

于 2011-02-22T14:16:16.877 に答える
0 
<script src="myjquery.min.js"></script>
<script>window.myjQuery = window.jQuery.noConflict();</script>
...
<script src='...'></script> //another widget using an old versioned jquery
<script>
(function($){
    //...
    //now you can access your own jquery here, without conflict
})(window.myjQuery);
delete window.myjQuery;
</script>

最も重要なポイント:

  1. 独自の jquery および関連するプラグイン タグの直後に jQuery.noConflict() メソッドを呼び出します

  2. 結果の jquery をグローバル変数に保存し、競合や混乱の可能性がほとんどない名前を付けます

  3. 古いバージョンの jquery を使用してウィジェットをロードします。

  4. フォローアップはあなたのロジックコードです。便宜上、クロージャーを使用してプライベート $ を取得します。private $ は他の jquery と競合しません。

  5. グローバル一時変数を削除することを忘れないでください。
于 2015-03-18T03:35:19.820 に答える
0

no conflict のようなメソッドを探す代わりに、jQuery で Google API の完全な URL を呼び出して、アプリケーションで動作できるようにすることができます。

于 2010-11-12T13:31:38.040 に答える