Catégories
JavaScript jQuery

Require.js

Qu’est ce que c’est ?

Un outil (bibliothèque) qui nous permet en javascript d’écrire du code « modularisé », de gérer les dépendances entre nos différents modules et de les charger de manières asynchrone.

A quoi ca sert ?

Ça sert à ne plus avoir un paquet de balises <script> dans nos fichiers HTML qui référencent des fichiers javascript (tel que jquery.js, bootstrap.js, monscript.js, etc.). Il faut savoir qu’un amas de script peut poser des problèmes d’interférences (notamment lorsque ces scripts définissent des variables dans le scope global) et vous empêcher d’utiliser les fonctionnalités souhaitées de ces librairies qui sont pourtant bien incluses là ou le voulez dans vos scripts.

Pour cela il faut découper notre code javascript en modules (l’utilisation d’autres bibliothèque tel que Backbone.js facilite cela), qui sont simplem

ent des parties isolables de notre code JS.

Comment ça s’utilise ?

  1. inclure require.js dans notre page HTML (que ce soit une simple page ou une SPA) en spécifiant notre script de démarrage qui est main.js (notez que le .js est omis volontairement) dans l’attribut data-main :
    <script src="scripts/require.js"data-main="scripts/main"></script>
  2. la 1ère chose à faire dans le main.js est de ce script de configurer require , il y a pas mal d’options possible:
    requirejs.config({...
  3. lancer notre application js en spécifiant (c’est tout l’intérêt) ses dépendances ici un seul script fictif nommé foo.js (ne pas mettre de .js encore une fois, requirejs s’attend à charger des scripts .js !) :
    require(['foo'], function(Foo) {
     // ...notre code utilisant Foo(ses classes, méthodes etc.)
    });
  4. définir si nécessaire nos « modules », pour cela et pour reprendre la déclaration précédente, nous aurons un fichier foo.js dont le contenu serait du type :
    define(
    	['unautremoduleoupas'],
    	function (Mod2)
    	{
    		return {
    		// ...du code exploitant notamment Mod2
    	}
    });

2 Syntaxes possibles AMD ou CommonJS

Pour définir vos modules il est possible d’utiliser 2 syntaxe, la première étant un peu plus difficile à lire lorsqu’il y a de nombreuses dépendance, mais à vous de choisir 🙂

define(
	['module'],
	function (Mod) {
		return {
        // ...du code exploitant notamment Mod
    }
});

ou alors (et c’est peut être plus lisible):

define(function(require) {
	var mod = require("./relative/name");
});

Resources

Une présentation technique (format Prezi) que j’ai fait chez le client