Maison > Article > interface Web > Premier contact avec l'outil modulaire JS require.js

Premier contact avec l'outil modulaire JS require.js

高洛峰original: 2016-12-28 14:22:521366parcourir

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

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 45a2772a6b6107b401db3c9b82c049c2body54bdf357c58b8a65c66d7c19c8e4d114 OK est cliqué, apparaît. C'est le résultat du blocage du rendu du navigateur par JS.

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

Comment écrire requirejs

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

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>

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();
})

<.>

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 !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Une brève analyse des modules ui-router et ng-grid dans angulaireJSArticle suivant：Une brève analyse des modules ui-router et ng-grid dans angulaireJS

Articles Liés

Voir plus