javascript - Arcgis (ESRI) dojo 导致使用 jQuery 的定义的组件进行 multipleDefine

Question

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

但是，当我包含时，我总是在控制台窗口中遇到 multipleDefine 问题。

有两种方法可以解决这个问题，那就是把下面的脚本移到组件下面。

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

或者通过在脚本上声明延迟

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

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

大家有什么想法吗？我为此添加了一个 jsFiddle:

https://jsfiddle.net/h9ztsrm3/5

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

为了简单起见，我还添加了另一个 jsFiddle，它不使用 arcgis dojo AMD，而是 requirejs AMD，虽然产生的问题不同，但任何解决方案都可能解决这里的主要主题

https://jsfiddle.net/w33zwjhx/

<小时/>

更多信息如下:

1) 我正在尝试使用 asp.net mvc 5 和 bootstrap 3 生成带有 arcgis map 的 Web 应用程序

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

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

3)我继续将 map 集成到我的应用程序中

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

4) 第 3 步将隐式启动 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/

Answer 1

我想我已经回答了我自己的问题。要点是:

1)在第3方组件中使用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();
});

这些定义和要求让我非常糟糕