Premier contact avec JS nécessite des compétences en outil modulaire

Premier contact avec JS nécessite des compétences en outil modulaire_javascript.js

WBOY

Libérer： 2016-05-16 15:04:59

original

1616 Les gens l'ont consulté

À mesure que les fonctions du site Web s'enrichissent progressivement, les js de la page Web deviennent de plus en plus complexes et volumineux. La méthode originale d'importation de fichiers js un par un via des balises de script ne peut plus répondre au modèle de développement Internet actuel. Nous avons besoin d'une équipe Une série d'exigences complexes telles que la collaboration, la réutilisation de modules, les tests unitaires, etc.

RequireJS est un très petit framework de chargement de modules JavaScript et l'un des meilleurs implémenteurs de la spécification AMD. La dernière version de RequireJS n’est compressée qu’en 14K, ce qui est très léger. Il peut également fonctionner avec d'autres frameworks. L'utilisation de RequireJS améliorera certainement la qualité de votre code front-end.

Quels sont les avantages de requirejs ?

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 script modulaire comme RequireJS améliorera la vitesse et la qualité de. votre code.

Signification approximative :

Il peut être utilisé comme chargeur de module pour les fichiers js dans le navigateur, et peut également être utilisé dans les environnements Node et Rhino, balabala... Ce paragraphe décrit la fonction de base du "chargement modulaire" de requirejs. Qu'est-ce que le chargement modulaire ? Nous les expliquerons un par un dans les chapitres suivants

Examinons d'abord un scénario courant et expliquons comment utiliser requirejs à travers des exemples

Méthode d'écriture normale
index.html :

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="a.js"></script>
 </head>
 <body>
  <span>body</span>
 </body>
</html>

Copier après la connexion

a.js :

function fun1(){
 alert("it works");
}
 
fun1();

Copier après la connexion

Peut-être préférez-vous l'écrire comme ça

(function(){
 function fun1(){
  alert("it works");
 }
 
 fun1();
})()

Copier après la connexion

La deuxième méthode utilise la portée du bloc pour déclarer des fonctions afin d'éviter la contamination des variables globales. Lors de l'exécution des deux exemples ci-dessus, je ne sais pas si vous avez remarqué que lorsque l'alerte est exécutée, le html. le contenu est vide, c'est-à-dire que body n'apparaît qu'après avoir cliqué sur OK. C'est le résultat du blocage du rendu par JS.

nécessite une méthode d'écriturejs

Bien sûr, vous devez d'abord vous rendre sur le site requirejs pour télécharger js -> index.html :

<!DOCTYPE html>
<html>
 <head>
  <script type="text/javascript" src="require.js"></script>
  <script type="text/javascript">
   require(["a"]);
  </script>
 </head>
 <body>
  <span>body</span>
 </body>
</html>

Copier après la connexion

a.js :

define(function(){
 function fun1(){
  alert("it works");
 }
 
 fun1();
})

Copier après la connexion

Le navigateur affiche "ça marche", indiquant qu'il fonctionne correctement, mais il y a une différence cette fois, le navigateur n'est pas vide. Jusqu'à présent, nous pouvons savoir que requirejs a le. avantages suivants :

1. Empêcher le chargement de js de bloquer le rendu de la page

2. Utilisez l'appel de programme pour charger js afin d'éviter les scènes laides suivantes

<script type="text/javascript" src="a.js"></script>
<script type="text/javascript" src="b.js"></script>
<script type="text/javascript" src="c.js"></script>
<script type="text/javascript" src="d.js"></script>
<script type="text/javascript" src="e.js"></script>
<script type="text/javascript" src="f.js"></script>
<script type="text/javascript" src="g.js"></script>
<script type="text/javascript" src="h.js"></script>
<script type="text/javascript" src="i.js"></script>
<script type="text/javascript" src="j.js"></script>

Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde de comprendre l'outil modulaire require.js.