Javascript - Module Loader (Script Loader)

> (World Wide) Web - (W3|WWW) > Javascript (Js|ECMAScript) > Javascript - Module

1 - About

module and script loaders are about either:

  • helping organize your large application with module
  • keep the execution order of asynchronously loaded scripts.
  • increasing:

3 - Library

4 - Implementations

4.1 - Basic Script Loader

The most generic of script loaders simply create a script tag element and inject it into the loaded page. Since the DOM element is injected, it logically cannot 'block' the rendering of the rest of the page so the browser treats it as if it were asynchronous. Asynchronous scripts don't block so you can load more than one at a time.

// Very simple asynchronous script-loader
// Create a new script element
var script      = document.createElement('script');
// Find an existing script element on the page (usually the one this code is in)
var firstScript = document.getElementsByTagName('script')[0];
// Set the location of the script
script.src      = "";
// Inject with insertBefore to avoid appendChild errors
firstScript.parentNode.insertBefore( script, firstScript );
// That's it!

4.2 - Module Manager Example

5 - Documentation / Reference