Async JavaScript loader & dependency manager in ~1kb
- "New is always better", Barney Stinson
Old School
blocks CSS, Images and JavaScript.
<script src="jquery.js"></script>
<script src="my-jquery-plugin.js"></script>
<script src="my-app-that-uses-plugin.js"></script>Middle School
loads as non-blocking, however one has to use an API definition as AMD or commonjs. This affects all the other scripts (including plugins).
<!-- AMD LOADER EXAMPLE -->
<script>
require(['jquery'], function($) {
console.log($); // function (a,b){return new n.fn.init(a,b)}
require(['my-jquery-plugin'], function() {
/*
If jquery plugin has an anonymous define, throw an error: Mismatched anonymous define() module...
*/
});
});
</script>New School
loads as non-blocking too, however Nautilus.js doesn't care if it's an anonymous define, has unexported module or things like that.
<script>
nautilus.config({
paths: {
'jquery': 'libs/jquery',
'jquery.nanoscroller': 'libs/jquery-nanoscroller',
'waterfall': 'http://cdnjs.cloudflare.com/ajax/libs/waterfall.js/1.0.2/waterfall.min.js'
}
});
nautilus(['jquery', 'waterfall'], ['jquery.nanoscroller'], function() {
console.log($); // function (a,b){return new n.fn.init(a,b)}
console.log(typeof($.fn.nanoScroller)); // 'function'
});
</script>What's the biggest difference about the current top script loaders?
Nautilus can define namespaces to script paths/links and you can manage easily.
First of all, get Nautilus.js using Download Option or via package manager.
To get using Bower just run this command:
bower install nautilusjsOr get using NPM just run this command:
npm install nautilusjsTo define specified paths, you must use the config method:
nautilus.config({
paths: {
'jquery': 'libs/jquery',
'waterfall': 'http://cdnjs.cloudflare.com/ajax/libs/waterfall.js/1.0.2/waterfall.min.js'
}
});To start scripts asynchronous load:
nautilus(['jquery', 'waterfall'], function() {
console.log($); // function (a,b){return new n.fn.init(a,b)}
console.log(typeof(waterfall)); // 'function'
});