RequireJS - Del1 - Introduktion.

Tänkte i några delposter försöka gå igenom erfarenheter av RequireJS.  Denna del kommer ge en  introduktion av RequireJS.

Från requirejs.org:

"RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code."

RequireJS (Github) är skrivet av James Burke, som är väldigt aktiv i Javascript Communityn.

Genom att använda RequireJS separerar man kod och beroenden genom att lägga koden i olika s.k. moduler. Dessa moduler kallas för Asynchronous Module Definition (AMD) och kan ses som en förlängning av module pattern, men utan att använda globala variabler.

En modul definieras av metoden:

define('module-id', ['dependencies'], factory).

Där module-id är modulens id, dependencies är en array av beroenden till modulen och factory är implementationen/returvärdet av modulen. De första parametrarna, module-id och dependencies är valbara.

Exempel 1

Definiera en samling böcker i form av en books modul:

Definiera en library modul med beroende till books modulen ovan:

Modulen library kan nu användas genom att begära den med require:

Eftersom library är definerat som modul-id, vet RequireJS vilken modul som ska hämtas. Om library inte vore definierat som ett modul-id hade istället RequireJS försökt att hämta filen library.js (mha ett XMLHttpRequest)!

Testa ovanstående kod på: http://jsfiddle.net/erG4S/

Tanken med RequireJS är att varje modul som definieras med define läggs i en egen JS-fil. Detta leder till många olika JS-filer, vilket är bra då man slipper den vanligt förekommande "spagettikod problematiken" av stora JS-filer som gör "allt" (t.ex. GOD-classes). Små separerade moduler är alltså (självklart) att föredra både underhållsmässigt och testmässigt. Dock vill man inte ha ett HTTP-request per AMD-modul (antal HTTP-requests ska man av prestandaskäl försöka hålla ner).

Lösningen på detta problem heter RequireJS Optimzer som kombinerar och packar ihop alla moduler till en fil.

Mer om optimering och AMD-moduler i nästa del!

/Nils