1

我正在深入研究 Require.js 以使用此链接和此链接作为指南来构建 Google Maps 应用程序。我的目标是构建一个模块化应用程序，首先加载“基本”功能，然后我可以“插入”客户端特定功能-无需重复代码。所以每个项目都将使用“基础”JS，但每个项目的特定于客户端的 JS 会有所不同。下面是我的加载依赖项列表。这是我需要加载的顺序，列表中的前一项需要完全加载，然后才能进入下一项：

  1. 加载 jQuery 和 Google Maps API（我得到了这个）
  2. 加载 JavaScript 以使用基本应用程序功能在页面上初始化我的地图
  3. 加载额外的/特定于客户端的 JavaScript。

我可以使用这个让 1 和 2 正常工作：

主.js：

require.config({
    paths:{
        jquery: "jquery-1.7.1.min",
        jqueryui: "jquery-ui-1.8.22.custom.min",
        async: "async",
        requiremap: "requiremap"
    }
});

require(
    [ "jquery", "jqueryui", "requiremap" ],
    function( $, jqueryui, requiremap ) {

    }
);

要求地图.js：

define(
    [ "async!http://maps.google.com/maps/api/js?sensor=false" ],
    function() {
        require(['js/basemapfunctionality.js'], function() {

        });
    }
);

但现在我需要等到 #2 完全加载后再加载 #3。Require.js 可以做到这一点，如果可以，怎么做？（如果没有，是否有替代框架可以做到这一点）我尝试添加另一个嵌套的 require 方法来加载附加功能（如下所示），但它的行为就像 #2 尚未加载。

define(
    [ "async!http://maps.google.com/maps/api/js?sensor=false" ],
    function() {
        require(['js/basemapfunctionality.js'], function() {
            require(['js/additionalfunctionality.js'], function() {
                // now everything should be loaded, but it ain't
            });
        });
    }
);
4

4 回答 4

3

得到这个工作。只需将 Google Maps API、基本功能和附加功能的加载分解到不同的模块中，并在 main.js 中声明每个模块。

main.js

require.config({
    paths:{
        jquery: "jquery-1.7.1.min",
        jqueryui: "jquery-ui-1.8.22.custom.min",
        async: "async",
        requiremap: "requiremap",
        basemapfunctionality: "basemapfunctionality",
        additionalfunctionality: "additionalfunctionality"
    }
});

require(
    [ "jquery", "jqueryui", "requiremap", "basemapfunctionality", "additionalfunctionality" ],
    function( $, jqueryui, requiremap, basemapfunctionality, additionalfunctionality ) {

    }
);

要求地图.js

define([ "async!https://maps.google.com/maps/api/js?sensor=false" ], function() {});

底图功能.js

define(['requiremap'], function(requiremap) {
    // basemap functionality here
}

附加功能.js

define(['requiremap', 'basemapfunctionality'], function(requiremap, basemapfunctionality) {
    // additional functionality here
}
于 2012-08-23T01:19:59.337 回答
0

请参阅异步加载 API。有一个回调参数，您可以在其中指示 API 完全加载时将调用的回调函数。

于 2012-08-22T16:57:07.173 回答
0

我不太喜欢 RequireJS，但这个问题和评论暗示了一种解决问题的方法。

链接中的相关引用：

这是由于$.extend模块的交互和执行顺序造成的。

在构建的文件中，“其他/配置”模块在内部调用之前被评估 require(['other/controller']，因为$.extend只混合属性，它会导致问题。您可以通过使用Object.create()type 的方法来避免它，您可以在其中创建一个原型为 的新对象BaseConfig，以便稍后您添加到 的任何属性都BaseConfig将自动显示在该新对象上。

于 2012-08-22T16:50:28.557 回答
-1

你试过 Order.js 插件吗？

于 2012-10-26T10:39:44.347 回答