À mesure que les fonctionnalités des sites web se sont progressivement enrichies, le JavaScript dans les pages web est devenu de plus en plus complexe et volumineux. La méthode originale consistant à importer des fichiers JS individuels via des balises script ne peut plus satisfaire le modèle actuel de développement Internet ; nous avons besoin d'une série d'exigences complexes telles que la collaboration en équipe, la réutilisation de modules, les tests unitaires, etc.
RequireJS est un framework de chargement de modules JavaScript très compact et l'un des meilleurs implémenteurs de la spécification AMD. La dernière version de RequireJS ne fait que 14K après minification, ce qui est extrêmement léger. Il peut également fonctionner en collaboration avec d'autres frameworks. Utiliser RequireJS améliorera certainement la qualité de votre code front-end.
Quels avantages requirejs peut-il apporter
Description officielle de requirejs :
RequireJS est un chargeur de fichiers et de modules JavaScript. Il est optimisé pour une utilisation dans le navigateur, mais il peut être utilisé dans d'autres environnements JavaScript, comme Rhino et Node. L'utilisation d'un chargeur de scripts modulaire comme RequireJS améliorera la vitesse et la qualité de votre code.
Signification approximative :
Dans le navigateur, il peut servir de chargeur de modules pour les fichiers JS, et il peut également être utilisé dans les environnements Node et Rhino, blah blah... Ce passage décrit la fonction de base de requirejs — « chargement modulaire ». Qu'est-ce que le chargement modulaire ? Nous l'expliquerons un par un dans les sections suivantes.
Regardons d'abord un scénario courant et expliquons comment utiliser requirejs à travers des exemples.
La manière habituelle d'écrire
index.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="a.js.html"></script>
</head>
<body>
<span>body</span>
</body>
</html>
a.js:
function fun1(){
alert("it works");
}
fun1();
Peut-être préférez-vous l'écrire comme ceci
(function(){
function fun1(){
alert("it works");
}
fun1();
})()
La seconde méthode utilise la portée de bloc pour déclarer des fonctions afin d'éviter de polluer les variables globales, mais l'essence reste la même. Lors de l'exécution des deux exemples ci-dessus, avez-vous remarqué que lorsque alert s'exécute, le contenu HTML est vide, c'est-à-dire,<span>body</span>il n'est pas affiché ; il n'apparaît qu'après avoir cliqué sur OK. C'est l'effet résultantde JS bloquant le rendu du navigateur.
La façon d'écrire avec requirejs
Bien sûr, vous devez d'abord vous rendre sur le site web de requirejs pour télécharger le JS ->requirejs.org
index.html:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="require.js.html"></script>
<script type="text/javascript">
require(["a"]);
</script>
</head>
<body>
<span>body</span>
</body>
</html>
a.js:
define(function(){
function fun1(){
alert("it works");
}
fun1();
})
Le navigateur affiche « it works », ce qui indique que l'opération est correcte, mais il y a une différence : cette fois le navigateur n'est pas vide ; le body est déjà apparu dans la page. Jusqu'à présent, nous pouvons savoir que requirejs présente les avantages suivants :
- Empêcher le chargement de JS de bloquer le rendu de la page
- Utiliser des appels programmatiques pour charger le JS, évitant ainsi des scénarios peu élégants comme celui qui suit
<script type="text/javascript" src="a.js.html"></script> <script type="text/javascript" src="b.js.html"></script> <script type="text/javascript" src="c.js.html"></script> <script type="text/javascript" src="d.js.html"></script> <script type="text/javascript" src="e.js.html"></script> <script type="text/javascript" src="f.js.html"></script> <script type="text/javascript" src="g.js.html"></script> <script type="text/javascript" src="h.js.html"></script> <script type="text/javascript" src="i.js.html"></script> <script type="text/javascript" src="j.js.html"></script>
La signification spécifique du code et d'autres fonctionnalités seront expliquées dans les sections suivantes :Tutoriel sur l'outil de modularisation JS requirejs (Partie 2) : Connaissances de base
Source de l'article : https://github.com/liuxey/blog/issues/1