Comprendre les besoins pour un chargement efficace du module JavaScript

La programmation modulaire décompose les grandes applications en blocs de code plus petits et faciles à gérer. Le codage basé sur le module simplifie la maintenance et améliore la réutilisabilité du code. Cependant, les dépendances entre les modules de gestion sont un problème majeur auquel les développeurs sont confrontés tout au long du processus de développement des applications. Requirejs est l'un des cadres les plus populaires pour gérer les dépendances entre les modules. Ce tutoriel explore les exigences du code modulaire et montre comment les obligations peuvent aider.

Points clés

• requirejs est un cadre populaire pour gérer les dépendances entre les modules JavaScript, ce qui améliore la vitesse et la qualité de votre code, en particulier dans les grands projets.
• requirejs utilise le chargement des modules asynchrones (AMD) pour charger des fichiers, ce qui permet aux scripts de charger des modules et de leurs dépendances de manière non bloquante.
• Dans requirejs, tout le code est enveloppé dans les fonctions require() ou define(). La fonction require() est utilisée pour les fonctions qui sont exécutées immédiatement, tandis que la fonction define() est utilisée pour définir des modules qui peuvent être utilisés à plusieurs emplacements.
• requirejs améliore la qualité du code en favorisant la modularité et la séparation des préoccupations, réduit le risque de nommer les conflits en gardant la portée mondiale soignée et fournit un puissant mécanisme de gestion des erreurs.

Chargez le fichier JavaScript

Les grandes applications nécessitent généralement de nombreux fichiers JavaScript. Habituellement, ils utilisent <p> <code>credits.js

Ici, l'initialisation est effectuée avant de charger

. Cela entraînera une erreur comme indiqué ci-dessous. Cet exemple ne nécessite que trois fichiers JavaScript. Dans un projet plus vaste, les choses peuvent facilement devenir incontrôlables. C'est là que les obligations sont en jeu.

Obligation requisejs introduction

requirejs est un module JavaScript bien connu et un chargeur de fichiers pris en charge par les dernières versions de navigateurs populaires. Dans requirejs, nous séparons le code en modules, dont chacun gère une seule responsabilité. De plus, les dépendances doivent être configurées lors du chargement du fichier. Commençons par le téléchargement de requirejs. Une fois le téléchargement terminé, copiez le fichier dans votre dossier de projet. Supposons que la structure du répertoire du projet est désormais similaire à la figure suivante:

scripts main.js

<script> 标签逐个加载。此外，每个文件都可能依赖于其他文件。最常见的例子是 jQuery 插件，它们都依赖于核心 jQuery 库。因此，必须在加载任何 jQuery 插件之前加载 jQuery。让我们来看一个在实际应用程序中加载 JavaScript 文件的简单示例。假设我们有以下三个 JavaScript 文件： <p><code>purchase.js &lt;div class=&quot;code&quot; style=&quot;position:relative; padding:0px; margin:0px;&quot;&gt;&lt;pre class='brush:php;toolbar:false;'&gt;function purchaseProduct(){ console.log(&amp;quot;Function : purchaseProduct&amp;quot;); var credits = getCredits(); if(credits &amp;gt; 0){ reserveProduct(); return true; } return false; }&lt;/pre&gt;&lt;div class=&quot;contentsignin&quot;&gt;Copier après la connexion&lt;/div&gt;&lt;/div&gt; &lt;p&gt;&lt;code&gt;products.js</code></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function reserveProduct(){ console.log(&quot;Function : reserveProduct&quot;); return true; }</pre><div class="contentsignin">Copier après la connexion</div></div> <p><code>credits.js</code></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>function getCredits(){ console.log(&quot;Function : getCredits&quot;); var credits = &quot;100&quot;; return credits; }</pre><div class="contentsignin">Copier après la connexion</div></div> <p>在这个例子中，我们试图购买一个产品。首先，它检查是否有足够的积分可以购买产品。然后，在验证积分后，它预订产品。另一个脚本 <code>main.js</code> 通过调用 <code>purchaseProduct()</code> 来初始化代码，如下所示：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>var result = purchaseProduct();</pre><div class="contentsignin">Copier après la connexion</div></div> <p><strong>可能出错的地方？</strong></p> <p>在这个例子中，<code>purchase.js</code> 依赖于 <code>credits.js</code> 和 <code>products.js</code>。因此，在调用 <code>purchaseProduct()</code> 之前需要加载这些文件。那么，如果我们按以下顺序包含 JavaScript 文件会发生什么情况呢？</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;script src=&quot;products.js&quot;&gt;&lt;/script&gt; Tous les fichiers JavaScript (y compris les fichiers requirejs) sont situés dans le dossier &lt;script src=&quot;purchase.js&quot;&gt;&lt;/script&gt;. &lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt; Les fichiers sont utilisés pour l'initialisation et d'autres fichiers contiennent une logique d'application. Voyons comment inclure les scripts dans les fichiers HTML. &lt;script src=&quot;credits.js&quot;&gt;&lt;/script&gt;&lt;pre class=&quot;brush:php;toolbar:false&quot;&gt;&lt;code class=&quot;language-html&quot;&gt;&lt;🎜&gt;</pre><div class="contentsignin">Copier après la connexion</div></div> <p> Il s'agit du seul code dont vous avez besoin pour inclure le fichier à l'aide de requirejs. Vous vous demandez peut-être ce qui se passe avec d'autres fichiers et comment ils sont inclus. L'attribut <code>data-main</code> définit le point d'initialisation de l'application. Dans ce cas, c'est <code>main.js</code>. Requirejs utilise <code>main.js</code> pour trouver d'autres scripts et dépendances. Dans ce cas, tous les fichiers sont dans le même dossier. En utilisant la logique, vous pouvez déplacer des fichiers vers n'importe quel dossier que vous aimez. Maintenant, jetons un coup d'œil à <code>main.js</code>. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>require([&quot;purchase&quot;],function(purchase){ purchase.purchaseProduct(); });</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> Dans requirejs, tout le code est enveloppé dans les fonctions <code>require()</code> ou <code>define()</code>. Le premier argument de ces fonctions spécifie la dépendance. Dans l'exemple précédent, l'initialisation dépend de <code>purchase.js</code> car elle définit <code>purchaseProduct()</code>. Veuillez noter que l'extension du fichier a été omise. En effet, requirejs ne considère que les fichiers <code>.js</code>. Le deuxième argument de <code>require()</code> est une fonction anonyme qui accepte un objet qui appelle les fonctions contenues dans le fichier dépendant. Dans ce cas, nous n'avons qu'une seule dépendance. Plusieurs dépendances peuvent être chargées en utilisant la syntaxe suivante: </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>require([&quot;a&quot;,&quot;b&quot;,&quot;c&quot;],function(a,b,c){ });</pre><div class="contentsignin">Copier après la connexion</div></div> <p> <strong> Créer une application avec requirejs </strong> </p> <p> Dans cette section, nous convertirons l'exemple de JavaScript pur discuté dans la section précédente pour requirejs. Nous avons couvert <code>main.js</code>, alors continuons à discuter d'autres documents. <code>purchase.js</code> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>define([&quot;credits&quot;,&quot;products&quot;], function(credits,products) { console.log(&quot;Function : purchaseProduct&quot;); return { purchaseProduct: function() { var credit = credits.getCredits(); if(credit &gt; 0){ products.reserveProduct(); return true; } return false; } } });</pre><div class="contentsignin">Copier après la connexion</div></div> <p> Tout d'abord, nous déclarons que la fonction d'achat dépend de <code>credits</code> et <code>products</code>. Dans l'instruction <code>return</code>, nous pouvons définir les fonctions de chaque module. Ici, nous avons appelé les fonctions <code>getCredits()</code> et <code>reserveProduct()</code> sur l'objet passé. <code>product.js</code> est similaire à <code>credits.js</code>, comme indiqué ci-dessous. <code>products.js</code> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>define(function(products) { return { reserveProduct: function() { console.log(&quot;Function : reserveProduct&quot;); return true; } } });</pre><div class="contentsignin">Copier après la connexion</div></div> <p> <code>credits.js</code> </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>define(function() { console.log(&quot;Function : getCredits&quot;); return { getCredits: function() { var credits = &quot;100&quot;; return credits; } } });</pre><div class="contentsignin">Copier après la connexion</div></div> <p> Les deux fichiers sont configurés comme des modules autonomes, ce qui signifie qu'ils ne dépendent de rien. La chose importante à noter est que <code>define()</code> est utilisé à la place de <code>require()</code>. La sélection <code>require()</code> ou <code>define()</code> dépend de la structure du code et sera discutée dans la section suivante. </p> <p> <strong> Utiliser <code>require()</code> avec <code>define()</code> </strong> </p> J'ai mentionné plus tôt que nous pouvons utiliser <p> et <code>require()</code> pour charger les dépendances. Il est essentiel de comprendre la différence entre ces deux fonctions pour gérer les dépendances. La fonction <code>define()</code> est utilisée pour exécuter la fonction exécutée immédiatement, tandis que la fonction <code>require()</code> est utilisée pour définir des modules qui peuvent être utilisés à plusieurs emplacements. Dans notre exemple, nous devons exécuter la fonction <code>define()</code> immédiatement. Par conséquent, <code>purchaseProduct()</code> est utilisé dans <code>require()</code>. Cependant, d'autres fichiers sont des modules réutilisables, alors utilisez <code>main.js</code>. <code>define()</code> </p> <p> Pourquoi les obligations sont si importantes <strong> </strong><p> Dans les exemples JavaScript purs, une erreur est générée en raison de l'ordre de chargement incorrect des fichiers. Maintenant, supprimez le fichier <code>credits.js</code> dans l'exemple requisejs et voyez comment cela fonctionne. La figure suivante montre la sortie de l'outil de vérification du navigateur. </p> <p> <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174036404874237.jpg" class="lazy" alt="Understanding RequireJS for Effective JavaScript Module Loading " /> </p> <p> La différence ici est qu'aucun code n'est exécuté dans l'exemple requisejs. Nous pouvons le confirmer car rien n'est imprimé sur la console. Dans l'exemple JavaScript pur, nous imprimons une sortie sur la console avant de générer l'erreur. Requirejs attend avant de charger tous les modules dépendants avant d'exécuter la fonction. Si un module est perdu, il n'exécutera aucun code. Cela nous aide à maintenir l'intégrité de nos données. </p> <p> <strong> Séquence de gestion des fichiers de dépendance </strong> </p> <p> requirejs utilise le chargement des modules asynchrones (AMD) pour charger des fichiers. Chaque module dépendant commencera à se charger avec des demandes asynchrones dans l'ordre donné. Même avec l'ordre de fichier pris en compte, nous ne pouvons garantir que le premier fichier sera chargé avant le deuxième fichier en raison de la nature asynchrone. Par conséquent, DibleJS nous permet d'utiliser la configuration de la cale pour définir la séquence des fichiers qui doivent être chargés dans le bon ordre. Voyons comment créer des options de configuration dans requirejs. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>&lt;🎜&gt;</pre><div class="contentsignin">Copier après la connexion</div></div> <p> requirejs nous permet de fournir des options de configuration à l'aide de la fonction <code>config()</code>. Il accepte un paramètre nommé <code>shim</code> que nous pouvons utiliser pour définir une séquence obligatoire de dépendances. Vous pouvez trouver un guide de configuration complet dans la documentation de l'API requisejs. </p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>require([&quot;purchase&quot;],function(purchase){ purchase.purchaseProduct(); });</pre><div class="contentsignin">Copier après la connexion</div></div><div class="contentsignin">Copier après la connexion</div></div> <p> Dans des circonstances normales, ces quatre fichiers commenceront à se charger dans l'ordre donné. Ici, <code>source2 dépend de <code>source1. Par conséquent, une fois que <code>source1 a terminé le chargement, <code>source2 considérera toutes les dépendances comme étant chargées. Cependant, <code>dependency1 et <code>dependency2 peuvent encore se charger. En utilisant la configuration de la cale, les dépendances doivent être chargées avant <code>source1. Par conséquent, aucune erreur n'est générée. <p> <strong> Conclusion <p> J'espère que ce tutoriel vous aidera à démarrer avec les obligations. Bien qu'il semble simple, il est vraiment puissant pour gérer les dépendances dans de grandes applications JavaScript. Ce tutoriel ne suffit pas à lui seul pour couvrir tous les aspects des obligations, donc j'espère que vous pourrez apprendre toutes les configurations et techniques avancées à l'aide du site officiel. <p> <strong> (Ce qui suit est une création pseudo-originale de la partie FAQ dans le texte d'origine, le maintien de la signification d'origine et l'ajustement et la réécriture des phrases) <p> <strong> FAQ sur le chargement du module JavaScript à l'aide de requirejs <p> <strong> Quelle est la principale utilisation des besoins de requirejs en javascript? <p> requirejs est un chargeur de fichiers et de modules JavaScript qui est optimisé pour l'utilisation du navigateur, mais convient également aux autres environnements JavaScript. L'objectif principal de l'utilisation de requirejs est d'améliorer la vitesse et la qualité de votre code. Il vous aide à gérer les dépendances entre les modules de code et à charger les scripts de manière efficace. Ceci est particulièrement utile dans les grands projets où les scripts uniques peuvent devenir complexes. Requirejs aide également à garder la portée globale propre en réduisant l'utilisation de variables globales. <p> <strong> Comment gérer les dépendances? <p> requirejs gère les dépendances à travers un mécanisme appelé définition de module asynchrone (AMD). Cela permet au script de charger des modules et leurs dépendances de manière non bloquante. Lorsque vous définissez un module, vous spécifiez ses dépendances, les obligations de requise garantissent que ces dépendances sont chargées avant le module lui-même. De cette façon, vous pouvez vous assurer que tout le code nécessaire est disponible lors de l'exécution du module. <p> <strong> peut-il exiger que lesjs peuvent être utilisés avec Node.js? <p> Oui, les obligations peuvent être utilisées avec Node.js, bien qu'elle soit plus couramment utilisée dans les navigateurs. Lorsqu'elle est utilisée avec Node.js, requirejs vous permet d'organiser le code JavaScript côté serveur en modules comme dans votre navigateur. Cependant, Node.js a son propre système de modules (CommonJS), donc l'utilisation de requirejs est moins courante. <p> <strong> Comment améliorer la qualité du code? <p> requirejs améliore la qualité du code en favorisant la modularité et la séparation des préoccupations. En organisant le code en modules, chacun avec ses fonctionnalités spécifiques, vous pouvez écrire du code plus facile à entretenir et à tester. Il réduit également le risque de nommer les conflits en gardant la portée mondiale soignée. <p> <strong> Quelle est la différence entre les obligations et les communjs? <p> requirejs et communjs sont tous deux des systèmes de modules JavaScript, mais ils ont des différences clés. Requirejs utilise le format de définition de module asynchrone (AMD) conçu pour charger des modules et leurs dépendances de manière asynchrone dans le navigateur. D'un autre côté, CommonJS utilisé par Node.js synchronise le chargement des modules, qui convient plus aux environnements côté serveur. <p> <strong> Comment définir les modules dans requirejs? <p> Dans requirejs, vous pouvez utiliser la fonction <code>define pour définir les modules. Cette fonction prend deux paramètres: un tableau de dépendance et une fonction d'usine. Une fois toutes les dépendances chargées, la fonction d'usine est appelée et la valeur du module doit être renvoyée. <p> <strong> Comment charger des modules dans requirejs? <p> Pour charger un module dans requirejs, vous pouvez utiliser la fonction <code>require. Cette fonction accepte deux paramètres: un tableau de dépendance et une fonction de rappel. Une fois toutes les dépendances chargées, la fonction de rappel est appelée. <p> <strong> Puis-je utiliser les obligations avec d'autres bibliothèques JavaScript? <p> Oui, les obligations peuvent être utilisées avec d'autres bibliothèques JavaScript telles que jQuery, Backbone et Angular. Il peut charger ces bibliothèques en tant que modules et gérer leurs dépendances. <p> <strong> Comment gérer les erreurs? <p> requirejs a un puissant mécanisme de gestion des erreurs. Si le script ne se charge pas, les requises déclenchent un événement d'erreur. Vous pouvez écouter cet événement et gérer les erreurs dans votre code de manière appropriée. <p> <strong> Puis-je utiliser les obligations pour la production? <p> Oui, les obligations conviennent aux environnements de développement et de production. Pour les environnements de production, DibleJS fournit un outil d'optimisation qui combine et compresse vos fichiers JavaScript pour améliorer le temps de chargement. </script>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!