RequireJS, l’API Javascript du futur

Introduction

Si vous n’avez pas encore entendu parler de RequireJS, alors je vais corriger cela tout de suite. En deux mots, selon le site officiel, qu’est-ce que c’est ?

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use

A l’heure où le Javascript prend de plus en plus de place, on arrive très rapidement à se retrouver au final avec du HTML comme suit :

<script src="mon_framework.js"></script>
<script src="plugin1.min.js"></script>
<script src="plugin1.min.js"></script>
<script src="main.js"></script>
<script src="module1.js"></script>
<script src="module2.js"></script>

Et encore, je suis gentil. Pour faire court, c’est le bazar, des variables globales un peu partout, la maintenance qui se complique, oui le JS n’est pas fait pour cette forte utilisation.
En plus de tout cela, nos fichiers JS sont très souvent dépendants les uns des autres, l’ordre de chargement doit être carré de peur de se retrouver avec des résultats non souhaités. Ici on est donc dans un cas typique de chargement synchrone.

RequireJS vous permet d’organiser votre code d’une autre manière, de gérer les dépendances entre vos scripts, les charger en asynchrone tout en gardant l’ordre que vous avez renseigné. On peut également optimiser nos scripts afin d’être plus légers et performants.

Ce qui va suivre est une introduction à RequireJS, je ne traite pas toutes ses spécificités car je n’ai pas la prétention de toutes les connaître.

Utilisation

Vous pouvez utiliser RequireJS avec ou sans jQuery, je vais vous montrer avec.

Premièrement, on télécharge RequireJS depuis cette page. On inclut le fichier dans notre HTML puis on va créer un fichier boot.js (peu importe où).

<script src="libs/requirejs/require.js"></script>
<script src="js/boot.js"></script>
// création des alias/paths
require.config({
	paths: {
		jquery: 'libs/jquery/jquery.min'
	}
});

// module commun à tout le site
define('common', [
	'jquery'
], function($) {
	console.log('boot loaded');
});

// on charge le module commun
require(['common']);

Dans cet exemple, on crée d’abord les alias, c’est facultatif mais je préfère personnellement, par souci de clarté, on peut exporter aussi le require.config() dans un require.config.js. Dans vos fichiers où vous réclamerez des dépendances, vous appellerez vos fichiers par les alias déjà paramétrés.

Pour la configuration des paths, il ne faut pas ajouter l’extension .js à la fin de vos URI.

Après la création des alias, on crée un module grâce à define(), le premier paramètre est facultatif, c’est le nom que vous voulez donner à votre module. Ensuite, dans un tableau vous listez les dépendances, donc vos fichiers dont vous avez besoin, ici jQuery.
Enfin, nous avons le callback exécuté lorsque tous les fichiers sont chargés.

require() permet d’inclure votre module.

Maintenant, nous allons voir un autre exemple avec un autre module.

Dans notre HTML, nous allons ajouter :

<!-- les scripts précédents -->
<script src="module/init_module.js"></script>

Puis dans les alias :

// création des alias/paths
require.config({
	paths: {
		jquery: 'libs/jquery/jquery.min',
		module1: 'module/module1'
	}
});

// module commun à tout le site
define('common', [
	'jquery'
], function($) {
	console.log('boot loaded ');
});

// on charge le module commun
require(['common']);

Dans ce fichier nous mettons un simple objet à l’intérieur d’un define() :

// création du module
define(function() {
	return module = {
		nombre: 88,
		
		nombre_plus: function() {
			this.nombre++;
		}
	};
});

Et enfin le fichier qui va utiliser module1.js :

// module "module1"
define('init_module', [
	'jquery', // si on a besoin de jQuery
	'module1' // inclusion du module
], function($, module1) {

	// private scope
	console.log('init loaded');

	console.log(module1.nombre); // 88
	module1.nombre_plus();
	console.log(module1.nombre); // 89

	return module1;
});

// chargement du module
require(['init_module'], function(module1) {
	// public scope
	console.log(module1.nombre); // 89
});

Voir la démonstration Télécharger l’exemple (39 KB)

Conclusion

J’en ai terminé avec cette introduction à RequireJS. L’objectif était de vous le faire découvrir et/ou vous y intéresser. Je ne pourrais pas vous parler de l’optimisation car je n’ai pas encore essayé. ;)

Vous aimerez aussi...