Premier contact avec l'outil modulaire JS require.js-js tutoriel-php.cn

Premier contact avec l'outil modulaire JS require.js

高洛峰

Libérer： 2016-12-28 14:22:52

original

1400 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.

第一次接触JS require.js模块化工具

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 le faire. ê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. En tant que chargeur de module pour les fichiers js, il 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 expliquerons

un par un dans les pages suivantes. Examinons d'abord un scénario courant et expliquons comment utiliser requirejs

méthode d'écriture normale

index.html :

a.js :

Peut-être préférez-vous écrire comme ceci

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

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 de variables globales. L'essence est toujours la même. Je me demande si vous avez remarqué lors de l'exécution des deux exemples ci-dessus. Lorsque l'alerte est exécutée, le contenu HTML est vide, c'est-à-dire que body OK est cliqué, apparaît. C'est le résultat du blocage du rendu du navigateur par JS.

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

Copier après la connexion

Comment écrire requirejs

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

Copier après la connexion

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

index.html :

a.js :

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, le corps est apparu dans le. page, jusqu'à présent, nous pouvons savoir que requirejs présente les avantages suivants :

<!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

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

2. Utilisez les appels de programme pour charger js pour empêcher les scènes laides suivantes

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

Copier après la connexion

<.>

Ce qui précède est le contenu complet de l'article, j'espère qu'il sera utile à tout le monde de comprendre l'outil modulaire require.js.

Pour plus d'articles liés à l'outil modulaire JS require.js pour la première fois, veuillez faire attention au site Web PHP chinois !