Utilisation de RequireJS pour implémenter le chargement différé dans les applications JavaScript

Utilisation de RequireJS pour implémenter le chargement différé dans les applications JavaScript_Basics

WBOY

Libérer： 2016-05-16 15:52:01

original

1084 Les gens l'ont consulté

Qu'elles soient simples ou complexes, les applications web sont composées de certains fichiers HTML, JavaScript et CSS. Habituellement, les développeurs utilisent des frameworks JavaScript tiers tels que JQuery, Knockout, Underscore, etc. pour améliorer la vitesse de développement. Étant donné que ces frameworks JavaScript ont été développés dans un but précis et ont fait leurs preuves, il est plus approprié de les utiliser directement que d'implémenter les fonctions requises à partir de zéro. Cependant, à mesure que la complexité des applications continue d’augmenter, il devient de plus en plus important d’écrire du code propre, à faible couplage et maintenable. Dans cet article, j'expliquerai comment le framework RequireJS aide les développeurs d'applications à écrire du code plus modulaire et comment il améliore les performances des applications grâce au chargement paresseux des fichiers JavaScript.

Nous n'utiliserons pas le framework RequireJS au début, puis le reconstruirons en utilisant RequireJS dans le chapitre suivant.

La page HTML suivante contient un élément

avec l'identifiant "message". Lorsque l'utilisateur visite cette page, elle affichera l'ID de commande et les informations sur le nom du client.

Le fichier Common.JS contient les définitions de deux modules - Commande et Client. La fonction showData est combinée avec le corps de la page. Elle place les informations à afficher dans la page en appelant la fonction d'écriture. À titre d'exemple, j'ai codé en dur l'identifiant sur 1 et le nom du client sur Prasad dans la fonction showData.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript NonRequireJS</title>
<script src="common.js" type="text/javascript"></script>
</head>
<body>
<strong>Display data without RequireJS</strong>
<p id="message" />
<script type="text/javascript">
showData();
</script>
</body>
</html>
Common.JS
 
function write(message) {
  document.getElementById('message').innerHTML += message + '</br>';
}
 
function showData() {
  var o = new Order(1, "Prasad");
  write("Order Id : " + o.id + " Customer Name : " + o.customer.name);
}
 
function Customer(name) {
  this.name = name;
  return this;
}
 
function Order(id, customerName) {
  this.id = id;
  this.customer = new Customer(customerName);
  return this;
}

Copier après la connexion

Ouvrez cette page dans votre navigateur, vous verrez les informations suivantes.

201571120734678.png (300×172)

Bien que le code ci-dessus soit capable d'afficher le résultat, il présente encore quelques problèmes :

Le fichier Common.JS contient toutes les fonctions qui doivent être définies (écriture, showData), et les modules (Commande, Client) sont difficiles à maintenir et à réutiliser. Si vous souhaitez réutiliser la fonction d'écriture dans d'autres pages et référencer le fichier JavaScript ci-dessus, vous avez également importé d'autres fonctions et modules qui peuvent ne pas être nécessaires pour cette page.
Le module Commande (ou « classe » en termes orientés objet) crée une instance du module Client lors du processus d'initialisation. Cela signifie que le module Commande dépend du module Client. Le couplage étroit entre ces modules rend difficile la refactorisation et la maintenance lors des optimisations futures.
Chaque fois que le client demande cette page, le fichier Common.JS sera chargé dans le DOM. Dans l'exemple ci-dessus, même si nous n'avons besoin que d'afficher des informations sur la page, nous chargeons toujours ces modules inutiles (Client, Commande) en mémoire. Le chargement de ressources d'application inutiles (JavaScript, CSS, fichiers image, etc.) peut réduire les performances de l'application.
Les modules du fichier Common.JS peuvent être séparés en différents fichiers JavaScript, mais lorsque l'application devient de plus en plus complexe, il est difficile de juger des dépendances entre les fichiers JavaScript et de l'ordre de chargement des fichiers à charger. .

Le framework RequireJS gère les dépendances entre les fichiers JavaScript et les charge séquentiellement selon les besoins.

Créez des applications avec RequireJS

Regardons maintenant le code refactorisé. Le code HTML ci-dessous fait référence au fichier Require.JS. L'attribut data-main définit le seul point d'entrée pour cette page. Dans le scénario ci-dessous, il indique à RequireJS de charger Main.js au démarrage.

<!DOCTYPE html>
<html>
<head>
<title>JavaScript RequireJS</title>
<script src="Require.Js" type="text/javascript" data-main="Main.js"></script>
</head>
<body>
<strong>Display data using RequireJS</strong>
<p id="message" />
</body>
</html>

Copier après la connexion

Main.JS

Puisque ce fichier a été spécifié via l'attribut data-main, RequireJS le chargera le plus rapidement possible. Ce fichier utilise les fonctions du framework RequireJS pour déterminer et définir des dépendances sur d'autres fichiers JavaScript. Dans l'extrait de code ci-dessous, le premier paramètre représente la dépendance (en fonction du fichier Order.JS) et le deuxième paramètre est une fonction de rappel. RequireJS analyse toutes les dépendances et les charge, puis exécute cette fonction de rappel. Attention, la valeur du premier paramètre (Order) doit être cohérente avec le nom du fichier (Order.JS).

require(["Order"], function (Order) {
  var o = new Order(1, "Prasad");
  write(o.id + o.customer.name);
});

Copier après la connexion

Commande.JS

Le framework RequireJS fournit un moyen simple de définir et de maintenir les dépendances entre les fichiers JavaScript. La fonction de définition dans le code ci-dessous déclare que Customer.JS doit être chargé avant de traiter la fonction de rappel de commande.

define(["Customer"],
function (Customer) {
function Order(id, custName) {
this.id = id;
this.customer = new Customer(custName);
}
return Order;
}
);
Customer.JS

Copier après la connexion

Ce fichier ne dépend d'aucun autre fichier JavaScript, donc la valeur du premier paramètre de la fonction de définition est un tableau vide.

define([],
function () {
function Customer(name) {
this.name = name;
}
return Customer;
}
);

Copier après la connexion

D'accord, ouvrez maintenant cette application avec votre navigateur et vous verrez le résultat suivant. Notez que RequireJS charge uniquement les fichiers JavaScript requis.

201571120754519.png (300×172)

Résumé

Dans cet article, nous analysons comment le framework RequireJS gère les dépendances entre les fichiers JavaScript et les charge selon les besoins. Il aide les développeurs à écrire du code plus faiblement couplé, modulaire et maintenable.