Maison > interface Web > js tutoriel > le corps du texte

Comment utiliser require.js ? Accélérer le chargement de JS

PHP中文网
Libérer: 2017-06-21 10:59:39
original
1827 Les gens l'ont consulté

Lorsqu'une page Web introduit de nombreux fichiers js, le chargement de la page Web devient très lent et les fichiers js ont des dépendances. Parfois, ils ne peuvent pas être exécutés s'ils sont inversés, ce qui affecte grandement l'expérience utilisateur.

require.js résout le chargement asynchrone et améliore le chargement des pages Web. En même temps, les js qui reposent sur l'ordre peuvent être triés par tableaux.

La première partie charge require.js et le place dans le sous-répertoire js du répertoire :

<script src="js/require.js?1.1.10">script>

doit ajouter un paramètre reporter async="true" signifie ceci Le fichier doit être chargé de manière asynchrone différé compatible avec la version IE


doit ajouter data-main="js/main" pour indiquer que main.js sous js est le module de chargement principal. Vous devez être rigoureux lorsque vous travaillez.


La fonction require() accepte deux paramètres. Le premier paramètre est un tableau, indiquant les modules dont il dépend, et le deuxième paramètre est la fonction de retour, qui sera appelée une fois tous les modules précédents chargés avec succès.

//main.js :

define(function (require,exports,module){
    exports.add = function (x,y){
      return x+y;
    }; 
});
Copier après la connexion

//math.html :

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="require/require.js?1.1.10"></script><script>require(['main'], function (math){
            alert(math.add(1,1));
              });</script></head><body></body></html>
Copier après la connexion

Renvoyer un 2, il apparaît avec succès.

sont réunis

//b.js:

define(function (require,exports,module){
    exports.add = function (obj,oEv,show){
      return obj[addEventListener(oEv,show,false)]
    }; 
});
Copier après la connexion

//math.html:

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><script src="require/require.js?1.1.10"></script><script>var btn=document.getElementById('btn');function show(){
                alert('弹出')
            }
            require(['main','main'], function (math){
               math.add(btn,'click',show);
                alert(math.add(1,1));
              });</script></head><body><button id="btn">提交</button></body></html>
Copier après la connexion

Lisez cet article et veuillez laisser un message s'il y a quelque chose d'inapproprié.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal