In the current project I am working on, we wanted to load our dependencies in "synchronous" order without the use of a big library like require.js.

Photo of a ISS module
"ISS Habitation module" by NASA - http://replay.web.archive.org/20020212183550/http://spaceflight.nasa.gov/gallery/images/station/habitationmod/html/97_17427.html. Licensed under Public Domain via Commons. Figure 1

We’ve already used a microframework to load script files, load.js by Chris O’Hara, and we wanted to keep that microframework, as it acts like a “boilerplate” for loading of different script files when we need them.

The result of this lead us to a solution where we integrated a loadDeps function to load our dependencies.

In this how-to, we expect that you already have load.js and jQuery in the DOM.

The dependency loader

The dependency loader looks like this:

And it takes three arguments: eventid, scripts_to_load and env_path.

  • eventid is a String, an ID to be used to identify the event triggered when the dependencies are done loading.
  • scripts_to_load is an Object containing the dependencies to load, the path of the dependency and an optional callback to run when the dependency is done loading
  • env_path is a String, a relative path to where the dependencies can be found

The scripts_to_load object

The scripts to load object can look like this:

How to use it

Define your own dependencies as the gist describes it above, then, if you want to, you can define an event listener to listen to the event fired when all the dependencies are loaded:

$(document).one( '<ID to be used for the events fired>:dependencies:loaded', function (){

  // Do stuff here when we have finished loading the dependencies

});

Then, you pass that object to the window.loadDeps function, with required variables:

window.loadDeps( '<ID to be used for the events fired>', _scripts_to_load, '<relevant relative path where the script resides>' );

And that’s it! You have now implemented your own JavaScript dependency loader without the use of Require.js!