À mesure que les fonctions du site Web deviennent progressivement plus riches, les JS des pages Web sont devenus de plus en plus complexes et gonflés. La méthode d'origine d'importation de fichiers JS via des balises de script ne peut plus respecter le modèle de développement Internet actuel. Nous avons besoin d'une série de besoins complexes tels que la collaboration d'équipe, la réutilisation des modules, les tests unitaires, etc.
Requirejs est un très petit cadre de chargement de module JavaScript et est l'un des meilleurs implémentateurs de la spécification AMD. La dernière version de requirejs n'est que 14K après la compression, ce qui est très léger. Il peut également fonctionner en conjonction avec d'autres cadres, et l'utilisation de requirejs améliorera sûrement la qualité de votre code frontal.
Quels avantages peuvent exiger que lesjs apportent
Description officielle des exigences:
Requirejs est un chargeur de fichiers et de modules JavaScript. Il est optimisé pour l'utilisation du navigateur, mais il peut être utilisé dans d'autres environnements JavaScript, comme le rhinocéros et le nœud. L'utilisation d'un chargeur de script modulaire comme DibleJS améliorera la vitesse et la qualité de votre code.
Signification générale:
Dans le navigateur, il peut être utilisé comme chargeur de module pour les fichiers JS, ou il peut être utilisé dans les environnements de nœuds et de rhinocéros, Balabala ... Ce passage décrit la fonction de base du "chargement modulaire" requiseJS. Qu'est-ce que le chargement modulaire? Nous expliquerons un par un à partir de la page suivante
Regardons d'abord un scénario commun et expliquons comment utiliser les exigences requises à travers des exemples
Méthode d'écriture normale
index.html:
<! DocType Html> <html> <A-Head> <Script Type = "Text / JavaScript" Src = "A.JS"> </ Script> </ Head> <Body> <span> Body </span> </spory> </html>
A.JS:
fonction fun1 () {alert ("il fonctionne");} fun1 ();Peut-être que vous préférez écrire ceci
(function () {function fun1 () {alert ("il fonctionne");} fun1 ();}) ()La deuxième méthode utilise la portée du bloc pour déclarer que la fonction empêche les variables globales polluantes. L'essence est toujours la même. Lorsque vous exécutez les deux exemples ci-dessus, je ne sais pas si vous avez remarqué que lorsque Alert est exécuté, le contenu HTML est vide, c'est-à-dire <Span> Body </Span> n'est pas affiché et il n'apparaît qu'après avoir cliqué sur la confirmation. Ceci est le résultat de JS bloquant le rendu du navigateur.
Méthode d'écriture requisejs
Bien sûr, tout d'abord, vous devez vous rendre sur le site Web de requirejs pour télécharger JS -> requirejs.rog
index.html:
<! Doctype html> <html> <éadf> <script type = "text / javascript" src = "require.js"> </ script> <script type = "text / javascript"> require (["a"]); </cript> </ head> <body> <span> body </span> </ body> </html>
A.JS:
Define (function () {function fun1 () {alert ("il fonctionne");} fun1 ();})Le navigateur invite "ça fonctionne", ce qui signifie qu'il s'exécute correctement, mais il y a une petite différence. Cette fois, le navigateur n'est pas vide et le corps est apparu sur la page. Jusqu'à présent, nous pouvons savoir que le requirejs a les avantages suivants:
1. Empêcher le chargement JS de bloquer le rendu de la page
2. Chargez JS en utilisant les appels du programme pour empêcher 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="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 / javascrip src = "g.js"> </ script> <script type = "text / javascript" src = "h.js"> </ script> <script type = "text / javascript" src = "i.js"> </ script> <script type = "text / javascrip
Ce qui précède concerne cet article. J'espère qu'il sera utile à tout le monde de comprendre l'outil modulaire requis.