RequireJS est un moyen efficace d'améliorer la vitesse et la qualité de votre code JavaScript, le rendant ainsi plus lisible et plus facile à gérer.
Dans cet article, je vous présenterai RequireJS et comment vous pourrez l'utiliser. Nous allons passer par la nécessité de fichiers et de définir un module et même d’envisager l’optimisation.
En termes simples, exige.js est un chargeur de script qui vous permet de glisser votre code JavaScript dans des fichiers et des modules, gérant ainsi les dépendances de chaque modèle.
Pour commencer à travailler avec RequireJS et sa définition de module asynchrone (AMD), nous devons d'abord Télécharger , puis un lien vers le fichier require.js dans la tête de notre document comme ceci:
Vous vous demandez peut-être ce que cet attribut data-main est, bien en utilisant RequireJS signifie que lorsque vous appelez require dans l'en-tête de votre document, vous êtes également lié au fichier principal de votre application JavaScript, l'attribut data-main est un lien vers fichier JavaScript principal pour votre application, dans ce cas, main.js. (Notez que RequireJS ajoute automatiquement les .js à la fin du nom de fichier.)
Dans ce fichier main.js, vous placez la configuration pour RequireJS, chargez vos modules et définissez un chemin de base à utiliser pour les fichiers.
RequireJS utilise une simple fonction obligatoire pour charger dans les scripts, dans cet exemple, RequireJS charge jQuery:
require(["jquery"], function($) {return $(‘#mydiv”).html(‘Hello this is RequireJS talking”);});Une des meilleures choses à propos de RequireJS est qu’il est extrêmement lisible, si vous regardez ce bloc de code, vous verrez que le premier utilisateur doit récupérer le fichier avec le nom jquery.js et passer une fonction anonyme avec $ jQuery comme paramètre. , lorsque cela est fait, vous êtes libre d’utiliser tout le code JQuery qui vous plait.
Maintenant, vous ne devriez normalement pas avoir la bibliothèque jQuery dans un fichier nommé jquery.js, comme avec la plupart des plugins et des frameworks, nous choisissons normalement de charger ensuite depuis leur GitHub ou le CDN de Google, et pour cela nous devons configurer les chemins qu'ils pointent vers le bon endroit:
require.config({paths: {"jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"}});Cela signifie que vous pouvez exiger jQuery via Google et l'utiliser sans problème. (Notez que j'ai utilisé le nom "jquery" dans cet exemple, mais vous pouvez l'appeler comme vous voulez.)
L'utilisation du modèle AMD signifie que notre code peut être structuré en modules; Ces modèles ne sont que des morceaux de code qui font quelque chose dans notre application. Vous pouvez placer deux lignes de code dans un module ou 100, cela dépend simplement de ce que vous voulez que le module fasse.
Pour définir un module, nous utilisons un code comme celui-ci:
define(function () {function add (x,y) {return x + y;}});Dans cet exemple, j'ai créé une fonction add simple sans dépendances, mais si cette fonction nécessitait jQuery pour fonctionner correctement, la fonction define serait structurée comme suit:
define([‘jquery’], function () {function place(mydiv) {return $(mydiv).html(‘My Sample Text’);}});En utilisant cette syntaxe, nous demandons à JavaScript d’obtenir d’abord jQuery, puis d’exécuter le code afin que jQuery soit disponible en cas de besoin. Nous pouvons également utiliser ceci dans des modules que nous avons écrits dans des fichiers JavaScript, cela ne se limite pas aux frameworks ou aux plugins.
Comme vous pouvez le voir, RequireJS est un excellent outil pour organiser vos fichiers en modules et ne charger que ce dont vous avez besoin. L’inconvénient est que trop de fichiers JavaScript entraînent des temps de chargement médiocres, ce qui explique pourquoi RequireJS comprend un optimiseur pour collecter les données de tous les fichiers et les placer dans un seul fichier réduit.
Globalement, RequireJS est l’un des meilleurs moyens d’organiser et d’optimiser votre code JavaScript pour le Web moderne.
Avez-vous utilisé RequireJS dans un projet? A-t-il amélioré votre flux de travail? Faites le nous savoir dans les commentaires.
Image / vignette en vedette, image des boîtes via Shutterstock.