web-dev-qa-db-ja.com

jQuery / Dojo-DojoツールキットでjQueryを使用するにはどうすればよいですか

DojoツールキットでjQueryを使用するにはどうすればよいですか？ DOM関連のjQueryとUI用のDojo（dijit）の両方のライブラリが同時に使用されていると聞きましたが、チュートリアルや例が見つかりません。両方のライブラリをロードすると、競合や問題が発生しますか？

javascriptjquerydojo
25
John Himmelman

Dojoは他のJavaScriptライブラリのように$をオーバーライドしないため、問題なく並べて使用できます。

23
Eric LaForce

JQueryは、ウェブサイトのヘッドにあるスクリプトタグを介してアプリに取り込むことで使用できます。dojoとの競合は発生しません。

ただし、dojoでjQueryを使用する場合、特に dojoバージョン1.8 とそのAMDの完全サポートでjQueryを使用する場合は注意が必要です。 AMD（ 非同期モジュール）を利用する方がクリーンです（特にWebサイトの先頭にjQueryを取り込むことができない場合）定義 ）。フレームワークを正しくプルするには、dojoconfigスクリプト内にパッケージエントリを作成する必要があります。これは、jqueryとjquery-uiのライブラリの場所を使用する例です...

<!-- external library configuration code included in header to make sure this
    is loaded before code in body-->
    <!-- dojo config -->
    <script>
            /* Instead of using the inline dojo-config attribute
            * create this variable so we can configure dojo here.
            * This seems a little clearer, easier to read as a config.
            */
            var dojoConfig = {
                baseUrl: "./",
                async: true,
                isDebug: true,
                parseOnLoad: false,//false to allow for us to call this independantly in js later on

                //here are the packages dojo will be aware of and related js files
                packages: [
                    //dojo specific packages
                    {name: "dojo", location: "libs/dojo"},
                    {name: "dijit", location: "libs/dijit"},
                    {name: "dojox", location: "libs/dojox"},
                    {name: "jquery", location: "libs/jquery", main: "jquery-1.8.2"},
                    {name: "jqueryui", location: "libs/jquery", main: "jquery-ui-1.9.1"},
                ]

            };


    </script>

私のフォルダ構造にはルートにlibsフォルダがあるだけなので、ベースURLに「./」がありますが、同じように簡単に cdnの場所からプル できます。

この設定エントリがないと、jQueryは期待どおりに機能せず、コンソールに「is not a function」というエラーが表示される場合があります。

JQueryまたは他のサードパーティフレームワークをプルするために別のスクリプトタグを挿入し、AMDを使用して同じことを行う場合、- 必須初めて道場に。

32
Jeremy

DojoのAMDローダーを使用してjQueryをロードできます。

次のスニペットはエイリアス$からdojo.queryそれでも競合なしでjQueryを使用します（ただし、お勧めしません！）：

  define.AMD.jQuery = true;

  require(["jquery", "dojo/query", "dojo/NodeList-dom"],
  function(jquery, $) {
    $("output").style("visibility", "visible");     // using Dojo
    jquery("#output").css("visibility", "hidden");  // using jQuery
  });

完全な説明とソースコード： Dojo 1.7 AMDローダーを使用したjQueryのロード

6
Leftium

たとえば、競合を回避するためにjQueryに名前空間を付けることができます。

チェック http://docs.jquery.com/Using_jQuery_with_Other_Libraries

3
yoda

jQueryはかなり長い間AMDをサポートしています。

ADM構成の「paths」プロパティを使用して、AMDローダーにjQueryの場所を指示できます。

var amdconfig = {
  baseUrl: __AMD_CONFIG_BASE_URL__,
  packages: [
    {name: "dojo", location: "./lib/dojo"},
    {name: "app", location: "./app"}
  ],
  paths: {
    jquery: "./lib/jquery/jquery-1.12.4"
  }
};

次に、他のAMDモジュールをインポートするのと同じ方法でjQueryをADMモジュールにインポートし、Dojoモジュールと一緒に使用できます。

define([
  "dojo/dom",
  "jquery"
], function(
  dom,
  $
) {

  ...

});

注意

Dojoの代わりにRequireJSを使用するAMDプロジェクトに同じ構成を使用できます。

if (require.config) {
  // RequireJS
  require.config(amdconfig);
} else {
  // Dojo
  require(amdconfig);
}
2
John Slegers