Loading JavaScript in order of dependencies with Require.js

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:

Load jQuery and Google Maps API (I got this one working)
Load JavaScript to initialize my map on the page with base application functionality
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
            });
        });
    }
);

Gady · Accepted Answer · 2014-08-27 19:44:41Z

3

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
}

edited Aug 27, 2014 at 19:44

answered Aug 23, 2012 at 1:19

Gady

5,0058 gold badges43 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Peter K. Over a year ago

You should mark your own answer as accepted (give it the tick)! Good to hear you figured it out.

Matt S Over a year ago

It also wouldn't hurt to share a code example of your solution here.

Peter K. · Accepted Answer · 2012-08-22 16:50:28Z

0

I'm not much into RequireJS, but this issue and the commentary implies a way to resolve your question.

Relevant quote from the link:

This is due to the interaction of $.extend and the order of execution of modules.

In a built file, the 'other/config' module is evaluated before the inner call to require(['other/controller'], an since $.extend only mixes in properties, it causes the problem. You can avoid it by using the Object.create() type of approach, where you create a new object whose prototype is the BaseConfig, so that later, any properties you add to the BaseConfig will show up automatically on that new object.

answered Aug 22, 2012 at 16:50

Peter K.

8,0974 gold badges53 silver badges77 bronze badges

Comments

Marcelo · Accepted Answer · 2012-08-22 16:57:07Z

0

See Asynchronously Loading the API. There is a callback parameter where you can indicate a callback function that will be called when the API is fully loaded.

answered Aug 22, 2012 at 16:57

Marcelo

9,4133 gold badges38 silver badges40 bronze badges

3 Comments

Gady Over a year ago

As I stated in my question, I can get the Maps API to load and my "base" functionality to load after the Maps API without any problems. The problem is that I need to wait until base functionality JS is fully loaded before loading another JS module.

Marcelo Over a year ago

If you're using a callback, inside the callback function you can do first loadBase() and then loadClientStuff()

Marcelo Over a year ago

I don't know whst Require.js does,whether it load sequentially or asynchronously.

Collectives™ on Stack Overflow

Loading JavaScript in order of dependencies with Require.js

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related