Dependency loader plugin (only 3KB). Loads plugin dependencies (JS/CSS), stores them into the local storage and a lot more. A refactored and extended version of loadmodule.js. This plugin uses a customized version of the awesome basket.js from Addy Osmani.

Support: IE9+

Most of the frontend modules I develop consist of styles, javascript plugins and or custom scripts and related DOM elements. What I needed was a dependency loader checking the existence of a module in the DOM or if a given condition like touch events is true or not and loading the dependecies when and only when the given condition is true. That's pretty much it.

Think of it as the spine of your web application. Please read on to get an idea what import.js is capable of and what you can achieve with it.

• remove jqQery dependency -> DONE
• code review -> DONE
• tests
• performance optimizations

First include basket.full.custom.min.js and ``import.min.js``` to your template.

<script src="dist/basket.full.custom.min.js"></script>
<script src="dist/import.min.js"></script>

Then proceed to use import.js to lazily load the needed modules dependencies.

// ATTENTION: jQuery is not required!
$(function() {

	var loading = window.import([
		{
			condition: 'body',
			fetch: [
				'some/dep/path/styles.css',
				'some/dep/path/script.js'
			],
			callback: [
				{ method: myMethod, param: 'foo' },
				{ method: anotherMethod, param: { text: 'bar' } },
				{ method: toImportOrNotToImport }
			],
			unique: 0
		},
		{
			condition: window.innerWidth <= 480,
			fetch: [
				'some/other/dep/path.js'
			],
			event: [
				{ name: 'my-custom-event', data: ['someStringParam', 'anotherStringParam'] },
				{ name: 'another-custom-event', data: { hello: 'world' } }
			],
			unique: new Date().getTime()
		}
	], true, 60000);
	
	loading.then(function() {
		alert('Hooray, everything loaded');
	});
});

To see import.js in action clone this repo install the node_modules and type grunt sync on your console to see the example.

Be careful with cross site requests, in other words avoid them. Some browser have problems with that and with some browser I mean IE.

The main part of the whole thing is the sorting of the modules.

1. Check if the condition is true. If it's false, the module will be deleted from the stack
2. If it's a DOM Element get the top offset and use this value for sorting
3. Sort the modules by their top offset. Boolean values have the lowest priority
4. Load

* mandatory

The code is available under MIT Licence, so do whatever you want to do with it.