W poprzednim artykule opisałem przygotowanie szkieletu aplikacji Dojo. Korzystając z jego kodu postaram się zgłębić temat modułów.

Na początek warto przeanalizować kod z pliku main.js:

require(["dojo/dom", "dojo/dom-construct"], function (dom, domConstruct) {
	var dojoRoot = dom.byId("dojo-root");
	domConstruct.place("<h1>Pogodynka</h1>", dojoRoot);
});

Funkcja require jest odpowiedzialna za wstrzykiwanie zależności. Jako pierwszy argument podaje się tablice nazw modułów, które zostaną przekazane w postaci parametrów do funkcji przekazanej jako drugi argument. Wstrzyknięte mogą być zarówno moduły Dojo, jak i własne.

Do stworzenia własnego modułu można wykorzystać funkcję define, która wygląda podobnie do require:

define(["dojo/dom", "dojo/dom-construct"], function(dom, domConstruct) {
	var AppView = {
		render: function() {
			var dojoRoot = dom.byId("dojo-root");
			domConstruct.place("<h1>Pogodynka</h1>", dojoRoot);
		}
	};
	return AppView;
});

Różnica sprowadza się do tego, że zdefiniowana funkcja powinna zwracać definiowany obiekt, w tym wypadku AppView.

Po zdefiniowaniu modułu, możemy go wstrzyknąć i wykorzystać w pliku main.js:

require(["wercia/view/AppView"], function(appView) {
	appView.render();
});

Dla tak wstrzykniętego modułu, aby został poprawnie odnaleziony przez Dojo, istotne jest skonfigurowanie lokalizacji, gdzie powinien być wyszukiwany. Jeśli nic nie zmienimy w istniejącym projekcie, moduł będzie pobierany z lokalizacji http://ajax.googleapis.com/ajax/libs/dojo/1.12.1/wercia/view/AppView.js. Aby wskazać poprawną lokalizację modułów “wercia/(…)”, wystarczy zmodyfikować dojoConfig:

var dojoConfig = {
	(...)
	packages: [
		{
			name: "wercia",
			location: location.pathname.replace(/\/[^/]*$/, "") + "/js"
		}
	]
};

Powyższa konfiguracja wskazuje katalog “js”, jako zawierający moduły z przestrzeni “wercia”.

Podczas korzystania z manipulacji na drzewie DOM przydaje się możliwość odczekania na zdarzenie załadowania strony (znana z jQuery metoda .ready()). Na całe szczęście, twórcy Dojo nie zapomnieli o takiej potrzebie tworząc moduł “dojo/domReady”, który wystarczy dodać do listy zależności:

require(["wercia/view/AppView", "dojo/domReady!"], function(appView) {
	appView.render();
});

Opisane zmiany nie zmieniają działania pierwotnego projektu i sprowadzają się do jego refaktoryzacji. Mimo tego zachęcam do zapoznania się z otrzymanym wynikowym projektem, jako dającym pogląd na tworzenie własnych modułów.

Przykładowy projekt: