Comment utiliser RequireJS pour optimiser le code de référence JavaScript_Connaissances de base

RequireJS est un moyen efficace d'améliorer la vitesse et la qualité de votre code javascript, tout en rendant votre code plus facile à lire et à maintenir.

Dans cet article, je vais vous présenter RequireJS et comment vous devez l'utiliser. Nous discutons de l'importation de fichiers et de la définition de modules, et abordons même les aspects d'optimisation.

En termes simples, require.js est un chargeur de script qui vous permet de séparer votre code JavaScript en fichiers et modules, tout en gérant les dépendances entre chaque module.

Importer des fichiers

Avant de commencer à utiliser RequireJS, nous devons télécharger sa bibliothèque et son fichier de définition de module asynchrone (AMD). Créez ensuite un lien vers le fichier require.js en tête du document, comme :

 
<script src="require.js" data-main="main"></script>

Vous pouvez demander quel est l'attribut data-main. Utiliser RequireJS signifie que lorsque vous appelez require en tête du document, vous créerez également un lien vers le fichier principal de votre application javascript, qui est main dans cet exemple. js (veuillez noter que RequireJS ajoute automatiquement le suffixe .js à la fin du nom du fichier)

Dans le fichier main.js, vous devez configurer RequireJS, charger le module et définir un chemin de base à utiliser lors de l'importation de fichiers.

Exiger une fonction

RequireJS utilise une simple fonction require pour importer des scripts. Dans cet exemple, RequireJS importe JQuery :

require(["jquery"], function($) {
 $(‘#mydiv”).html(‘Hello this is RequireJS talking”);
});

L'un des avantages de RequireJS est qu'il est très simple à lire. Dans le code ci-dessus, nous pouvons voir que la fonction require récupère d'abord le fichier nommé jquery.js, puis passe $ comme paramètre à une fonction anonyme. Lorsque cette action est terminée, vous pouvez utiliser le code JQuery à volonté.

Maintenant, votre code n'inclut généralement pas la bibliothèque jQuery du fichier jquery.js, comme la plupart des plug-ins et frameworks, nous choisissons généralement de l'importer depuis leur CDN GitHub ou Google, nous devons donc les configurer. Le chemin réel. :

require.config({
 paths: {
  "jquery": "https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"
 }
});

Cela signifie que vous pouvez importer jquery via Google (veuillez noter que j'ai utilisé le nom "jquery" dans cet exemple, vous pouvez utiliser n'importe quel nom de votre choix)

Définir le module

L'utilisation du mode AMD signifie que notre code peut être structuré en modules ; ces modules implémentent certaines fonctions dans l'application. Vous pouvez mettre seulement deux lignes de code dans un module ou 100 lignes de code, tout dépend de ce que vous souhaitez réaliser grâce au module.

Pour définir un module, on peut écrire :

define(function () {
 function add (x,y) {
  return x + y;
 }
});

En cela, j'ai défini une fonction d'ajout sans aucune dépendance, mais si cette fonction nécessite que jquery fonctionne correctement, le code de définition peut ressembler à ceci :

define([‘jquery'], function () {
 function place(mydiv) {
$(mydiv).html(‘My Sample Text');
 }
});

En utilisant cette syntaxe, nous demandons à JavaScript d'importer d'abord jquery, puis d'exécuter le code, afin que jquery puisse être utilisé à tout moment. Nous pouvons également utiliser des modules définis dans des fichiers Javascript, pas seulement des frameworks ou des plugins.

Optimisation

Comme vous pouvez le constater, RequireJS est un outil puissant pour organiser vos fichiers en modules et les importer uniquement lorsque vous en avez besoin. L'inconvénient est qu'un grand nombre de fichiers JavaScript nécessitent également beaucoup de temps d'importation, RequireJS inclut donc un optimiseur pour collecter les données de tous les fichiers et les placer dans un fichier compressé.

Dans l'ensemble, RequireJS est un excellent outil pour organiser et optimiser Javascript dans votre application Web.