RequireJS est probablement l’implémentation de l’API AMD la plus répandue de nos jours. Si sa documentation est plutôt fournie, elle peut pourtant laisser l’impression de manquer d’un exemple simple qui permette de mettre le pied à l’étrier. Le but de ce tutoriel est de vous présenter les fondamentaux le plus simplement possible afin de pouvoir commencer à expérimenter avec Require, à travers un exemple minimaliste.
UN EXEMPLE SIMPLE
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
| <!doctype html><html><head> <meta charset="utf-8"> <title>Basic example of requireJS integration</title></head><body><div id="container"> <p>Check console and js files</p></div><script data-main="js/main" src="js/vendor/require.js"></script></body></html> |
On commence avec une structure basique.
Le tag script qui appelle require.js inclue un attribut « data-main » pointant sur le fichier js/main.js, dont on a omis l’extension (on peut toutefois la conserver si on le souhaite).
Le tag script qui appelle require.js inclue un attribut « data-main » pointant sur le fichier js/main.js, dont on a omis l’extension (on peut toutefois la conserver si on le souhaite).
L’emplacement du fichier main.js est important, car il sera la racine à partir de laquelle les modules seront cherchés.
js/main.js
1
2
3
4
5
6
7
| // Load modules and use themrequire(['module1', 'path/to/module2'], function(module1ref, module2ref){ // do something with the loaded modules var module1 = new module1ref(), module2 = new module2ref(); console.log(module1.getName() === module2.getModule1Name()); // true}); |
La fonction require() prend deux arguments: un tableau de dépendances, et une fonction de callback à exécuter une fois toutes les dépendances chargées.
Cette fonction de callback prend comme paramètres les dépendances indiquées, dans leur ordre d’apparition dans le tableau.
Ici, on charge module1 et module2, qu’on passe au callback sous le nom « module1ref » et « module2ref » respectivement.
Cette fonction de callback prend comme paramètres les dépendances indiquées, dans leur ordre d’apparition dans le tableau.
Ici, on charge module1 et module2, qu’on passe au callback sous le nom « module1ref » et « module2ref » respectivement.
Les paramètres passés dans le tableau des dépendances sont les noms des fichiers JavaScript contenant les modules, sans leur extension. Ils peuvent contenir un path, qui sera relatif à l’emplacement du fichier main.js.
js/module1.js
1
2
3
4
5
6
7
8
9
10
11
| define([], function () { var returnedModule = function () { var _name = 'module1 name'; this.getName = function () { return _name; } }; return returnedModule;}); |
Pour créer un module, on utilise la fonction define() fournie par RequireJS.
Cette fonction, comme dans le cas de la fonction require(), peut indiquer des dépendances.
Elle doit retourner quelque chose, qui sera transmis à la fonction de callback.
Ici, nous retournons une fonction qui expose une méthode getName() permettant de récupérer la variable privée « _name ».
Cette fonction, comme dans le cas de la fonction require(), peut indiquer des dépendances.
Elle doit retourner quelque chose, qui sera transmis à la fonction de callback.
Ici, nous retournons une fonction qui expose une méthode getName() permettant de récupérer la variable privée « _name ».
js/path/to/module2.js
1
2
3
4
5
6
7
8
9
10
11
| define(['module1'], function (module1ref) { var module1 = new module1ref(); var returnedModule = function () { this.getModule1Name = function () { return module1.getName(); } }; return returnedModule; }); |
Pour ce second module, nous avons déclaré une dépendance au module1, qui se retrouve disponible sous le nom module1ref dans la fonction de callback.
Ce module retourne ici aussi une fonction, qui expose la méthode getModule1Name(). Nous voyons ainsi comment on peut utiliser une dépendance au sein d’un module.
Bien sûr, vous avez toute liberté sur ce que vous faites de ces dépendances au sein d’un module, et je suis sûr que vous trouverez des usages bien plus intéressants que celui de cet exemple!
Ce module retourne ici aussi une fonction, qui expose la méthode getModule1Name(). Nous voyons ainsi comment on peut utiliser une dépendance au sein d’un module.
Bien sûr, vous avez toute liberté sur ce que vous faites de ces dépendances au sein d’un module, et je suis sûr que vous trouverez des usages bien plus intéressants que celui de cet exemple!
CHARGER DES DÉPENDANCES QUI NE SONT PAS DES MODULES
Vous aurez probablement assez vite besoin de charger des librairies tierces qui ne sont pas définies comme des modules Require, comme par exemple jQuery ou underscore.js.
Pour cela, James Burke (l’auteur de RequireJS) a mis à notre disposition un système de « shim ».
Pour cela, James Burke (l’auteur de RequireJS) a mis à notre disposition un système de « shim ».
js/main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| require.config({ paths: { 'jQuery': 'vendor/jquery-1.9.0.min', 'underscore': 'vendor/underscore-1.9.min' }, shim: { 'jQuery': { exports: '$' }, 'underscore': { exports: '_' } }});require(['module1', 'path/to/module2', 'jQuery'], function (module1ref, module2ref, $) { // do something with the loaded modules var module1 = new module1ref(), module2 = new module2ref(); console.log(module1.getName() === module2.getModule1Name()); // true console.log('jQuery version:', $.fn.jquery); // 1.9.0}); |
Pour utiliser jQuery comme une dépendance, nous devons indiquer à RequireJS deux choses : le chemin où trouver le fichier JavaScript, et la variable globale que nous souhaitons récupérer.
Pour cela, il nous faut fournir un objet de configuration à la méthode config() de l’objet global « require » (ou « requirejs », les deux sont identiques).
Cet objet de configuration définit dans la clef « paths » les noms des modules virtuels, en tant que clefs dont la valeur représente le fichier que l’on souhaite charger.
Sous la clef « shim » de l’objet de configuration, on utilise ces clefs pour indiquer la variable globale définie par la librairie que l’on souhaite récupérer.
C’est cette variable qui sera retournée lorsque l’on appellera le module ainsi définit.
Pour cela, il nous faut fournir un objet de configuration à la méthode config() de l’objet global « require » (ou « requirejs », les deux sont identiques).
Cet objet de configuration définit dans la clef « paths » les noms des modules virtuels, en tant que clefs dont la valeur représente le fichier que l’on souhaite charger.
Sous la clef « shim » de l’objet de configuration, on utilise ces clefs pour indiquer la variable globale définie par la librairie que l’on souhaite récupérer.
C’est cette variable qui sera retournée lorsque l’on appellera le module ainsi définit.
Là encore, les « paths » définis sont relatifs à l’emplacement du fichier main.js et n’incluent pas l’extension .js
CONCLUSION
J’espère que cette petite visite vous aura permit d’y voir plus clair sur l’utilisation de RequireJS.
La force de ce système réside dans le fait que RequireJS se débrouille tout seul pour charger les dépendances dont nous avons besoin.
Dans un prochain tutoriel, nous verrons comment utiliser l’optimiseur r.js pour fournir à notre page une version concaténée et minifiée regroupant toutes les dépendances dont nous avons besoin dans un premier temps en un seul fichier. Nous pourrons alors « builder » un socle commun à nos pages, qui pourra à son tour charger dynamiquement d’autres dépendances en fonction des conditions qui vous paraitront adéquates.
La force de ce système réside dans le fait que RequireJS se débrouille tout seul pour charger les dépendances dont nous avons besoin.
Dans un prochain tutoriel, nous verrons comment utiliser l’optimiseur r.js pour fournir à notre page une version concaténée et minifiée regroupant toutes les dépendances dont nous avons besoin dans un premier temps en un seul fichier. Nous pourrons alors « builder » un socle commun à nos pages, qui pourra à son tour charger dynamiquement d’autres dépendances en fonction des conditions qui vous paraitront adéquates.
Aucun commentaire:
Enregistrer un commentaire