Load MooTools Classes on Demand with RequireJS

RequireJS is a hugely popular JavaScript project right now thanks to what it does:  asynchronously load JavaScript files and properly handle their introduction to a namespace flawlessly.  Of course, callbacks are provided which allow you to work with the new code one it has been loaded.  MooTools is a perfect match for RequireJS because of its modular structure.  Let me show you how you can lazy load MooTools classes with the robust RequireJS library.

Grabbing and Using RequireJS

You'll obviously need to download RequireJS from the RequireJS website.  Once the file is in place on your server, place it within the page via the traditional method, a SCRIPT tag:

<script src="require.js"></script>

Now you have the power of async JavaScript loading within the page!

Using RequireJS with MooTools

With RequireJS available, all you need to do is use the require function, passing an array of files and a callback to execute once all of the files have loaded:

//require ScrollSpy and Roar
require(['scrollspy.1.2.js','Roar.js'],function(){
	//callbacks
});

Once the classes have been loaded, I can use them!  Check it out:

// require ScrollSpy and Roar
require(['scrollspy.1.2.js','Roar.js'],function(){
	//use them!
	var roar = new Roar();
	var spy = new ScrollSpy({
		onEnter: function() {
			//....
		}
	});
});

How about a practical usage?  If an element with a "lazyload" CSS class exists, load LazyLoad and create an instance:

//when the DOM is ready
window.addEvent('domready',function(){
	//find image to lazyload
	var scrollspyElements = $$('.lazyload');
	//if there are images to lazyload...
	if(scrollspyElements.length) {
		//require the class and when done...
		require(['lazyload.js'],function(){
			//create a LazyLoad instance and use it!
			new LazyLoad({
			    range: 200,
			    image: 'Assets/blank.gif',
			    elements: $$('.lazyload')
			});
		});
	}
});

Not only do you load individual classes with RequireJS, but you can also nest require calls to load MooTools asynchronously! Once MooTools is ready, you can make your checks and load MooTools classes:

//load mootools with RequireJS!
require(['mootools-1.2.4.js'],function() {
	//when the DOM is ready
	require.ready(function(){
		//find image to lazyload
		var scrollspyElements = $$('.lazyload');
		//if there are images to lazyload...
		if(scrollspyElements.length) {
			//require the class and when done...
			require(['lazyload.js'],function(){
				//create a LazyLoad instance and use it!
				new LazyLoad({
				    range: 200,
				    image: 'Assets/blank.gif',
				    elements: $$('.lazyload')
				});
			});
		}
	});
});

Awesome!  The future of JavaScript is loading components (or even a whole framework) only if you need them!

require.ready!

If you aren't using a JavaScript framework, RequireJS provides a ready method to trigger a function when the DOM is ready!

// require ScrollSpy
require(['scrollspy.1.2.js','Roar.js'],function(){
	//use it when the dom is ready!
	require.ready(function(){
		//use them!
		var roar = new Roar();
		var spy = new ScrollSpy({
			container: document.id('someDiv'),
			onEnter: function() {
				//....
			}
		});	
	});
});

This is much like MooTools' domready event and Dojo and jQuery's ready method.

RequireJS and Other Frameworks

Dojo currently contains its own asynchronous resource loading system but is looking toward the possibility of implementing RequireJS near its 2.0 release.  The RequireJS website also provides detailed instructions on using RequireJS with jQuery.