Résumé des cas d'utilisation du chargement modulaire Require.js/AMD en javascript-js tutoriel-php.cn

Chargement modulaire Require.js/AMD

Les développeurs souhaitent utiliser des chargeurs de script pour rendre les applications de scripts riches et chaotiques plus ordonnées, et Require .js est l'une de ces options. Require.js est une boîte à outils puissante qui fonctionne automatiquement avec la technologie AMD pour lisser même les graphiques de dépendances de script les plus complexes.
Regardons maintenant un exemple simple de chargement de script utilisant la fonction Require.js du même nom. La fonction

require([&#39;moment&#39;], function(moment) {
  console.log(moment().format(&#39;dddd&#39;)); // 星期几
});

Copier après la connexion

require accepte un tableau de noms de modules et charge tous ces modules de script en parallèle. Contrairement à Yepnope, Require.js ne garantit pas que les scripts cibles sont exécutés dans l'ordre, mais s'assure uniquement que leur ordre d'exécution peut répondre à leurs exigences de dépendance respectives, mais uniquement si la définition de ces scripts est conforme à AMD (Asynchronous Module Definition, module asynchrone). définition) spécification.

Cas 1 : Chargement de fichiers JavaScript

 <script src="./js/require.js"></script> 
<script> 
  require(["./js/a.js", "./js/b.js"], function() { 
       myFunctionA(); 
       myFunctionB(); 
    }); 
</script>

Copier après la connexion

Comme le montre le cas 1, il existe deux fichiers JavaScript a.js et b.js définissent respectivement deux méthodes myFunctionA et myFunctionB Vous pouvez utiliser RequireJS pour charger ces deux fichiers de la manière suivante. Le code de la partie fonction peut référencer les méthodes de ces deux fichiers.

Le paramètre de tableau de chaînes dans la méthode require peut autoriser différentes valeurs. Lorsque la chaîne se termine par ".js", ou commence par "/", ou est une URL, RequireJS est considéré comme tel. l'utilisateur charge directement un fichier JavaScript. Sinon, lorsque la chaîne est similaire à "my/module", il pensera qu'il s'agit d'un module et chargera le JavaScript là où se trouve le module correspondant en fonction de la baseUrl et des chemins configurés. par le document de l'utilisateur. La partie configuration sera présentée en détail plus tard.

Ce qu'il convient de souligner ici, c'est que RequireJS ne garantit pas que myFunctionA et myFunctionB doivent être exécutés après le chargement de la page par défaut lorsqu'il est nécessaire de s'assurer que le script est exécuté après le chargement de la page. La page est chargée, RequireJS fournit un module indépendant domReady, vous devez vous rendre sur le site officiel de RequireJS pour télécharger ce module. Il n'est pas inclus dans RequireJS. Avec le module domReady, le code du cas 1 peut être légèrement modifié et ajouté avec une dépendance sur domReady.

Cas 2 : Exécuter JavaScript une fois la page chargée

 <script src="./js/require.js"></script> 
<script> 
  require(["domReady!", "./js/a.js", "./js/b.js"], function() { 
       myFunctionA(); 
       myFunctionB(); 
    }); 
</script>

Copier après la connexion

Après avoir exécuté le code dans le cas 2, vous pouvez voir via Firebug que RequireJS insérera une balise

Derniers articles par auteur