jQuery / Dojo - 如何将 jQuery 与 Dojo 工具包一起使用答案

【问题标题】：jQuery / Dojo - How do I use jQuery with Dojo toolkitjQuery / Dojo - 如何将 jQuery 与 Dojo 工具包一起使用
【发布时间】：2011-02-20 11:23:29
【问题描述】：

如何将 jQuery 与 Dojo 工具包一起使用？我听说两个库同时使用，用于 DOM 相关的 jQuery 和用于 UI (dijit) 的 Dojo，但我找不到任何教程或示例。如果我同时加载这两个库，我会遇到任何冲突或问题吗？

【问题讨论】：

标签： javascript jquery dojo

【解决方案1】：

您可以使用 Dojo 的 AMD 加载程序来加载 jQuery。

以下 sn-p 甚至将 $ 别名为 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
  });

完整解释及源码：Loading jQuery with Dojo 1.7 AMD loader

【讨论】：

为什么不推荐呢？
@JabberwockyDecompiler：将$ 别名为dojo.query 不是一个好主意，因为这会让jQuery 和Dojo 开发人员感到非常困惑。它不符合任一组的编码约定。

【解决方案2】：

jQuery 支持 AMD 已经有一段时间了。

您可以使用 ADM 配置的“路径”属性告诉您的 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,
  $
) {
  
  ...

});

注意

对于使用 RequireJS 而不是 Dojo 的 AMD 项目，您可以使用相同的配置：

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

【讨论】：

【解决方案3】：

您可以通过网站头部的脚本标签将jQuery拉入您的应用程序来使用它，不会与dojo冲突。

但是，在将 jQuery 与 dojo 一起使用时需要牢记一些事情，尤其是在使用 dojo version 1.8 及其对 AMD 的全面支持时。利用 AMD (asynchronous module definition) 更简洁（尤其是如果您不能在网站的头部引入 jQuery）。您需要在 dojo 配置脚本中创建一个包条目以正确拉入框架。这是一个使用 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，但您也可以很容易地 pull from a cdn location。

如果没有这个配置条目，jQuery 将无法按预期运行，您最终可能会在控制台中弹出“不是函数”错误。

如果你确实放入了一个单独的脚本标签来拉入 jQuery 或其他第三方框架，并且还使用 AMD 来做同样的事情，那么当你 require 这是道场的第一次。

【讨论】：

【解决方案4】：

您可以毫无问题地同时使用它们，因为 Dojo 不会像其他一些 javascript 库那样覆盖 $。

【讨论】：

【解决方案5】：

您可以命名 jQuery，例如，以避免冲突。

检查http://docs.jquery.com/Using_jQuery_with_Other_Libraries

【讨论】：