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

Question

如何在Dojo工具包中使用jQuery？我听说过两个库同时使用,jQuery用于DOM相关,Dojo用于UI(dijit),但我找不到任何教程或示例.如果我加载两个库,我会遇到任何冲突或问题吗？

Answer 1

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

但是在使用带有dojo的jQuery时要记住一些事情,特别是对于dojo 1.8及其完整的AMD支持.它更干净(特别是如果你不能在你的网站的头部拉jQuery)来利用AMD(异步模块定义).您需要在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文件夹,这就是为什么我的基本网址有"./",但你可以轻松地从cdn位置拉出来.

如果没有此配置条目,jQuery将无法按预期运行,并且您最终可能会在控制台中弹出" 不是函数 "错误.

如果你确实使用单独的脚本标签来引入jQuery或其他第三方框架并使用AMD来做同样的事情,那么当你第一次需要 dojo 时,你最终会把它拉出来.

Answer 2

您可以在彼此旁边使用它们而没有任何问题,因为Dojo不会像其他一些javascript库一样覆盖$.

Answer 3

您可以使用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