jQuery / Dojo -如何在Dojo工具包中使用jQuery

q43xntqr  于 2022-12-16  发布在  Dojo
关注(0)|答案(5)|浏览(209)

如何使用jQuery和Dojo工具包?我听说过同时使用两个库的情况,jQuery用于DOM相关库,Dojo用于UI(dijit),但我找不到任何教程或示例。如果我同时加载这两个库,是否会遇到冲突或问题?

eoxn13cs

eoxn13cs1#

您可以通过网站头部的脚本标签将jQuery拉入应用程序中来使用jQuery,不会与dojo发生冲突。
但是在dojo中使用jQuery时需要记住的是,特别是dojo version 1.8和它的完全AMD支持。它更干净(特别是当您无法在网站头部引入jQuery时),以充分利用AMD(asynchronous module definition)。您需要在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将无法正常工作,并且您可能会在控制台中弹出“is not a function”错误。
如果您确实放置了一个单独的脚本标记来拉入jQuery或其他第三方框架,并且也使用AMD来做同样的事情,那么当您第一次为dojo * require * 它时,您将结束第二次拉入它。

relj7zay

relj7zay2#

您可以毫无问题地将它们放在一起使用,因为Dojo不像其他一些JavaScript库那样覆盖$。

yfjy0ee7

yfjy0ee73#

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

完整说明和源代码:Loading jQuery with Dojo 1.7 AMD loader

sy5wg1nm

sy5wg1nm4#

例如,您可以命名jQuery,以避免冲突。
检查http://docs.jquery.com/Using_jQuery_with_Other_Libraries

ej83mcc0

ej83mcc05#

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,
  $
) {
  
  ...

});

备注

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

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

相关问题