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.

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.

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. dowiedz się więcej

Aby zapewnić Tobie najwyższy poziom realizacji usługi, opcje ciasteczek na tej stronie są ustawione na "zezwalaj na pliki cookies". Kontynuując przeglądanie strony bez zmiany ustawień lub klikając przycisk "Akceptuję" zgadzasz się na ich wykorzystanie.

Zamknij