Načtěte třídy MooTools na vyžádání pomocí RequireJS

RequireJS je nyní velmi populární projekt JavaScript díky tomu, co dělá: asynchronně načítá soubory JavaScriptu a bezchybně zpracuje jejich zavedení do jmenného prostoru. Samozřejmě jsou k dispozici zpětná volání, která vám umožní pracovat s novým kódem, který byl načten. MooTools se perfektně hodí k RequireJS díky své modulární struktuře. Dovolte mi ukázat vám, jak můžete líně načítat třídy MooTools pomocí robustní knihovny RequireJS.

Uchopení a použití RequireJS

Samozřejmě si budete muset stáhnout RequireJS z webu RequireJS. Jakmile je soubor na svém serveru, umístěte jej na stránku tradiční metodou, tagem SCRIPT:

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

Nyní máte možnost asynchronního načítání JavaScriptu na stránce!

Stáhněte si RequireJS

Používání RequireJS s MooTools

Když je k dispozici RequireJS, vše, co musíte udělat, je použít funkci require, předat pole souborů a zpětné volání k provedení, jakmile se všechny soubory načtou:

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

Jakmile budou třídy načteny, mohu je použít! Podívejte se na to:

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

A co praktické využití? Pokud existuje prvek s třídou CSS "lazyload", načtěte LazyLoad a vytvořte instanci:

//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')
			});
		});
	}
});

Nejen, že načtete jednotlivé třídy pomocí RequireJS, ale můžete také vnořit volání požadavků pro asynchronní načtení MooTools! Jakmile bude MooTools připraven, můžete provést kontrolu a načíst třídy MooTools:

//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')
				});
			});
		}
	});
});

Úžasný! Budoucností JavaScriptu je načítání komponent (nebo dokonce celého frameworku) pouze v případě, že je potřebujete!

vyžadovat.připraveno!

Pokud nepoužíváte framework JavaScript, RequireJS poskytuje připravenou metodu pro spuštění funkce, když je DOM připraven!

// 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() {
				//....
			}
		});	
	});
});

Je to podobné jako událost domready od MooTools a hotová metoda Dojo a jQuery.

RequireJS a další frameworky

Dojo v současné době obsahuje svůj vlastní systém asynchronního načítání prostředků, ale počítá s možností implementace RequireJS blízko jeho vydání 2.0. Webové stránky RequireJS také poskytují podrobné pokyny k používání RequireJS s jQuery.