Comment utiliser require.js ? Accélérer le chargement de JS-js tutoriel-php.cn

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

PHP中文网

Libérer： 2017-06-21 10:59:39

original

1862 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 :

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!