Tiny asynchronous dependency loader, that does not require modification of dependent scripts
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
shim
tests
.gitignore
.jscsrc
.jshintrc
.travis.yml
Gruntfile.js
README.md
bower.json
karma.conf.js
package-lock.json
package.json
rjs.js
rjs.min.js

README.md

Micro RequireJS

NPM

Build Status Bower version

A substantial web application doesn't need to wait until all the required JavaScript libraries loaded. Usually most of them can load asynchronously and start acting whenever they are ready. Most commonly used approach here would be AMD. That's a sophisticated and time-proved solution. However to use it with libraries, you must have them converted to modules. I don't appreciate the idea to interfere with 3-rd party library code, besides I would prefer loader library as small as possible. So here we go! Micro-RequireJS is just 1.5KB (gzipped JavaScript) and at the same time it allows you to control non-blocking (async) script loading and dependency resolution.

How to use

Let's create a few of dependency scripts:

dependencyA.js:

console.log( "dependencyA.js is being loaded..." );

dependencyB.js:

console.log( "dependencyB.js is being loaded..." );

Now we can use the library:

<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="./rjs.min.js"></script>
<script type="text/javascript">
rjs.define( "./dependencyA.js", "dependencyA" );
rjs.define( "./dependencyB.js", "dependencyB" );
rjs.define( "./dependencyC.css", "dependencyB" );

rjs.require([ "dependencyA" ], function(){
   console.log("dependencyA.js is loaded");
});
rjs.require([ "DOMContentLoaded", "dependencyA", "dependencyB", "dependencyC" ], function(){
   console.log("dependencyA.js, dependencyB.js, dependencyC.js and DOM are loaded");
});
</script>
</body>
</html>

As we don't need any modification on dependent scripts, we can load e.g. jQuery asynchronously

rjs.define("//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", "jQuery");
rjs.require([ "jQuery" ], function(){
   var $ = window.jQuery;
});

You can run tests like that:

npm test

Note that to use this library with IE8 you need to load ES5 shim (https://github.com/es-shims/es5-shim) and AddEventListener polyfill (https://css-tricks.com/snippets/javascript/addeventlistner-polyfill/). See ./tests/test-ie8.html

Analytics