recherche

Maison >interface Web >js tutoriel >Premier contact avec JS nécessite des compétences en outil modulaire_javascript.js

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

WBOY
WBOYoriginal
2016-05-16 15:04:591634parcourir

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

a.js :

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

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

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

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 45a2772a6b6107b401db3c9b82c049c2body54bdf357c58b8a65c66d7c19c8e4d114 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>
a.js :


define(function(){
 function fun1(){
  alert("it works");
 }
 
 fun1();
})
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>
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.

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：L'éditeur de texte enrichi ArtEditor ajoute des compétences de soumission de formulaire function_javascriptArticle suivant：L'éditeur de texte enrichi ArtEditor ajoute des compétences de soumission de formulaire function_javascript

Articles Liés

Voir plus