javascript - 使用 Require.js 按依赖顺序加载 JavaScript

Question

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

1. 加载 jQuery 和 Google Maps API(我让这个工作正常)
2. 加载 JavaScript 以使用基本应用程序功能在页面上初始化我的 map
3. 加载额外的/客户端特定的 JavaScript。

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

ma​​in.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 ) {

    }
);

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
            });
        });
    }
);

Answer 1

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

ma​​in.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 ) {

    }
);

requiremap.js

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

basemapfunctionality.js

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

additionalfunctionality.js

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