Question

I’m diving into Require.js to build a Google Maps application using this link and this link as a guide. My goal is to build a modular application that loads “base” functionality first, and then I can “plug-in” client-specific functionality – without duplicating code. So every project will use the “base” JS, but the client-specific JS will be different each project. Below is a list of my loading dependencies. This is the order I need things to load, with the previous item in the list needing to be fully loaded before moving onto the next:

1. Load jQuery and Google Maps API (I got this one working)
2. Load JavaScript to initialize my map on the page with base application functionality
3. Load additional/client-specific JavaScript.

I can get 1 and 2 to work just fine using this:

main.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() {

        });
    }
);

But now I need to wait until #2 is completely loaded before loading #3. Is this possible with Require.js, and if so, how? (and if not, are there alternative frameworks that can do this) I tried adding another nested require method to load the additional functionality (illustrated below), but it acts like #2 hasn’t loaded yet.

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

Got this to work. Just had to break up the loading of Google Maps API, base functionality, and additional functionality into different modules and declare each in 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 ) {

    }
);

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
}