Maison >interface Web >js tutoriel >Comment utiliser require.js ? Accélérer le chargement de JS

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

PHP中文网original: 2017-06-21 10:59:391858parcourir

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 :

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

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

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

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

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!

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：Introduction à ajax et tutoriel sur l'écriture d'ajax natif en JSArticle suivant：Introduction à ajax et tutoriel sur l'écriture d'ajax natif en JS

Articles Liés

Voir plus