AMD (asynchronous module definition) API jest to wyjątkowe podejście do dołączania modułów do projektu. Różnicę pomiędzy standardowym dołączaniem modułów do projektu, a podejściem AMD widać w poniższej grafice. Jako przykład AMD API w prostym projekcie użyję RequireJS, który jest Script Loaderem czyli narzędziem do dynamicznego dodawania plików do projektu.

RequireJS

Pierwsza oś na powyższej grafice przedstawia klasyczne dołączane kolejno po sobie moduły, mógłby to być np taki zapis w pliku index.html:

< script src=”js/some1.js” > < /script >
< script src=”js/jquery.js” > < /script >
< script src=”js/some2.js” > < /script >

W takim podejściu problemem jest brak czytelności kodu oraz wydłużony czas ładowania modułów. Jednak istnieje też dużo poważniejszy problem. Pojawi się on wtedy, gdy dołączane moduły wzajemnie będą chciały korzystać ze swoich zasobów. Wtedy niezwykle ważna będzie kolejność, a przy większej liczbie modułów prawidłowe działanie kodu może okazać się niemal niemożliwe.

Na drugiej osi powyższej grafiki te same moduły połączone zostały z wykorzystaniem AMD API. Wszystkie potrzebne zasoby z modułów ładowane są jednocześnie, a ponieważ moduł sam wie czego potrzebuje nie musi być załadowany cały plik do projektu a jedynie potrzebne fragmenty. Podział projektu na moduły umożliwia również kombajn jakim jest webpack, jednak w tym tekście chcę się skupić na bibliotece dużo łatwiejszej w użyciu, nie wymagającej serwera i działającej nawet na starych przeglądarkach od IE6+.

Tyle tytułem wstępu i teorii, a teraz jak skorzystać z bezpłatnej biblioteki Require.js:

Najpierw należy pobrać plik z RequireJS do katalogu ze swoim projektem. Można to również zrobić wykorzystując npm:

npm install requirejs

Następnie należy go podpiąć do pliku index.html:

index.html

<html>
<head>
        <script data-main="main" src="require.js"></script>
</head>
<body>
	<h1></h1>
</body>
</html>

zapis: data-main=”main” oznacza, że w pliku main.js (rozszerzenie js jest domyślne dlatego nie musi być wpisane) pojawi się deklaracja modułów dla RequireJS.

main.js

requirejs.config({
    paths: {
        'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min'
    }
});

require(['jquery'], function ($) {

  require(["one", "two", "three"], function (one, two, three) {
	$('h1').html(three - one + two);
  });
});

Na początku pliku main.js w requirejs.config deklaracja ścieżki do jQuery. Następnie deklaracja użycia jQuery i w jego wnętrzu wczytanie kolejnych modułów: one.js, two.js, three.js, dzięki czemu będą one mogły wykorzystywać tę bibliotekę. Następnie dzięki jQuery wyszukanie znacznika H1 i wyświetlenie w nim wyniku działania na trzech modułach: three – one + two;

one.js

define('one', [], function(){
	var someone = 1;
	return someone;
});

two.js

define('two', [], function(){
	var two = 2;
	return two;
});

Moduły one i two, są bardzo proste. Zadeklarowana oraz zwrócony jest w nich zmienna dzięki czemu te wartości trafią do main.js. Pierwsze dwa pliki pokazują w jaki sposób przekazywać moduły: define, a w nim nazwa, tablica oraz funkcja anonimowa.

three.js

define('three', ['four'], function(four){
	var three = 3 + four.fifty + four.forty;
	return three;			
});

four.js

define('four', [], function(){
	return {
		forty: 40,
		fifty: 50
	};
});

Ciekawiej wyglądają dwa kolejne moduły: three i four. W three najpierw pobrany został kolejny o nazwie four. Jego nazwę wstawiona została w tablicę oraz jako parametr w funkcji anonimowej. Z kolei w module four zwrócony został obiekt, do którego przy takim zapisie dostęp ma jedynie plik three.js .

Ostatecznie na ekranie uzyskamy liczbę: 94. Powyższy kod stanowi swoiste „hello world” w requireJS i na jego bazie można zabrać się do budowy bardziej skomplikowanych aplikacji.