Arcgis（ESRI）使用define为jQuery组件引起multipleDefine问题的dojo

Question

我希望在我的ArcGIS Web应用程序中包含其他人编写的组件。

然而，每当我这样做时，控制台窗口总是会出现多重定义的问题。

有两种解决方法，一种是将以下脚本移到组件下面。

<script src="https://js.arcgis.com/3.14/"></script>

或者在脚本上声明defer

<script defer src="https://js.arcgis.com/3.14/"></script>

然而，这些并没有解决问题的根本，因为组件基本上不会使用AMD，而是使用浏览器全局来声明它。

你们有什么想法吗？我已经在jsFiddle中包含了这个问题：

https://jsfiddle.net/h9ztsrm3/5

只需打开您的控制台窗口，您就可以看到multipleDefine问题，谢谢！

为了简单起见，我还包括了另一个不使用arcgis dojo AMD而是requirejs AMD的jsFiddle，虽然导致的问题不同，但对此的任何解决方案可能也会解决这里的主题。

https://jsfiddle.net/w33zwjhx/

---

以下是更多信息:

1) 我正在尝试使用asp.net mvc 5和bootstrap 3创建一个带有arcgis地图的Web应用程序

2) asp.net mvc 5默认会添加以下脚本标签

<script src="/Scripts/jquery-2.1.4.js"></script>
<script src="/Scripts/bootstrap.js"></script>

3）我继续将地图集成到我的应用程序中

<script src="/Scripts/esri/3.14/init.js"></script>

4) 第三步将隐式启动dojo，因为arcgis与dojo耦合在一起

5) 我在互联网上找到了一个很好的组件，可以使用并进行集成

https://github.com/ehpc/bootstrap-waitingfor/blob/master/src/waitingfor.js

<script src="/Scripts/ehpc/waitingdialog/src/js/waitingdialog.js"></script>

6) 但是该组件具有以下代码，由于dojo已经通过arcgis加载，因此执行“ if ”语句的内容。

if (typeof define === 'function' && define.amd) {
    define(['jquery'], function ($) {
        return (root.waitingDialog = factory($));
    });
}

7) 我现在按照 jsFiddle 上的问题进行了解

8) 我进行了研究以更好地理解，但是以下网站告诉我 define(['jquery']) 是编写组件的正确方式

http://ifandelse.com/its-not-hard-making-your-library-support-amd-and-commonjs/

- bryan

Answer 1

我想我已经回答了自己的问题。关键点如下：

1）在第三方组件中使用define（['jquery']）是正确的。

2）因为jquery在arcgis dojo之前定义，所以我们必须在dojo被加载后编写以下内容来修复它。

// jquery was loaded before AMD is available, now that AMD is made available after loading dojo,
// register jquery as an AMD module so that AMD compatible plugins are able to locate jquery
define('jquery', [], function () { return jQuery; });

3) 在引入ArcGIS Dojo之前，我们还需要定义dojoConfig。

var dojoConfig = {
  packages: [{
    name: 'newmodule',
    location: '/Scripts/newmodule',
    main: 'newmodulejs'
  }]
};

4) 现在我们可以使用任何第三方组件。

require(['newmodule', 'dojo/domReady!'], function (newModule) {
    // newModule.myfunc();
});

这些 define 和 require 让我很头疼

- bryan

Answer 2

我不清楚你真正想要做什么，但似乎你在那个fiddle的HTML面板中添加的代码中制造了自己的问题。

如果在AMD加载器的存在下加载jQuery，则jQuery已经将自身定义为AMD模块。如果你第二次加载jQuery，则以下内容将起作用，因为jQuery恰好使用静态模块ID定义自身：

<script src="https://js.arcgis.com/3.14/"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    require([ 'jquery' ], function ($) { ... });
</script>

尽管 jQuery 和 $ 仍然会全局注册，但以下是直接通过 AMD 加载器加载 jQuery 的更理想方法：

<script>
    var dojoConfig = {
        async: true,
        paths: {
            jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min'
        }
    };
</script>
<script src="https://js.arcgis.com/3.14/"></script>
<script>
    require([ 'jquery' ], function ($) { ... });
</script>

- Ken Franqueiro

---

谢谢你的见解，Ken。我已经编辑了我的问题，以提供更多关于这个问题的背景信息。简而言之，我正在尝试使用jquery + bootstrap + arcgis地图 + 第三方组件，但无法做到这一点。我尝试使用你提供的require解决方案，它可以工作，但这意味着将来我将不得不重写任何第三方组件，这让我有些犹豫...如果可能的话，我宁愿不改变它们。 - bryan