如何使用RequireJS与Bing Maps API？

Question

我该如何在最新版本的RequireJS中使用Bing Maps API？远程脚本URL为：http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0。我只需要添加这样一个shim吗？

require.config({
    /* ... */
    paths: {
        'Microsoft.Maps': 'http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0'
    },
    shim: {
        'Microsoft.Maps': {
            deps: [],
            exports: 'Microsoft'
        }
    }
});

然后在我的模块中像这样使用它：

define(['Microsoft.Maps'], function(Microsoft) {
    /* ... */
});

我想我的问题更多地涉及如何使用RequireJS中的命名空间代码。文档中没有我能找到的任何相关示例。

- FtDRbwLXw6

Answer 1

原来可以使用 async 插件来实现这个功能。

define([
    'async!http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0!onscriptload'
], function() {
    // Microsoft and Microsoft.Maps will be available here
});

“async!”表示告诉RequireJS使用“async”插件，“!onscriptload”则告诉它在“onscriptload” URL参数中发送自动生成的回调名称。当Bing加载完所有资产后，它将发送一个JSONP响应来调用async插件在onscriptload参数中提供的任何回调函数，这将转化为资源被异步加载并随后可用于您的模块。”

- FtDRbwLXw6

---

非常好用 - 谢谢！我使用这种技术构建了一个小型的 AMD 封装器，用于 Bing 的 API，并将其导出到其他模块。 - killthrush

你如何处理地图控件超时的情况？当它超时时，似乎会阻止整个页面的加载。 - Abadaba

@Abadaba：这不是RequireJS相关的问题，而是依赖第三方脚本的通病。由于微软对代码使用有严格限制，我甚至认为你无法将脚本缓存到本地，因此我不知道是否有一个好的解决方案。 - FtDRbwLXw6

Answer 2

在查看RequireJS文档时，我看到了这一行：

不要将CDN加载与构建中的shim配置混合使用。例如场景：您从CDN加载jQuery，但使用shim配置加载类似于依赖于jQuery的Backbone库的原始版本。当您进行构建时，请确保内联jQuery到构建文件中，并且不要从CDN加载它。否则，Backbone将内联在构建文件中，并且它将在CDN加载的jQuery加载之前执行。这是因为shim配置只是延迟文件加载直到依赖项加载完成，但不会自动包装定义。在构建之后，依赖关系已经内联，shim配置无法延迟非define()的代码执行，直到以后。定义（define（））模块在构建后可以使用CDN加载的代码，因为它们正确地将其源包装在定义工厂函数中，该函数不会在加载依赖项之前执行。所以教训是：shim配置是非模块化、遗留代码的权宜之计。定义（define（））模块更好。

请参见：http://requirejs.org/docs/api.html#config Microsoft正在使用第一个脚本引用（延迟加载）来加载多个元素，您应该明确避免使用shim的另一种方式，因为它更像CDN加载情况。

- Nicolas Boonaert

---

我们必须将其作为脚本标签包含在 head 中吗？ - Abadaba